文章目录
一、v-cloak v-text v-html的使用
1. v-cloak
使用v-cloak能够解决插值表达式闪烁的问题。
例如,当不使用v-cloak时,如果网速过慢,加载过程中就会显示{{msg}}。
<div id="app">
<p>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'welcome to learn vue'
}
})
</script>
使用v-cloak后,如果网速过慢,在加载过程中,插值表达式位置会显示空白。
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'welcome to learn vue'
}
})
</script>
2. v-text
默认v-text没有闪烁问题,但是会覆盖元素中原本的内容。
例如,h4标记中的内容,在页面加载完成后,会被msg中的内容覆盖掉。
<div id="app">
<h4 v-text="msg">文本文本</h4>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'welcome to learn vue'
}
})
</script>
3. v-html
v-html将字符串绘制成网页元素。
v-html会识别字符串中的元素标记,而当我们不使用v-html时,字符串会被原封不动地绘制出来。
<div id="app">
<div v-html="msg"></div>
<div>{{msg}}</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'<h1>I am powerful!</h1>'
}
})
</script>
二、v-bind指令
v-bind是vue中用于绑定属性的指令,里面可以写合法的js表达式。并且,v-bind:指令可以简写为:。
<div id="app">
<input type="button" value="按钮1" v-bind:title="myButton"/>
<input type="button" value="按钮2" :title="myButton"/>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
myButton:'这是一个自己定义的按钮'
}
})
</script>
三、使用v-on指令定义vue中的事件
v-on:事件绑定机制,缩写是@。
<div id="app">
<input type="button" value="按钮" v-on:click="show"/>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'welcome to learn vue'
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
show:function(){
alert('Hello');
}
}
})
</script>
可以使用v-on实现跑马灯效果,点击两个按钮时触发不同的函数。
<div id="app">
<input type="button" value="按钮" v-on:click="show"/>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'猥琐发育,别浪~~'
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
lang(){
if(this.intervalId!=null)
return;
this.intervalId=setInterval(()=>{
//获取第一个字符
var start=this.msg.substring(0,1);
//获取到除第一个字符外的所有字符
var end=this.msg.substring(1);
//拼接得到新的字符串
this.msg=end+start;
},200)
},
stop(){
clearInterval(this.intervalId);
this.intervalId=null;
}
}
})
</script>
四、事件修饰符
1. .stop阻止冒泡
例如,当点击按钮时,会先触发按钮的事件,然后触发包裹按钮的div的事件,就像冒泡一样,泡泡越来越大。
<div id="app">
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click="btnHandler" />
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
divHandler(){
console.log('这是触发了inner div的点击事件');
},
btnHandler(){
console.log('这是触发了btn按钮的点击事件');
}
}
})
</script>
而使用.stop后,就能避免冒泡了。
<div id="app">
<div class="inner" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler" />
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
divHandler(){
console.log('这是触发了inner div的点击事件');
},
btnHandler(){
console.log('这是触发了btn按钮的点击事件');
}
}
})
</script>
2. .prevent阻止默认行为
点击a标记后,本应该跳转链接所在页面,但是使用.prevent后就能阻止页跳转。
<div id="app">
<a href="http://www.baidu.com" @click.prevent="linkClick">打开百度</a>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
linkClick(){
console.log('这是触发了链接的点击事件');
}
}
})
</script>
3. .capture实现捕获触发事件的机制
与冒泡相反,使用了.capture的元素,会从外到里执行点击事件,然后触发外部包裹它的元素的点击事件。
<div id="app">
<div @click="outerDivHandler">
<div class="inner" @click.capture="divHandler">
<input type="button" value="戳他" @click="btnHandler" />
</div>
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
divHandler(){
console.log('这是触发了inner div的点击事件');
},
btnHandler(){
console.log('这是触发了btn按钮的点击事件');
},
outDivHandler(){
console.log('这是触发了outer div的点击事件');
}
}
})
</script>
4. .self实现只有点击当前元素的时候,才会触发事件处理函数
例如,给div使用.self后,只有点击div时才会触发其点击事件,而点击div中的按钮时,并不会触发div的点击事件。
<div id="app">
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler" />
</div>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
divHandler(){
console.log('这是触发了inner div的点击事件');
},
btnHandler(){
console.log('这是触发了btn按钮的点击事件');
}
}
})
</script>
4. .once只触发一次事件处理函数
使用.once后,无论点击多少次,只会触发一次点击事件,并且还能和.prevent一起使用。
<div id="app">
<a href="http://www.baidu.com" @click.prevent.once="linkClick">打开百度</a>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
},
methods:{ //这个method属性中定义了当前vue实例所有可用的方法
linkClick(){
console.log('这是触发了连接的点击事件');
}
}
})
</script>
五、Vue指令之v-model和双向数据绑定
使用v-model指令,可以实现表单元素和Model中数据的双向数据绑定。
**注意:**v-model只能运用在表单元素中。
<div id="app">
<h4>{{ message }}</h4>
<input type="texx" v-model:value='message'>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '大家好'
},
methods:{
}
});
</script>
六、简易计算器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue计算器</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<body>
<div id="app">
<input type="texx" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result" readonly>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1:0,
n2:0,
result:0,
opt:'+'
},
methods:{
calc(){ //计算函数
switch(this.opt){
case '+':
this.result=parseInt(this.n1)+parseInt(this.n2)
break;
case '-':
this.result=parseInt(this.n1)-parseInt(this.n2)
break;
case '*':
this.result=parseInt(this.n1)*parseInt(this.n2)
break;
case '/':
this.result=parseInt(this.n1)/parseInt(this.n2)
break;
}
}
}
});
</script>
</body>
</html>