模板语法
{{ msg }}
指令
VUE自带13种指令
1. v-html
2. v-text
3. v-bind
4. v-show
5. v-if
6. v-else
7. v-else-if
8. v-model
9. v-for
10. v-on
11. v-pre
12. v-cloak
13. v-once
自定义指令
留神：自定义指令中的this指向都是window
一个指令定义对象能够提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保障父节点存在，但不肯定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，然而可能产生在其子 VNode 更新之前。指令的值可能产生了扭转，也可能没有。然而你能够通过比拟更新前后的值来疏忽不必要的模板更新
// 自定义获取焦点指令
Vue.directive('focus',{
inserted: function(el){
// el代表绑定的元素
el.focus();
}
})
// 应用自定义的指令
<input type="text" v-focus>
// 自定义带参数的自定义指令
Vue.directive('color',{
bind: function(el,bingding){
// bingding代表绑定的值
el.focus();
}
})
// 应用带参数的自定义的指令
<input type="text" v-color="{color:yellow}">
// 自定义部分指令，须要在VUE实例中增加一个directives
directives： {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
},
color: {
bind: function(el,bingding){
el.style.backgroundColor = binding.value.color;
}
}
}
文本
1. v-text
2. v-html
3. {{}}
属性 v-bind
列子：v-bind:class
简写：:class
款式绑定
对象模式设置
<div :class="{bgc: isActive}"></div>
数组模式设置
<div :class="[bgcClass,colorClass]"></div> // 数组外面的值须要在data外面定义代表的class款式
混合模式
<div :class="[bgcClass,colorClass，{bgc: isActive}]"></div>
v-if和v-show
- 伎俩：v-if是通过管制dom节点的存在与否来管制元素的显隐；v-show是通过设置DOM元素的display款式，block为显示，none为暗藏；
- 编译过程：v-if切换有一个部分编译/卸载的过程，切换过程中适合地销毁和重建外部的事件监听和子组件；v-show只是简略的基于css切换；
- 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始部分编译（编译被缓存？编译被缓存后，而后再切换的时候进行部分卸载); v-show是在任何条件下（首次条件是否为真）都被编译，而后被缓存，而且DOM元素保留；
- 性能耗费：v-if有更高的切换耗费；v-show有更高的初始渲染耗费；
- 基于以上区别，因而，如果须要十分频繁地切换，则应用 v-show 较好；如果在运行时条件很少扭转，则应用 v-if 较好。
表单
v-model
表单修饰符
v-model:number // 转化为数字
v-model:trim // 去除前后空格
v-model:lazy // 将input事件转换成change事件
循环 v-for
<li v-for="{item in arr}">{{ item }}</li>
<li v-for="{(item,index) in arr}">{{ index }} --- {{ item }}</li>
<li v-for="{(item,index) in arr}" :key="item.id">{{ index }} --- {{ item }}</li> // key是为了帮忙VUE进步性能的
事件绑定
写法
根本写法：v-on:click
简写：@click
事件修饰符
Vue.js 通过由点 . 示意的指令后缀来调用修饰符，能够多个修饰符串联一块写
模式：事件.修饰符名称
例子： @click.stop
1. stop // 阻止冒泡
2. prevent // 阻止默认行为
3. capture // 阻止捕捉
4. self // 只监听触发该元素的事件
5. once // 只触发一次
6. left // 左键触发
7. right // 右键触发
8. middle // 两头滚轮触发
按键修饰符
Vue 容许为 v-on 在监听键盘事件时增加按键修饰符
例子：
<input v-on:keyup.13="submit">
<input @keyup.enter="submit">
记住所有的 keyCode 比拟艰难，所以 Vue 为最罕用的按键提供了别名：
1. enter
2. tab
3. delete (捕捉 "删除" 和 "退格" 键)
4. esc
5. space
6. up
7. down
8. left
9. right
10. ctrl
11. alt
12. shift
13. meta
自定义按键修饰符:
Vue.config.keyCodes.f1 = 112
发表回复