Vue学习资料

1、
{{ msg }}插值表达式。
v-text：将数据插入到页面中，没有闪烁问题。
v-cloak：通过style属性选择器的方式display：none；防止闪烁问题。
v-html：将标签解析插入到页面中。
v-bind：绑定属性的指令。可以简写为：。
v-on：绑定事件的指令可以缩写为@。
substring
.self 只当事件在该元素本身触发时触发回调。
.capture 采用事件捕获机制。
.prevent 阻止默认事件。
.once事件只触发一次。
.stop阻止事件冒泡。
v-model实现数据双向绑定。实现表单元素和MOdel中数据的双向绑定；v-model只能用在表单元素当中。
v-bind:属性名称；属性绑定。可简写为:属性名。只能实现数据的单向绑定，从M自动绑定到V无法实现数据的双向绑定。
class绑定:class="['red', 'italic']"
class="['red', flag?'italic':'']"三元表达式。
class="['red', {'italic':flag}]"使用对象表达式，提高可读性。
class="{red:true, italic:true}"直接使用对象。
v-for：循环数组，对象，数组对象，还可以循环数字。
v-if:的特点，每次都会重新删除或创建元素。
v-show:的特点，每次不会重新进行DOM的删除和创建，只是切换display：none的样式。
2、
过滤器只能用在插值表达式和v-bind中
定义全局的过滤器：
{{ msg | format }}
Vue.filter('format', function(msg){
return msg.replace(/3/g, '*');
});
自定义指令：使用Vue.directive()定义全局的指令，其中参数1指令的名称，注意：在定义的时候，指令的名称前面，不需要加v-前缀。
es6中新方法补位：padStart(m,n)m代表补位后是几位数字，n代表用什么去补。padEnd在末尾补。
使用Vue.directive（）；第一个参数是指令名称，定义指令名称前不需要加v-，调用时必须加v-。参数2是一个对象。有一些指令相关的函数，这些函数可以在特定的时段调用。
Vue.directive("focus", {
//注意在每个函数的第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数，是一个原生的JS对象
//在元素刚绑定指令的时候还没有插入到DOM中去，这个时候，调用focus方法没有作用。
//因为一个元素只有插入到DOM之后才能获取焦点。
bind:function(){},//每当指令绑定到元素上面的时候，会立即执行这个bind函数，只执行一次
inserted:function(){},//表示元素插入到Dom中的时候，会执行inserted函数。
updated:function(){}//当VNode更新的时候就会执行updated，可能会触发多次。
})
定义私有指令简写：
directives:{
"color":function(el,binding){
el.style.color = binding.value
}
}

①注意在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有初始化。
②在created中，data和methods都已经被初始化好了。因此如果要操作data和methods中的数据最早只能在created中操作。
③beforeMount(){}这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中，在beforeMount执行的时候，页面中的元素还没有
真正替换过来，只是之前写的一些模板字符串。
④mounted（）{}这是遇到的第四个生命周期函数，表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。mounted是实例期间的最后一个生命周 期函数，当执行完mounted就表示，实例已经被完全创建好了，此时如果没有其他操作的话，这个实例就静静的躺在内存中一动不动。
⑤beforeUpdate（）{}这时候表示我们的界面还没有被更新，data中的数据已经更新了，当执行beforeUpdate的时候，页面中的显示数据还是以前的，此时data中的数据是最新 的，页面尚未和最新的数据保持同步。
⑥updated（）{}事件执行的时候，页面和data数据已经保持同步，都是最新的。
⑦当执行beforeDestroy钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段；当执行beforeDestroy的时候，实例身上的所有data和所有methods，以及过滤器，指 令...都处于可用状态，此时还没有执行销毁的过程。
⑧当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中的所有的数据，方法，指令，过滤器已经不可用。