Vue.js 常用指令(适合初学者)

Vue.js  常用指令(适合初学者)

Vue指令是以(v-)开头的，作用在HTML上将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的HTML属性（attribute）。

下面将介绍Vue中常用的几个内置指令。当然，Vue除了内置指令，也可以根据需求自定义指令。
一：先说一下绑定数据的三种方法：

v-html
v-text
{{}}

v-html：能识别HTML标签

<div id="box">
<h2 v-html="msg1"></h2>
<h2 v-html="msg2"></h2>
</div>
<script>
new Vue({
el:"#box",
data:{
msg1:我是span1标签,
msg2:<span>我是span2标签</span>
}
})
</script>

运行截图：



     2.v-text:不能识别HTML标签<div id="box">
<h2 v-text="msg1"></h2>
<h2 v-text="msg2"></h2>
</div>
<script>
new Vue({
el:"#box",
data:{
msg1:我是span1标签,
msg2:<span>我是span2标签</span>
}
})
</script>运行截图：



    3.{{}}模板语法：不能识别HTML标签<div id="box">
<h2>{{msg1}}</h2>
<h2>{{msg2}}</h2>
</div>
<script>
new Vue({
el:"#box",
data:{
msg1:我是span1标签,
msg2:<span>我是span2标签</span>
}
})
</script>运行截图：



二： v-model    双向绑定<div id="box">
<input v-model="msg" type="text">
<h2>-->{{msg}}<--</h2>
</div>
<script>
new Vue({
el:"#box",
data:{
msg:""
}
})
</script>运行截图：



三：V-bind    绑定属性       简写 形式 " : "<div id="app">
<h2 v-bind:title="msg">{{msg}}</h2>
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data(){
return {
msg:"Hello Vue!"
}
}
})
</script>运行截图：



四：v-on     绑定事件   简写形式  “ @ ”<div id="box">
<h1 v-on:click="run">{{msg}}</h1>
//<h1 @click="run"></h1>
</div>
<script>
new Vue({
el:"#box",
data:{
msg:"Hello Vue(点击我)"
},
methods:{
run:function () {
alert(1)
}
}
// mounted(){
// this.run();
// }

})
</script>运行截图：



五： 判断语句

v-if:如果条件成立就会渲染这个元素，条件不成立就不会渲染这个元素(不渲染的时候DOM里面不会出现这个元素)
v-show:元素始终会被渲染并保留在DOM中，v-show只是简单的切换元素中的属性display,如果条件不成立就会自动隐藏display;none;

<div id="app">
<h1 v-if="this.num>10">num大于10我就出现</h1>
<h1 v-else-if="this.num<10">num小于10我就出现</h1>
<h1 v-else>你上边两条都不好使</h1>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
num:11
}

}
})
</script>

运行截图：



<div id="app">
<h1 v-show="num<10">num小于10我就出现</h1>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
num:9
}
}
})
</script>运行截图：



六：v-for  循环语句<div id="app">
<p v-for="a in this.msg">{{a.name}}----{{a.sex}}-----{{a.age}} </p>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
msg:[
{
name:"小花",
sex:"女",
age:"18"
},
{
name:"小明",
sex:"男",
age:"20"
}
]
}
}
})
</script>运行截图：



最后下面就是自定义指令了：<div id="app">
<h1 v-aa="blue">我是cloak指令</h1>
<h2 v-color="qqq"></h2>
</div>
<script>
Vue.directive("aa",function(el,a){
el.style.color="#f00";//给自定义的指令加颜色
console.log(a);
el.style.color=a.expression;//从 a里面的expression改变他的颜色
});
Vue.directive("color",fun
4000
ction(el,a){
el.style.color="#f00";
el.innerHTML=a.value;
console.log(a)
});
new Vue({
el:"#app",
data(){
return{
qqq:'<h2>哈哈哈哈哈</h2>',
bbb:"<h3>嘿嘿嘿嘿嘿</h3>",
}
}
})
</script>