一、v-cloak
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码,使用v-cloak能够解决插件表达式的闪烁问题。
二、v-text
- 默认v-text是没有闪烁问题的
-
v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的占位符,不会把整个元素的内容清空
三、v-html
- v-html不仅可以渲染数据,而且可以解析标签。
- 如果要输出真正的 HTML,需要使用v-html指令,v-text仅渲染标签,不能解析 HTML 代码。
四、v-bind
- vue中提供的用于绑定属性的指令,当作Js表达式解析执行
-
v-bind可以被简写为 :要绑定的属性
-
v-bind中可以写合法的js表达式
五、v-on: vue中提供了v-on事件绑定机制 ,缩写是@
在Vue中使用事件绑定机制为元素处理函数的时候,如果添加了小括号,就可以给函数传参了
<div id="app">
<!-- 使用v-cloak能够解决插件表达式的闪烁问题 -->
<p v-cloak>{{msg}}</p>
<h1 v-text="msg"></h1>
<!-- 默认v-text是没有闪烁问题的· -->
<!-- v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的占位符,不会把整个元素的内容清空 -->
<div v-html="msg2"></div>
<!-- v-bind是vue中提供的用于绑定属性的指令,当作Js表达式解析执行 -->
<!-- v-bind可以被简写为:要绑定的属性 -->
<!-- v-bind中可以写合法的js表达式 -->
<input type="button" value="按钮" v-bind:title="mytitle+'123'">
<input type="button" value="按钮" :title="mytitle+'123'">
<!-- vue中提供了v-on事件绑定机制 -->
<input type="button" value="按钮" @click="show">
</div>
var vm=new Vue({
el:'#app',
data:{
msg:'123',
msg2:'<h1>哈哈哈哈哈哈哈哈</h1>',
mytitle:'自己定义'
},
methods:{//这个methods中定义了当前vue实例所有可用的方法
show:function(){
alert('msg');
}
}
})
注意在vm实例中,如果想要获取data上的数据,或者想要调用methods中的方法,必须通过this.数据属性名或this.方法名来进行访问,这里的this,就表示我们new出来的vue实例对象。
简单的跑马灯案例:
<div id="app">
<input type="button" value="浪起来" @click="lang">
<input type="button" value="低调" @click="stop">
<h1>{{msg}}</h1>
</div>
var vm=new Vue({
el:'#app',
data:{
msg:'猥琐发育,别浪',
intervalId:null
},
methods:{
lang(){
if(this.intervalId!=null)
{
return;
}
this.intervalId=setInterval(()=>{
console.log(this.msg);
//获取头的一个字符
var start=this.msg.substring(0,1);
//获取所有得到的字符串,并复制给this.msg
var end=this.msg.substring(1);
this.msg=end+start;
},400)
},
stop(){
clearInterval(this.intervalId);
//每当清除要重新把定时器设置为Null
this.intervalId=null;
}
//vm实例会监听自己身上data中所有数据的改变,只要数据一发生变化,就会自动把
//最新的数据从data上同步到页面中去,好处:程序员只需要关心数据,而不需要考虑如何渲染dom页面
}
})
//1.给浪起来按钮绑定一个点击事件
//2.在按钮的事件处理函数中,写相关的业务逻辑代码,拿到msg字符串,然后调用字符串的substring来进行字符串的截取操作
//把第一个字符截取出来,放到最后一个位置即可
//3.为了实现点击下按钮,自动截取的功能,需要把2步骤中的代码放到一个定时器中来截取
六、事件修饰符
默认情况:不使用事件修饰符,button时触发事件,则会有冒泡机制,先执行button的绑定事件,再执行外层div的绑定事件。
<div class="inner" @click="div1handler">
<input type="button" value="戳他" @click="btnhandler">
</div>
btnhandler(){
console.log('这是触发了btn的点击事件');
},
div1handler(){
console.log('这是触发了Inner div的点击事件');
},
stop:阻止冒泡,只会执行btn绑定的事件,不会再冒泡执行上级的事件了
<div class="inner" @click="div1handler">
<input type="button" value="戳他" @click.stop="btnhandler">
</div>
prevent:使用prevent阻止默认行为
eg:阻止a链接跳转
<a href="http://www.baidu.com" @click.prevent="linkclick">百度</a>
capture:实现捕获触发事件的机制,capture先执行父级的函数,再执行子级的触发函数(一般用法),即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素。若有多个该修饰符,则由外而内触发。
<div class="inner" @click.capture="div1handler">
<input type="button" value="戳他" @click="btnhandler">
</div>
此时控制台输出情况:
self:使用self实现只有点击当前元素时候,才会触发事件处理函数
点击button只会执行btnhandler函数,不会再执行div1handler,只有点击div时才执行div1handler
<div class="inner" @click.self="div1handler">
<input type="button" value="戳他" @click="btnhandler">
</div>
once: 使用.once只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkclick">百度</a>
stop与self区别:
self只会阻止自己身上冒泡行为的触发,并不会阻止真正的冒泡行为
<div class="outer" @click="div2Handler">
<div class="inner" @click.self="div1handler">
<input type="button" value="戳他" @click="btnhandler">
</div>
</div>
控制台输出:self只阻止了div1自己身上的冒泡行为,而不会组织button冒泡到最外层div的输出
stop:阻止了冒泡行为
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1handler">
<input type="button" value="戳他" @click.stop="btnhandler">
</div>
</div>
此时点击button只会输出这一个语句 ,因为它阻止了冒泡行为
七、v-model
- 使用v-model指令,可以实现表单元素和model中数据的双向绑定
-
注意v-model只能运用在表单元素中:input,select,checkbox,textarea等等
-
v-bind只能实现数据单向绑定,从M自动绑定到V中去,无法实现数据的双向绑定
<input type="text" style="width:200px;" v-model="msg">
八、vue中使用class样式
<div id="app">
<!-- 第一种使用方式,直接传递一个数据,注意,这里的class需要使用v-bind进行数据绑定 -->
<h1 :class="['thin','red']">这是一个大标题</h1>
<!-- 在数组中使用三元表达式 -->
<h1 :class="['thin','red',flag ? 'active' :'']">这是一个大标题</h1>
<!-- 在数组中使用对象来代替三元表达式,提高代码可读性 -->
<h1 :class="['thin','red',{'active':flag}]">这是一个大标题</h1>
<!-- 在为class使用v-bind绑定对象的时候,对象的属性是类名,可以带引号也可能不带,所以这里没写,属性的值是一个标识符 -->
<h1 :class="{red:true,thin:true,italic:false,active:false}">这是一个大标题</h1>
<h1 :class="classObj">这是一个大标题</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:true,
classObj:{red:true,thin:true,italic:false,active:false}
},
methods:{
}
})
</script>
九、vue中使用内联样式style
用法1:在 v-bind:style 直接设置样式
用法2:直接绑定到一个样式对象
用法3:v-bind:style 可以使用数组将多个样式对象应用到一个元素上
<div id="app">
<!-- 对象是无序键值对的集合 -->
<!-- 如果属性里面有—,则必须加上单引号 -->
<h1 :style="{color:'red','font-weight':200}">张子枫</h1>
<h1 :style="styleObj1">这是一个大标题</h1>
<h1 :style="[styleObj1,styleObj2]">这是一个大标题</h1>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
styleObj1:{color:'red','font-weight':200},
styleObj2:{'font-style':'italic'}
},
methods:{
}
})
</script>
十、v-for指令
用法1:v-for循环普通数组
<div id="app">
<p v-for="(item,i) in list">索引值:{{i}} 每一项:{{item}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
list:[1,2,3,4,5]
},
methods:{}
});
显示:
用法2:v-for循环对象
在遍历对象身上的键值对的时候,除了有val,key在第三个位置还有一个索引
<div id="app">
<!-- 注意,在遍历对象身上的键值对的时候,除了有val,key在第三个位置还有一个索引, -->
<p v-for="(val,key,i) in user">键{{val}}-----值{{key}}----索引{{i}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
user:{
id:1,
name:'李易峰',
gender:'男'
}
},
methods:{}
});
用法3:v-for循坏对象数组
<div id="app">
<p v-for="(user,i) in list">{{user.id}} ---名字 {{user.name}}---索引{{i}}</p>
</div>
var vm=new Vue({
el:'#app',
data:{
list:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'},
]
},
methods:{}
});
用法4:v-for迭代数字
in后面放普通数组,对象数组,还可以放数字, 注意如果使用v-for迭代数字,前面count值从1开始的
<p v-for="count in 10">这是第{{count}}次循坏</p>
注意:v-for属性中key属性的使用
- v-for循坏的时候,key属性只能使用number或string
-
注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定Key的值
-
在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串,数字类型
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- 注意v-for循坏的时候,key属性只能使用number或string -->
<!-- 注意:key在使用的时候,必须使用v-bind属性绑定的形式,指定Key的值 -->
<!-- 在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串,数字类型 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox" >
{{item.id}}-----{{item.name}}
</p>
</div>
data:{
id:'',
name:'',
list:[
{id:1,name:'张飞'},
{id:2,name:'貂蝉'},
{id:3,name:'吕布'},
{id:4,name:'王昭君'},
{id:5,name:'韩信'}
]
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name});
}
}
});
十一、v-if和v-show指令
比较:
- v-if的特点是每次都会重新删除或创建元素
- v-show的特点,每次不会进行dom的删除和创建操作,只是切换了元素的display:none元素
- v-if有较高的切换性能消耗,v-show有较高的初始渲染消耗
-
如果元素涉及到频繁的切换,最好不要使用v-if,而是使用v-show
-
如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if
<!-- <input type="button" @click="toggle" value="toggle"> -->
<h3 v-if="flag">这是v-if元素</h3>
<h3 v-show="flag">这是v-show的元素</h3>
<input type="button" @click="flag=!flag" value="toggle">
var vm=new Vue({
el:'#app',
data:{
flag:true,
},
methods:{
// toggle(){
// this.flag=!this.flag;
// }
}
});
十二、过滤器
过滤器调用格式,{{name|nameope}}
举例:
<div id="app">
<p>{{msg|msgFormat}}</p>
</div>
Vue.filter('msgFormat',function(msg){
return msg.replace('00000','11111');
});
var vm=new Vue({
el:"#app",
data:{
msg:'00000'
},
methods:{
}
});
过滤器可以串联:
{{ message | filterA | filterB }}
在这个例子中,filterA
被定义为接收单个参数的过滤器函数,表达式 message
的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB
,将 filterA
的结果传递到 filterB
中。
过滤器是 JavaScript 函数,因此可以接收参数:
{{ message | filterA('arg1', arg2) }}
这里,filterA
被定义为接收三个参数的过滤器函数。其中 message
的值作为第一个参数,普通字符串 'arg1'
作为第二个参数,表达式 arg2
的值作为第三个参数。
举例:
<div id="app">
<p>{{msg|msgFormat('加油油','123')|test}}</p>
</div>
//定义一个Vue全局过滤器,名字叫msgFormat
Vue.filter('msgFormat',function(msg,arg1,arg2){
//字符串的replace方法,第一个参数,除了可写第一个字符串之外,还可以定义一个正则
// return msg.replace('加油','加油油');
return msg.replace(/加油/g,arg1+arg2);
})
Vue.filter('test',function(msg){
return msg+'=====';
})
var vm=new Vue({
el:'#app',
data:{
msg:'一定要加油,考上研究生,顺利毕业,加油加油加油'
},
methods:{}
});
全局过滤器:所有的vm实例都能共享
问题:如何定义一个私有的过滤器
-
定义私有过滤器,过滤器有两个条件,【过滤器名称和处理函数】
-
过滤器调用的时候采用的是就近原则,如果私有和全局过滤器名称一致,这时候优先调用私有过滤器
举例:
<div id="app2">
<p>{{dt|dateFormt}}</p>
</div>
var vm2=new Vue({
el:"#app2",
data:{
dt:new Date()
},
methods:{
},
filters:{//定义私有过滤器,过滤器有两个条件,【过滤器名称和处理函数】
//过滤器调用的时候采用的是就近原则,如果私有和全局过滤器名称一致,这时候优先调用私有过滤器
dateFormt:function(dateStr,pattern=''){
var dt=new Date(dateStr);
//根据给定的字符串得到特定的时间
//yyyy-mm-dd
var y=dt.getFullYear();
var m=dt.getMonth().toString().padStart(2,'0');
var d=dt.getDate().toString().padStart(2,'0');
// return y+'-'+m+'-'+d;
//私有
if(pattern.toLowerCase()==='yyyy-mm-dd')
return `${y}-${m}-${d}`;
else{
//padStart第一个参数表示填充完位数,第二个参数表示用什么填充
//padStart()用于头部补全,padEnd()用于尾部补全。
var hh=dt.getHours().toString().padStart(2,'0');
var mm=dt.getMinutes().toString().padStart(2,'0');
var ss=dt.getSeconds().toString().padStart(2,'0');
return `${y}-${m}-${d}-${hh}:${mm}:${ss}`;
}
}
}
})
十三、自定义键盘修饰符
通过Vue.config.keyCodes.名称 = 按键值
来自定义案件修饰符的别名:
Vue.config.keyCodes.f2 = 113;
使用自定义的按键修饰符
<input type="text" v-model="name" @keyup.f2="add">
十四、自定义全局指令
- vue中所有的指令,在调用的时候,都v-开头
- 自定义指令:使用Vue.directive(id,definition)注册全局自定义指令,使用组件的directives选项注册局部自定义指令。
参数1:指令的名称,在定义的时候指令的名称前面不需要加v-前缀,但是在调用的时候必须在指令名称前加v-前缀来进行调用
参数2:是一个对象,这个对象身上有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
- 钩子函数:
指令定义函数提供了几个钩子函数(可选):
- bind:每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
- inserted:inserted表示元素插入到DOM中的时候,会执行inserted函数,触发一次(和js行为有关的操作,最好在inserted中去执行,防止这个js行为不生效)
- updated:当VNode更新的时候,会执行updated,可能会触发多次
- componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
- unbind:只调用一次, 指令与元素解绑时调用。
注意:在每个函数中,第一个参数永远是el,表示被绑定指令的那个元素,这个el参数,是一个原生的js对象
自定义一个focus指令
Vue.directive('focus',{
bind:function(el){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次
//注意,在每个函数中,第一个参数永远是el,表示被绑定指令的那个元素,这个el参数,是一个原生的js对象
//在元素刚绑定了指令的时候,还没有插入到DOM中去,这时候调用focus方法,没有作用
//因为一个元素只有插入DOM之后,才能获取焦点
//el.focus();
},
inserted:function(el){//inserted表示元素插入到DOM中的时候,会执行inserted函数,触发一次
el.focus();
//和js行为有关的操作,最好在inserted中去执行,防止这个js行为不生效
},
updated:function(el){}//当VNode更新的时候,会执行updated,可能会触发多次
})
自定义一个设置字体颜色的指令
//自定义一个设置字体颜色的指令
Vue.directive('color',{
bind:function(el,binding){
//样式,只要通过指令绑定了元素,不管这个元素有没有插入到页面中去,这个元素肯定有了一个内联的样式
//将来元素肯定会显示到页面中去,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素
el.style.color=binding.value;
//和样式相关的操作,一般都可以在Bind中执行
// console.log(binding.value);
// console.log(binding.expression);
},
inserted:function(){
}
})
钩子函数参数
函数简写:想在 bind
和 update
时触发相同行为,而不关心其它的钩子。比如这样写:
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})