1、插值：
<p>{{message}}<p/>
2、插值表达式：
<p>{{flag?'OK':'error'}}</p>
3、一次性插值指令 v-once,当数据改变时，插值处的内容不会更新
<p v-once>{{message}}<p/>
4、v-html指令渲染原生html文档： 1、防止xss攻击会 2、覆盖原来的内容
<p v-html="rawhtml">原来的内容</p>
rawhtml:`<img src='123' onerror='alert(document.cookie)'`
5、v-bind指令解决标签属性的绑定：如果MyAttr的值为null或者undefined,my-atrr属性不会被渲染出来。
<p :my-atrr='MyAttr'></p>
<p :class='myclass'></p>
6、v-bind:参数='xxx'、v-bind:[动态参数]='xxx'
7、修饰符：
事件修饰符：stop、prevent、self、captrue、once
内置按钮修饰符:1、enter；2、tab；3、delete；4、esc；5、space；6、up；7、down；8、left；9、right；
自定义按钮修饰符：Vue.config.keyCodes.flag = keyCode
<input v-on:keyup.enter="submit">
methods:{
submit(e){
console.log(e.target.value);
}
}
8、vue的内置指令：
1、v-bind
2、v-if
3、v-if-else
4、v-else
5、v-show
6、v-once
7、v-for
8、v-html
9、v-on
9、自定义指令：
9-1、注册全局指令
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
9-2、注册局部指令：
<template>
<div class="home">
<input placeholder="test">
<input v-focus='express'>
<button type="button" @click="express+=1">{{express}}</button>
</div>
</template>
<script>
export default {
directives: {
focus: {
// 指令的定义
inserted: function (el,binding) {
console.log(arguments);
console.log(binding.value);
el.focus()
},
update: function (el,binding){
console.log('kkkk');
console.log(binding.value);
}
}
},
data() {
return {
express: 12
}
},
}
</script>
9-3、指令的对象回调函数：
1、bind：只调用一次，指令第一次绑定到元素时调用。
2、inserted：被绑定元素插入父节点时调用 。
3、update：所在组件的 VNode 更新时调用。
4、componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
5、unbind：只调用一次，指令与元素解绑时调用。
9-4、动态指令参数：
<template>
<div class="home">
<button v-count:[direactiveArg]='200' @click="setCount" type="button">test</button>
</div>
</template>
<script>
export default {
directives: {
count: {
update(el, binding) {
console.log(binding.arg);
console.log(binding.value);
}
}
},
data() {
return {
direactiveArg: 1,
}
},
methods: {
setCount() {
this.direactiveArg++
}
}
}
</script>
