什么是指令
指令是带 v- 前缀的特殊属性,其值限定为单个表达式。
vue提供了少量指令供大家使用,在一定程度上简化了开发过程。当然除了内置指令,还有自定义指令,本篇就是只对内置指令进行讲解。
内置指令
v-show指令
v-show指令的作用是根据表达式的值的真假,来显示和隐藏HTML元素
<div id="father">
<!-- v-show -->
<p v-show='flag'>这个是v-show指令</p>
<p v-show='flag1'>这个是v-show指令</p>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
flag: true,
flag1:false
}
})
</script>
在使用v-show指令时,当表达式的值为true时则表示显示HTML元素,当表达式的值为false时则表示隐藏HTML元素运行,效果图如下:
v-if/v-else-if/v-else指令
v-if/v-else-if/v-else指令是用于实现条件判断的
<div id="father">
<!-- v-if/v-else-if/v-else -->
<div>
<p v-if=" a === 'a'">这个是v-if指令</p>
<p v-else-if="a === 'b'">这个是v-else-if指令</p>
<p v-else>这个是v-else指令</p>
</div>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
a: 'c'
}
})
</script>
在使用v-if等指令时,根据表达式进行判断,当表达式的值为true时才会执行,效果图如下:
v-for指令
v-for指令是通过循环的方法渲染一个列表,循环对象可以是对象和数组
<div id="father">
<!-- v-for -->
<ul>
<li style="color:red">通过v-for指令遍历数组</li>
<li style="color:red">只获取数据</li>
<li v-for="item in arr">{{ item }}</li>
<li style="color:red">获取数据和循环次数</li>
<li v-for="(item,index) in arr">下标{{ index }},对应的数据{{ item }}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
arr: [1, 2, 3, 4, 5, 6, 7, 8]
}
})
</script>
上列实例是为数组进行循环,v-for指令的表达式中可以有两个参数,分别表示数据和索引,效果图如下:
<div id="father">
<!-- v-for -->
<ul>
<li style="color:red">通过v-for指令遍历对象</li>
<li style="color:red">获取数据</li>
<li v-for="item in obj">{{ item }}</li>
<li style="color:red">获取数据,属性名,循环次数</li>
<li v-for="(value,key,index) in obj">属性名:{{ key }},对应的数据:{{ value }},第{{ index+1 }}次循环</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
obj: {
name: "admin",
sex: "男",
age: 18
}
}
})
</script>
上述实例是对对象进行循环,表达式中可以有三个参数,分别表示属性值、属性名和索引,效果图如下:
v-bind指令
v-bind指令是更新HTML元素的属性。
<div id="father">
<!-- v-bind -->
<a v-bind:href="url">跳转到百度</a>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
url: "http://baidu.com"
}
})
</script>
在页面上点击a标签就会跳转到百度首页,因为v-bind指令更新的a标签中href属性的值
v-model指令
v-model指令是用在表单、和元素上创建双向数据绑定
<div id="father">
<!-- v-model -->
<input type="text" v-model="input_value" name="" id="">
<p>
当修改input输入框值时,input_value的值也被修改为 <span style="background-color: red;">{{ input_value }}</span>
</p>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
input_value: "v-model指令"
}
})
</script>
在上述实例中,输入框的值随input_value值的改变,而input_value值也随输入框的值改变,这就是双向的数据绑定,它们相互影响,
v-on指令
v-on指令是用于监听DMO事件,并在触发的时候运行一些JavaScript代码
<div id="father">
<!-- v-on -->
<input type="button" value="单击事件" @click="greet('普通单击事件')">
<input type="button" value="鼠标左键单击事件" @click.left="greet('鼠标左键单击事件')">
<input type="button" value="鼠标中键单击事件" @click.middle="greet('鼠标中键单击事件')">
<input type="button" value="鼠标右键单击事件" @click.right="greet('鼠标右键单击事件')">
<input type="button" value="鼠标右键单击事件" @click.right="greet('鼠标右键单击事件')">
</div>
<script>
let vm = new Vue({
el: "#father",
methods: {
greet(event) {
console.log(event);
}
}
})
</script>
这个v-on指令只写一点比较基础的部分,其实v-on的用法不止这些,我们在这里就不一一讲解了,大家有需要可以自己去了解
v-text指令和v-html指令
v-text指令是用于更新元素的文本内容
v-html指令是更新元素的innerHTML
<div id="father">
<!-- v-text -->
<p v-text="p_text"></p>
<!-- v-html -->
<p v-html="p_html"></p>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
p_text: "这是v-text指令",
p_html: "<span style='color:red'>这是v_html指令</span>",
}
})
</script>
我们通过v-text和v-html显示内容,并且在页面中通过控制台更新了页面元素,看具体效果图
v-pre指令和v-once指令
v-pre指令是跳过这个元素和它的子元素的编译过程,当子元素也挂载了vue实例则该子元素不受影响,该指令不需要表达式。
v-once指令是让元素或组件值渲染一次,该指令不需要表达式
<div id="father">
<!-- v-pre -->
<p v-html="p_html" v-pre></p>
<!-- v-once -->
<p v-once v-text="p_once"></p>
</div>
<script>
let vm = new Vue({
el: "#father",
data: {
p_html: "<span style='color:red'>这是v_html指令</span>",
p_once: "这是v_once指令"
}
})
</script>
当元素被v-pre修饰时,该元素的所有操作都会跳过,不会进行任何处理。而被v-once指令修饰时,该元素只会渲染一次,当值有所改变时也不会重新渲染