表达式
在HTML中直接嵌入JavaScript代码，需要使用表达式
{{ }}
{{ 10 + 20 }}
{{ Math.random() > 0.5 }}
{{ 'hello vue'.toUpperCase() }}
{{ 0 > 1 ? 'true' : 'false' }}
和AngularJS中使用规则一致
【VUE的JS指令】注意：放置的代码，一定要具有返回值
常用指令 v-text 绑定内容值
{{ a }}和AngularJS中ng-bind功能一致
v-model 双向绑定
{{ username }}
和AngularJS中ng-model功能一致
v-model是语法糖，不使用v-model也可实现（v-bind / v-on）
注意：使用变量username的时候，一定需要在控制器中进行过定义
v-for 渲染列表
关键字使用
of或in都可以// 首先在数据中声明
let vm = new Vue({
el: '#app',
data: {
people: [
{ name: 'xiaoming', age: 19 },
{ name: 'xiaohong', age: 20 },
{ name: 'xiaoli', age: 12 }
]
}
});
- {{ person.name + ' ' + person.age }}
- {{ person.name + ' ' + person.age }}
- {{ index + ' ' + person.name + ' ' + person.age }}
- {{ index + ' ' + person.name + ' ' + person.age }}
v-on 事件绑定
和AngularJS不同，在Vue中，绑定任何事件都使用
v-on这一个指令// 在method中声明方法
let vm = new Vue({
el: '#app',
methods: {
show() {
console.log('show');
}
}
});
简写形式，使用
@代替了v-on指令
mouseover
修饰符
执行事件的同时，另外去执行其它的任务
-
stop：调用event.stopPropagation() -
prevent：调用event.preventDefault() -
enter：调用指定按键上触发的回调
李大泽
阻止事件冒泡
传递参数
$event参数
methods: {
show(e) { // e代表传递进来的参数
console.log(e);
}
}
v-bind 绑定属性
文章图片
{{ blogName }}
v-bind:class
v-bind:style
v-bind
简写形式，使用
:来代替v-bind指令
文章图片
{{ blogName }}
v-bind:class
v-bind:style
v-if v-else-if v-else 是否渲染
A
B
C
Not A/B/C
v-show 显示隐藏标签
v-show
v-cloak 这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
{{ msg }}
change () {
this.msg += 'ggggggggg';
console.log(this.msg);
}
