Vue学习资料

时间:2022-07-13 19:54:24

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函数的时候,组件已经被完全销毁了,此时组件中的所有的数据,方法,指令,过滤器已经不可用。