vue全指令和详细说明
1.在Vue实例中，如果想要获取data上的数据或则调用methods中的方法，通过this.data上的属性名或this.methods上的方法名来进行获取！
2.凡是定义全局的操作，都没有s；凡是定义私有的操作都需要s
指令
v-cloak属性：(设置样式display:none)
解决插值表达式{{ }}闪烁的问题，只会替换自身的占位符，不会清空元素原本的内容
（特殊）v-once：只渲染组件和元素一次，不会再次改变data中的数据值
（特殊）v-pre:不对插值表达式起任何作用，跳过元素的编译过程
v-text='data中的属性名'：默认不会出现闪烁，会覆盖元素中原本的内容
v-html='data中的属性名':不会出现闪烁，会覆盖元素中原本的内容,可识别HTML标签
v-bind:用于绑定属性（v-bind:title="data中的属性名 + '合法的js语法' "）简写符:
v-on:事件类型='变量名'（v-on:click='show'）简写符@
在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候，vue会默认将浏览器生产的event事件对象作为参数传入到方法
方法定义时，需要event对象，同时需要其他参数，在调用方法时，通过$event对象获取事件对象
{{mes}}显示出来了
{{ mes }}
{{ mes }}
被覆盖了，不会被显示
加载被显示了
事件修饰符
@click.stop=" " : 阻止冒泡
@click.prevent=" " :阻止默认事件
.capture=" " :使用事件捕获机制
@click.self=" " :操作当前元素时，才会触发事件处理函数
@click.once=" " ：只触发一次事件处理函数
.native (监听组件根元素的原生事件)
：当我们需要监听一个组件的原生事件时，必须给对应的事件加上.native修饰符才能进行监听
使用v-model实现表单元素中的数据双向绑定（v-bind只能实现单向数据绑定）
v-model 结合 radio使用： 通过一个变量sex
v-model 结合checkbox类型使用：当是单选框时采用 布尔值，当是多选框时采用数组
男
女
同意协议
篮球
足球
兵乓球
羽毛球
你的爱好是：{{ hobbies }}
v-model 修饰符：
- lazy修饰符 ：v-model默认情况下是data和view层是实时更新的；lazy修饰符可以让数据在失去焦点或者回车时才会更新
-
number修饰符 ：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理，如果希望处理到的是数字类型，可以通过number修饰符将输入框中输入的内容自动转化成数字类型
-
trim修饰符 ：如果输入框的内容首尾有很多空格，通常我们需要将其去除，trim修饰符可以过滤掉左右两边的空格
{{ message }}
使用v-for循环遍历
遍历数组： v-for="(item,index) in Array" item：值 ， index：索引
遍历对象： v-for="(value,key,index) in Object" value：对象中的值，key：对象中的键，index：对象中的索引
迭代数字： v-for="count in 10" ：索引从1开始循环遍历10次 {{ count }}
注意：key属性只能使用number或string类型来代替，在使用时，必须通过v-bind形式绑定
- {{ item.name }}
- {{ value }}---{{ key }}----{{ index }}
{{ count }}
v-if 和 v-show
v-if=" 布尔值 " :每次都会重新创建或删除元素
v-show=" 布尔值 " ：切换了元素的display：none样式
显示或者隐藏
显示或者隐藏
过滤器的使用（filter）
过滤器两个条件：过滤器名称和处理函数（可以有多个过滤器）
Vue.filter('过滤器的名称'，function(原始数据，操作数据--可以有多个){
return 操作结果
})
{{ mes | mesFilter('坏') }}
按键修饰符
Vue中提供了9个按键修饰符如下：
1 .enter
2 .tab
3 .delete (捕获“删除”和“退格”键)
4 .esc
5 .space
6 .up
7 .down
8 .left
9 .right
@keyup.enter=" 方法名 " ：按enter键松开后执行事件处理函数
自定义按键修饰符：Vue.config.keyCode.键盘值= 对应的keyCode值;(Vue.config.keyCode.f2= 113)
就可以使用f2了。。。（以此类推）
自定义指令（directive）
定义指令名称时前面不需要v-前缀，调用时必须在指令名称中加上v-前缀，调用是需要用引号把值包起来
Vue.directive('指令名称'，{函数})
Vue.directive('focus',{
bind:function (el,binding) { //基于样式类型的操作使用bindhans函数
binding.name:拿到自定义指令名称
binding.value:拿到自定义指令的值（计算后的值）
binding.expression:拿到自定义指令的原内容的值
},
inserted:function (el) { //基于js类型的操作使用inserted函数
},
updated:function(el){ //当vNode更新是执行
}
})
使用watch属性，监听data中指定数据的变化
在Vue实例中，watch：{
data属性名：function（新数据newVal , 旧数据oldVal）{ }
}
+
=
可以用来监听路由地址栏的改变
- computed 和 methods 的区别： computed 有缓存，调用多次只会执行一次，而methods无缓存，调用几次执行几次，效率低下
- computed 和 data 的区别 ： computed 实时更新数据，只要数据发生改变就会触发执行computed
使用computed属性用于计算
任何data上的数据发生了变化，就会重新计算这个属性的值
computed：{ data上的属性名或v-model：function(){ return 处理结果 } }
+
=
计算属性原理：
每个计算属性都包含一个getter 和一个 setter 方法，我们只需要使用getter来读取。所以setter可忽略
+
=
使用render属性渲染组件
render:function(createElements){ return createElements(组件对象) }
注意：return 后的结果会替换el指定的容器