一、基础语法以及指令(v-xx)
1.<span>Message: {{ msg }}</span>插值语法用双大括号在页面显示msg的值
2.v-html=”msg” 以html的格式解析在页面显示msg的值
3.v-text=”msg” 以文本格式解析在页面显示msg的值
4.v-bind:class=”[c1,c2]” 绑定属性,简写形式为:class=”[c1,c2]”
5.v-if=”boolean” 判断是否加载,具有懒惰加载机制,如果为false,审查看不到该元素
6.v-else 否则判断语句,同样必须紧跟v-if判断语句
7.v-else-if=”boolean2” 否则判断指令,必须紧跟v-if判断语句
8.v-show=”boolean” 判断是否呈现在页面不具有懒惰加载机制,不管怎样都会加载,当判断条件为false的时候display=”none”,审查可以看到该元素
9.遍历数组: v-for=”(value,index) in array”
遍历对象: v-for="(value,key,index) in object"
10.v-model 是数据模型绑定指令,效果与{{}}相同,但是不会出现闪屏的问题
11.v-on:click=”show” 绑定事件行为,简写形式为@click=”show”
关于绑定事件:
(1)@click=”show($event)”可以传递事件对象,然后可以在事件方法中接收到该$event对象然后做一系列的操作:
function show(evt){
evt.preventDefault(); //阻止默认事件
evt.cancelBubble = true; //阻止冒泡事件
console.log(evt); //查看evt的结构类型
}
(2)@click=”show($event,args)”传参数-à接收:function(evt,args){}
(3)@click.stop=”show” 阻止冒泡的简易写法
(4)@click.prevent=”show” 阻止默认事件的简易写法
(5)@click.stop.prevent=”show”同时阻止冒泡跟阻止默认事件
(6)@keydown.enter=”show” 点击回车键的时候才生效
还有其他的绑定事件就不一一详述了...
二、自定义指令
(1)注册一个全局指令v-focus
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
注册局部指令v-focus
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
(2)在元素上使用新的指令<input v-focus>
三、计算属性(computed)
有时候我们的其中一个属性 是通过一段代码来计算出来的,而我们data下面又不能直接写代码,所以我们要用到这computed 元素。
(1)当用于计算的属性发生变化时该方法会自动调用,然后得到最新的计算结果。
computed: {
reversedMessage: function () {
return this.msg.split('').reverse().join('');
}
}
以上方法就是计算属性的一个小例子,用到了data中声明的msg属性,当msg发生改变的时候reversedMessage方法会自动调用并返回最后的计算结果。
页面上可以用这两种方式显示:{{ reversedMessage }} 或者用v-text=” reversedMessage”
(2)计算属性的getter、setter方法
提供了site属性的get,set方法,并且site是通过name、url两个属性计算得来的。
computed: {
site: {
get: function () {
return this.name + ' ' + this.url
},
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
当我们调用 vm.name=’jack’; 的时候set方法会自动执行
当我们调用 vm.name; 的时候get方法会自动执行
页面引用{{site}} 就会呈现get方法中的返回值