1.什么是指令?
指令：生活中的指令通常指代带有方向和指导性的命令
计算机中的指令：描述的是带有数据功能性处理的一段可执行命令的集合
-
Vue 中的指令：实现特定功能的一种用法，一般以
v-符号开头，如v-text
2.具体指令
①. v-text / v-html / v-once
功能描述: 网页视图中渲染展示变量中的数据
-
v-text：指令当成标签的属性进行使用，输出数据的变量包含在属性值中，等价于插值表达式 -
v-html：指令当成标签属性进行使用，输出的数据中包含的标签会被渲染，使用时注意XSS代码注入 -
v-once：指令经常和插值表达式在一起结合使用，用于只做一次数据渲染的操作
代码操作:
<body>
<div id="app">
<p v-text="msg"></p> <!-- v-text指令：输出变量数据，指令=属性的方式-->
<p v-html="msg"></p> <!-- v-html指令：解释标签渲染数据-->
<p v-once>输出数据：{{msg}} </p> <!-- v-once指令：只会在加载的时候渲染一次 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msg: "<h1>MaKaBaKa009527</h1>"
}
})
</script>
</body>
②. v-show / v-if
功能描述: 用于根据条件判断，是否渲染展示指定数据的指令
-
v-show：通过变量控制display:none|block完成数据的隐藏 / 显示 -
v-if：通过变量控制是否渲染加载DOM结构完成数据的隐藏 / 显示
代码操作:
<body>
<div id="app">
<p v-show="seen">MaKaBaKa009527</p>
<p v-if="seen">MaKaBaKa009528</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
</body>
注意: 如果一个数据在页面上频繁的在显示/隐藏之间进行切换，需要使用v-show指令，反之则使用v-if指令
③. v-if / v-for
功能描述: 程序流程控制结构，选择结构、循环结构
代码操作:
<body>
<div id="app">
<h3>v-if指令：选择结构</h3>
<p v-if="userRole===0">游客</p>
<p v-else-if="userRole===1">会员</p>
<p v-else-if="userRole===2">管理员</p>
<p v-else>异常</p>
<hr>
<h3>用户权限描述：</h3>
<ul>
<li v-for="up in userPermissions"> {{ up.intro }}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
userRole: 1, // 0 游客；1会员；2管理员
userPermissions: [
{id:1, name:'read', intro: "查看文章"},
{id:2, name:'publish', intro: "发表文章"},
{id:3, name:'edit', intro: "编辑文章"},
{id:4, name:'delete', intro: "删除文章"},
]
}
})
</script>
</body>
④. v-bind
功能描述: 该指令主要用于操作标签属性对象
代码操作:
<body>
<div id="app">
<h2>v-bind操作标签属性</h2>
<!-- <img v-bind:src="image_src" alt=""> -->
<img :src="image_src" alt="">
<ul>
<!-- for循环指令，数据渲染时，必须通过key属性将数据和视图进行一一绑定 -->
<!-- 否则会影响页面视图的更新(认识即可)-->
<li v-for="img in images_list" :key="img.id">
<!-- <img :src="img.image_src" alt=""> -->
<p>{{img.image_src}}</p>
</li>
</ul>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
image_src: "images/lifecycle.png",
images_list: [
{id: 3, image_src: "3.jpg"},
{id: 2, image_src: "2.jpg"},
{id: 1, image_src: "1.jpg"},
]
}
})
</script>
</body>
⑤. v-on
功能描述: 该指令用于给指定标签绑定对应的事件
代码操作:
<body>
<div id="app">
<!-- <button v-on:click="changeImg">更换图片</button>-->
<button @click="changeImg">更换图片</button>
<img :src="image_src" alt="" style="width:100px;height:auto;">
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
image_src : "images/lifecycle.png"
},
methods: { // Vue实例中定义函数
changeImg() {
// 更换图片，不需要DOM操作，只需要更新变量数据即可
this.image_src = "images/image2.jpg"
}
}
})
</script>
</body>
