指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式. 指令名称 指令作用 备注 v-html 显示与解析HTML代码 v-text 原封不动的展示 v-for 遍历与循环功能 遍历数字，字符串,对象,数组 v-bind 绑定属性 简单形式 :属性名="值" v-model 双向绑定 只支持input,select,textarea v-show 显示与隐藏 隐藏只是样式:style="display=none" v-if 判断 v-if/v-else-if/v-else v-on 绑定事件 简写 @事件名=方法名() v-html与v-text html会解析HTML标签(相当:innerHTML) text不会解析HTML标签(相当:innerText) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app"> <span id="myspan">{{msg}}</span> <!-- 使用指令写法来设置数据 注:指令中获取数据，不需要写表达式{{}} --> <span v-html="msg"></span> <span v-text="msg"></span></div> <!-- 指令:vue设计的一种特殊的标签，v-指令名称 --><script>
//原生的js代表为这个myspan加数据
/**
* innerText:会把加上的内容原样输出(不会当作html标签进行识别与编译)
* innerHTML：会去识别与编译咱们的html标签
*/
/*
document.getElementById("myspan").innerHTML = "喔为...";
document.getElementById("myspan2").innerText = "喔为...";
*/
new Vue({
el:"#app",
data:{
msg:"喔为..."
}
})
</script> </body></html>
v-for 遍历咱们的数据(数字,字符串,对象,集合) 数字就是普通的循环 for(var i=1;i<=数字;i++) 字符串是拿到每一个字母 对象循环 <span v-for="(v,k,i) in 对象"></span> ov:代表对象的属性值 ok:代表对象的属性名 oi:代表索引 数组循环 <span v-for="(v,i) in 数组"></span> ov:代表对象的属性值 oi:代表索引 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app">
<!--遍历数字 for(var i=1;i<=5;i++)-->
<ul>
<li v-for="v in num">{{v}}</li>
</ul>
<!--遍历字符串:拿到字符串中的每一个值-->
<ul>
<li v-for="v in name">{{v}}</li>
</ul>
<!--
遍历对象
(v) 如果只写一个值,只获取value的值
(v,k) v:是value的值，k:是key(属性)
(v,k,i) v:是value的值，k:是key(属性) ,i：索引
-->
<ul>
<li v-for="(v,k,i) in smalltxt">{{k}} - {{v}} -{{i}}</li>
</ul>
<!--遍历数组
(v,i) ： v:当前的数据值 i:当前遍历索引
-->
<ul>
<li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
</ul></div>
<script>
/**
* v-for:进行相应的循环(数字,字符串,对象,数组)
*/
new Vue({
el:"#app",
data:{
num:5,
name:"zhang",
smalltxt:{
name:"斗罗大罗",
author:"杨哥",
sn:"34325Nfe"
},
hobbys:["吃饭","睡觉","打豆豆","垃圾"]
}
})
</script> </body></html>
v-bind的使用 bind主要是用于绑定相应的属性 <标签 v-bind:属性名="属性值"> bind有一种简写形式 <标签 :属性名="属性值"> 如果直接把整个对象进行属性绑定 <标签 v-bind="对象"> <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app">
<!--
标准写法-> v-bind:属性名
v-bind:src -> 绑定相应的属性(里面的值可以从data中获取)
简写形式-> :属性名
多个属性绑定
v-bind="对象"
-->
<img v-bind:src="imgUrl" v-bind:height="height" />
<img :src="imgUrl" :height="height" />
<img v-bind="img" />
</div> <script>
/**
*/
new Vue({
el:"#app",
data:{
imgUrl:"imgs/1.jpg",
height:120,
//这个对象中有多个属性
img:{
src:"imgs/1.jpg",
height:240,
mei:"haha"
}
}
})
</script> </body></html>
v-model 主要是用于完成双向的绑定 只能用于:input,select,textarea <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app">
名称:<input type="text" v-model="inputVal"> <br>
{{inputVal}}
<hr>
爱好:
<input v-model="checkboxVal" value="1" type="checkbox">看电影
<input v-model="checkboxVal" value="2" type="checkbox">看小说
<input v-model="checkboxVal" value="3" type="checkbox">看漫画
<input v-model="checkboxVal" value="4" type="checkbox">垃圾
<br>
{{checkboxVal}}
<hr>
性别:
<input v-model="radioVal" value="1" type="radio">男
<input v-model="radioVal" value="2" type="radio">女
<input v-model="radioVal" value="3" type="radio">叨客
<br>
{{radioVal}}
<hr>
<select v-model="selectVal">
<option value="1">中国</option>
<option value="2">日本</option>
<option value="3">美国</option>
</select>
<br>
{{selectVal}}
<hr>
<textarea v-model="textareaVal"></textarea>
<br>
{{textareaVal}}</div>
<script>
/**
* v-model:只能在表单标签中使用(input,select,textarea)
*/
new Vue({
el: "#app",
data: {
inputVal:"我是杨杨我怕谁!",
checkboxVal:["1","3"],
radioVal:2,
selectVal:2,
textareaVal:"sdfsfd"
}
})
</script> </body></html>
v-show&v-if v-show用于展示和隐藏 <标签 v-show="true/false"> v-if <标签 v-if="条件">... show只是隐藏标签,if直接就不会出现不满足条件的标签 v-show的案例代表 最后的效果是有一个按钮，点一下显示图片，再点一下隐藏图片 <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app">
<button onclick="showyishow()" >点我啊</button> <br />
<!--
v-show:true(显示)/fales(不显示)
注:不显示（style="display: none;"）
-->
<img src="imgs/1.jpg" v-show="isShow" />
</div> <script>
/**
* v-model:只能在表单标签中使用(input,select,textarea)
*/
var vue = new Vue({
el: "#app",
data: {
isShow:false
}
})
function showyishow() {
vue.isShow = !vue.isShow;
}
</script> </body></html> v-if的案例 <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app">
<!--
if：如果未满足条件，页面就直接 没有这元素
show:元素存在，只在隐藏起来了
-->
<div v-if="age<18">
未成年人禁止入内
</div>
<div v-else-if="age>=18 && age<60">
客观请进，这里欢迎您
</div>
<div v-else>
老神仙，不食人间烟火
</div>
</div> <script>
/**
* v-model:只能在表单标签中使用(input,select,textarea)
*/
var vue = new Vue({
el: "#app",
data: {
age:10
}
})
// alert(0)
// vue.age = 89;
</script> </body></html> v-on 事件绑定 事件绑定可以直接使用v-on <标签 v-on:事件名=方法名> 调用的方法可以不加() v-on有一种简写形式 <标签 @事件名=方法名> <!DOCTYPE html><html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vuejs/vue.js"></script></head><body> <div id="app">
<!--
这里的方法加不加括号都可以执行
v-on:事件名="方法名()"
@事件名="方法名()"
-->
<button v-on:click="say()">点我有惊喜...</button>
<button @click="hello('风语咒')">再点我啊！！！</button>
<button @click="age++">{{age}}</button>
</div> <script>
var vue = new Vue({
el: "#app",
data: {
name:"xxx",
age:12
},
methods:{
say(){
alert("点啊，你个瓜娃子！")
},
hello(msg){
console.debug(this.name+"出来看:"+msg);
}
}
})
</script> </body></html> （本文由源码时代技术老师撰写，转载请注明出处）
