Vue指令
1.1 v-text指令
语法:v-text=”msg”指令是用来展示文本的,简写为{{ msg }}
注意:{{}}在刷新的时候会有短暂的原样展示。
解决:使用v-cloak指令+css样式对{{}}原样展示进行隐藏。
1.2 v-html指令
语法:v-html=”msg”
注意:指令会进行标签的解析,而v-text只解析数据成文本,对标签进行字符展示。
1.3 v-pre指令
语法:{{ this will not be compiled }}
注意:不解析数据,直接原样展示
1.4 v-once指令
语法: {{msg}}
注意:只会对元素或者组件渲染一次,随后的渲染会跳过。
1.5 v-bind指令
语法:v-bind:attr=”msg”指令用来绑定标签的属性,简写为: attr=”msg”
注意:msg this.msg vm.msg this.data.msg
1.6 v-if指令
1.6.1 单路分支
实例:
<div v-if="Math.random() > 0.5">
Now you see me
</div>
1.6.2双路分支
实例:
<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>
1.6.3 多路分支
实例:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
1.7 v-show指令
实例:
<div v-show="flag">
A
</div>
用法:
根据表达式之真假值,切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
V-show与v-if的对比(重点):
1.初始状态时:
v-show无论表达式真假都会进行标签的渲染,渲染开销大
v-if它是表达式为真则进行渲染,表达式为假时不进行渲染,渲染开销小
2.切换时:
v-show因为元素已经加载,所以进行切换时切换状态的速度会快,切换开销小
v-if 在切换状态的时候,会对元素进行重建和销毁,所以切换的速度慢,切换开销要大
3.多条件时:
v-show不支持复杂的多条件分支,所以这时候只能使用v-if指令
总结:
在切换频繁并且条件分支单一的情况下选择v-show,其他情况选择v-if。
v-for指令
循环渲染的目标可能是一个数组,字符串,对象, number类型。
数字: v-for=” num in 10 ”
字符串: v-for=”str in ‘abcdefg’ ”
数组: v-for=”item in [1,2,3,4,5]”
对象: v-for=”val in {name:’zmh’,age:23,sex:’man’}”
v-for语法还可以进行多参数延伸,如:
数组:
<div v-for="(item, index) in items"></div>
对象:
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
如有数据嵌套需要进行多层循环,语法:
<div v-for="(item, index) in items">
<div v-for="(val, index) in item">
{{val}}
</div>
</div>
v-on指令
语法:
<button v-on:click = 'fn' > 点击 </button>
简写:
<button @:click = 'fn' > 点击 </button>
事件对象:
eventHandler(*e*){
*console*.log( e )
}
事件传参:
<button @:click = 'argHandler("hi")'>事件传参</button>
事件对象及传参:
<button @:click = 'arg2Handler($event,"hi")'>事件传参2</button>
事件修饰符:
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- e - (2.3.0) 以 { passive: true } 模式添加侦听器
.stop示例:
<div class="box3" v-on:click.stop = 'box3Handler'></div>
Vm的 o n , on, on,emit,$off
监听当前实例上的自定义事件.passiv
vm.$on('test', function (msg) { console.log(msg) })
触发事件
vm.$emit('test', 'hi') // => "hi"
移除自定义事件监听器:
vm.$off('test')
v-once指令
语法:
<button v-on:click.once = 'onceHandler'>once</button>
用途:事件只执行一次,就不再执行
v-model指令
用法:v-model是对表单元素进行双向的数据绑定,如input, textarea,option。
语法:
<input type="text" v-model = 'msg'>
扩展:
怎么用单向数据绑定实现双向的数据绑定的效果
<input type="text" :value = 'msg' @input = 'fn'>
*var* vm = new Vue({
el: '#app',
data: {
msg: 'hello vue.js'
},
methods: {
fn(*e*){
// this._data.msg = 'sdfsf'
this.msg = e.target.value
}
}
})
自定义指令
有全局定义和局部定义两种方式,推荐使用全局定义,项目中可以多次使用。
\1. 全局定义
Vue.directive(directiveName,options||function)
\2. 局部定义
new Vue({
directives: {}
})
想法需求:
如何实现网页一加载就将光标定位在input输入框内?
答案:
<div id="app">
<input type="text" v-focus>
</div>
//全局注册指令
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (element) {
// 聚焦元素
element.focus()
}
})
new Vue({el:'#app'})
//注册局部指令为例
new Vue({
el: '#app',
directives: {
focus: {
inserted(element ){
element.focus()
}
}
}
})
扩展
非响应式的特例
-
数组的下标
-
数组的length
解决方法:
-
解决数组的下标
Vue.set( target, key, newValue )|| this.$set(target, key, value)
-
解决数据的length
this.arr.splice(0)
列表渲染的key设置
//html--code
<li v-for = '(list,index) in lists' v-bind:key = 'list.id' >
//js--code
new Vue({
el: '#app',
data: {
lists: [
{
id: 1,
name: '电脑'
},
{
id: 2,
name: '手机'
},
{
id: 3,
name: '电视机'
}
]
},
methods: {
colorChange(e){
//操作DOM 不建议的
e.target.parentNode.style.background = 'red'
},
del(index){
this.lists.splice(index,1)
}
}
})
面试题(重点)
1:Vue深入响应式的原理是什么?
答: data发生改变视图会对应发生改变,用到了es5的object.defineProperty
- setter 被调用时用watch来监听变化
- 使用 Object.assign()来解决变化检测问题
- 异步的更新队列
2:双向数据绑定的原理?
-
实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
-
实现一个订阅者Watcher,每一个Watcher都绑定一个更新函数,watcher可以收到属性的变化通知并执行相应的函数,从而更新视图。
-
实现一个解析器Compile,可以扫描和解析每个节点的相关指令(v-model,v-on等指令),如果节点存在v-model,v-on等指令,则解析器Compile初始化这类节点的模板数据,使之可以显示在视图上,然后初始化相应的订阅者(Watcher)。
-
总之,其底层也用到了es5的Object.defineProperty的get和set方法