vue(2)

条件渲染

条件渲染指令

1）v-if 与 v-else

2）v-show

比较 v-if 与 v-show

3）如果需要频繁切换 v-show 较好

4）当条件不成立时, v-if 的所有子节点不会解析

列表渲染

列表显示指令

数组: v-for / index

对象: v-for / key

列表的更新显示

删除 item

替换 item

列表的高级处理

列表过滤

列表排序

事件处理

绑定监听:

1）v-on:xxx="fun"

2）@xxx="fun"

3）@xxx="fun(参数)"

4）默认事件形参: event

5）隐含属性对象: $event

事件修饰符

1）.prevent : 阻止事件的默认行为 event.preventDefault()

2）.stop : 停止事件冒泡 event.stopPropagation()

按键修饰符

1）.keycode : 操作的是某个 keycode 值的键

2）.keyName : 操作的某个按键名的键(少部分)

表单输入绑定

使用 v-model 对表单数据自动收集

1）text/textarea

2）checkbox

3）radio

4）select

Vue 实例生命周期

生命周期流程图

图片.png

vue 生命周期分析

1）初始化显示

*beforeCreate()

*created()

*beforeMount()

*mounted()

2）更新状态: this.xxx = value

*beforeUpdate()

*updated()

3）销毁 vue 实例: vm.$destory()

*beforeDestory()

*destoryed()

常用的生命周期方法

1）created()/mounted(): 发送 ajax 请求, 启动定时器等异步任务

2）beforeDestory(): 做收尾工作, 如: 清除定时器

过渡&动画

vue 动画的理解

1）操作 css 的 trasition 或 animation

2）vue 会给目标元素添加/移除特定的 class

3）过渡的相关类名

xxx-enter-active: 指定显示的 transition

xxx-leave-active: 指定隐藏的 transition

xxx-enter/xxx-leave-to: 指定隐藏时的样式

图片.png

基本过渡动画的编码

1）在目标元素外包裹<transition name="xxx"></transition>

2）定义 class 样式

指定过渡样式: transition

指定隐藏时的样式: opacity/其它

过滤器

理解过滤器

1）功能: 对要显示的数据进行特定格式化后再显示

2）注意: 并没有改变原本的数据, 可是产生新的对应的数据

定义和使用过滤器

1）定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
    // 进行一定的数据处理
    return newValue
})

2）使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

内置指令与自定义指令

常用内置指令

1）v:text : 更新元素的 textContent

2）v-html : 更新元素的 innerHTML

3）v-if : 如果为 true, 当前标签才会输出到页面

4）v-else: 如果为 false, 当前标签才会输出到页面

5）v-show : 通过控制 display 样式来控制显示/隐藏

6）v-for : 遍历数组/对象

7）v-on : 绑定事件监听, 一般简写为@

8）v-bind : 强制绑定解析表达式, 可以省略 v-bind

9）v-model : 双向数据绑定

10）ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象

11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

自定义指令

1）注册全局指令

Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})

2）注册局部指令

directives : {
    'my-directive' : {
        bind (el, binding) {
            el.innerHTML = binding.value.toupperCase()
        }
    }
}

3）使用指令

v-my-directive='xxx'

自定义插件

说明

1）Vue 插件是一个包含 install 方法的对象

2）通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令等