v-html元素Html:
可以将带有html,标签的属性翻译为最终的结果,比如
html代码:
<div id="demo"v-html="text">
{{text}}
</div>
js代码:
var demo = new Vue({
el:"#demo",
data:{
text:"<a href='http://www.baidu.com'>百度一下</a>",
},
})
v-once
v-once一次性绑定修饰符,该指令无需取值,让双向绑定变成单线绑定,直接添加到开始标签即可,ps:就是只能绑定一次,下次再更改的话无法更改,比如
html代码:
<div id="demo"v-once>
{{daan}}
</div>
控制台代码:
无法再次更改原本的元素
v-pre
v-pre跳跃编译修饰符,就是讲直接跳过vue的编译,比如
html代码:
<div id="demo" v-pre>
{{daan}}
</div>
页面显示:
就是直接显示没有进行vue编译的状态
ps:这两个不怎么常用,看看就可以了
v-bind
v-bind动态属性:常用于动态绑定HTML元素的属性,
例如id,class,src,href,改变任意一方都会实时改变
html代码:
<div id="demo">
<a v-bind:href="urlValue">百度一下</a>
<img v-bind:src="imgValue">
</div>
js代码:
data:{
urlValue:"http:www.baidu.com",
imgValue:"./img/1.PNG"
},
页面显示:
注意:
文本节点用{{}}文本插值语法,属性节点用v-bind动态属性修饰符。
v-on
v-on事件绑定
html代码
<button v-on:click="show">
{{btn}}
</button>
<div class="a1" v-show="showArea"></div>
js代码:
var demo = new Vue({
el:"#demo",
//绑定数据
data:{
btn:"按钮",
showArea:true
},
methods:{
show:function(){
if(this.showArea){
this.showArea = false
}else{
this.showArea = true
}
}
}
})
这个是点击按钮让div显示消失
methods是用来承接这个事件的方法,需要在这个里面写操作的一些东西
语法糖
语法糖是指在不影响功能的情况下,添加某种方法,实现相同的效果,进而方便开发。
Vue为v-on和v-bind这两个常用的指令,提供了语法糖,也可以说是特定简写
ps:
v-bind:可以直接省略v-bind直接用:即可,
v-on:可以省略v-on用@即可,两者容易记混
html代码:
<img :src="imgValue">
<button @click="show">
{{btn}}
</button>
这样写即可,会变得比较方便