指令理解为dom标签的属性。通过该指令可以获取或者调用vue中的成员。
1 v-text 和v-html
设置标签的文本值(textContent)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用插值表达式 -->
<span>{{msg}}</span>
<hr>
<!-- 使用v-text指令:标签的属性。获取和调用vue中成员.document.getElementById().innerHtml="今天" -->
<span v-text="msg" >你好</span>
<!-- v-html指令: 和上面v-text指令作用一样的。只是该指令可以解析内容中的html标签 -->
<hr>
<span v-html="msg"></span>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"<font color='red'>今天星期二</font>"
}
})
</script>
</html>
2 v-on基础
为元素绑定事件. 当触发事件后会调用Vue对象中的方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
{{age}}
<hr>
<!-- <button v-on:click="vue对象中的方法"></button>
<button onclick="js中的方法"></button> -->
<button v-on:click="jian()">--</button>
<!-- v-on:可以简写为@ -->
<button @click="jia()">++</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
msg:"<font color='red'>今天星期二</font>",
age:15
},
methods:{//定义vue的方法。
jian(){
// age--; //表示方法中声明了一个变量
this.age--;//this表示当前Vue对象.
},
jia(){
this.age++; //如果在方法中想调用Vue对象中的成员。则需要使用this。
}
}
})
</script>
</html>
3 v-show和v-if
根据表达值的真假,切换元素的显示和隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-show:如果表达式条件满足则显示该标签 -->
<img src="images/hk.jpg" height="60" v-show="age>18"/>
<hr>
<!-- v-if: 如果条件表达式成立，该标签显示.
v-if通过增加和删除标签来表达显示和隐藏
v-show通过增加style样式完成标签的显示和隐藏
-->
<img src="images/hk.jpg" height="60" v-if="age>18" />
<button @click="add">增加年龄</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
age:15
},
methods:{//定义vue的方法。
add(){
this.age++;
}
}
})
</script>
</html>
4 v-bind
设置元素的属性 .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
<style>
.myimg{
border: 10px red solid;
}
.my02{
border: 10px green dashed;
}
</style>
</head>
<body>
<div id="app">
<!--v-bind:绑定属性的值 -->
<img v-bind:class="age>18?'myimg':'my02'" src="images/hk.jpg" height="60"/>
<hr>
<!-- v-bind:缩写为:-->
<img :class="age>18?'myimg':'my02'" src="images/hk.jpg" height="60"/>
<hr>
<img :src="imgs" :width="w"/>
<hr>
<button @click="add">增加年龄</button>
<button @click="ht()">换图</button>
<button @click="fd()">放大</button>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
age:15,
imgs:"images/12.jpg",
w: 100,
},
methods:{//定义vue的方法。
add(){
this.age++;
},
ht(){
this.imgs="images/hk.jpg"
},
fd(){
this.w+=10;
}
}
})
</script>
</html>
5 v-for
根据数据生成列表结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
<style>
.myimg{
border: 10px red solid;
}
.my02{
border: 10px green dashed;
}
</style>
</head>
<body>
<div id="app">
<ul>
<!--
for(数据类型 变量名:集合名)
-->
<li v-for="(b,index) in books">
{{b.id}} {{b.name}} {{b.author}} <button @click="del(index)">删除</button>
</li>
</ul>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
books:[
{id:1,name:"西游记",author:"吴承恩"},
{id:2,name:"红楼梦",author:"曹雪芹"},
{id:3,name:"水浒传",author:"施耐庵"},
{id:4,name:"三国演义",author:"罗贯中"},
]
},
methods:{//定义vue的方法。
del(index){
//js数组中是否存在根据下标删除元素的方法
this.books.splice(index,1);
}
}
})
</script>
</html>
6 v-model
获取和设置表单元素的值 而且v-model属于双向绑定。
在表达中能放在的标签都是表单元素。比如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
<style>
.myimg{
border: 10px red solid;
}
.my02{
border: 10px green dashed;
}
</style>
</head>
<body>
<div id="app">
{{name}}<hr>
<input v-model="name"/>
<!-- 表示哪个键谈起触发该事件-->
<input type="button" @click="show()" value="点击"/>
</div>
</body>
<script>
let app=new Vue({
el:"#app",
data:{
name:"刘德华" , // 用于获取表单元素的值比较方便
},
methods:{//定义vue的方法。
show(){
this.name="张学友"
}
}
})
</script>
</html>