Vue学习教程-14内置指令
文章目录
- 前言
- 一、v-text指令
- 二、v-html指令
- 三、v-cloak指令
- 四、v-once指令
- 五、v-pre指令
- 六、其他指令
前言
Vue.js 提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以 v- 前缀开始。
- v-text : 更新元素的 textContent
- 更新元素的
textContent。 - 例如：
- 更新元素的
- v-html : 更新元素的 innerHTML
- 更新元素的
innerHTML。 - 例如：
- 更新元素的
- v-if : 如果为 true, 当前标签才会输出到页面
- 根据表达式的真假值条件性地渲染元素。
v-if是“惰性”的：如果条件为假，则元素不会出现在 DOM 中。
- 根据表达式的真假值条件性地渲染元素。
- v-else: 如果为 false, 当前标签才会输出到页面
- v-show : 通过控制 display 样式来控制显示/隐藏
- 根据表达式的是与否来切换元素的显示状态（通过改变 CSS 的
display属性）。 - 例如：
Visible only if isShown is truthy.
- 根据表达式的是与否来切换元素的显示状态（通过改变 CSS 的
- v-for : 遍历数组/对象
- 基于源数据多次渲染元素或模板块。
- 例如：
- {{ item.text }}
{{ name }}: {{ value }}
- v-on : 绑定事件监听, 一般简写为@
- 用于绑定事件监听器。
- 例如：
或
- v-bind : 绑定解析表达式, 可以省略 v-bind，简写为
: - v-model : 双向数据绑定
- 在表单元素上创建双向数据绑定。
- 例如：
- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
- 这个指令保持在元素上直到 Vue 实例结束编译。常与 CSS 规则一起使用，可以隐藏未编译的 Mustache 标签直到 Vue 完成编译。
- 例如：在 CSS 中使用
[v-cloak] { display: none }，然后在模板中使用
- v-pre：跳过这个元素和它的子元素的编译过程。
- 用来显示原始 Mustache 标签。可以用于显示原始数据，例如从服务器获取的未编译模板。
- 例如：{{ this will not be compiled }}
一、v-text指令
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
<head>
<meta charset="UTF-8" />
<title>v-text指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<div>你好，{{name}}div>
<div v-text="name">你好，阿里div>
<div v-text="str">你好，腾讯div>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建实例
const vm = new Vue({
el:'#root',
data:{
name:'vue学院',
str:'你好啊！
'
}
})
script>
二、v-html指令
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
<head>
<meta charset="UTF-8" />
<title>v-html指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<div>你好，{{name}}div>
<div v-html="str">div>
<div v-html="str2">div>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建实例
const vm = new Vue({
el:'#root',
data:{
name:'百度',
str:'你好啊！
',
str2:'百度网址',
}
})
script>
三、v-cloak指令
场景：当 Vue 实例初始化较慢（如网络延迟或数据加载时间长）时，页面会短暂显示未编译的 {{}} 插值表达式，造成视觉干扰。
效果：页面加载时隐藏未编译内容，Vue 完成编译后自动显示渲染结果，自动删除v-cloak属性。
<head>
<meta charset="UTF-8" />
<title>v-text指令title>
<script type="text/javascript" src="../js/vue.js">script>
<style>
[v-cloak] {
display: none;
}
style>
head>
<body>
<div id="root" v-cloak>
<p>{{ content }}p>
div>
body>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
setTimeout(() => {
new Vue({
el: "#root",
data() {
return{
content: "hello vue"
}
},
});
}, 2000); // 延迟 2 秒模拟网络延迟
script>
四、v-once指令
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<head>
<meta charset="UTF-8" />
<title>v-once指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 v-once>初始化的n值是:{{n}}h2>
<h2>当前的n值是:{{n}}h2>
<button @click="n++">点我n+1button>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建实例
const vm =new Vue({
el:'#root',
data:{
n:1
}
})
script>
五、v-pre指令
v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<head>
<meta charset="UTF-8" />
<title>v-pre指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2 v-pre>Vue其实很简单h2>
<h2 >当前的n值是:{{n}}h2>
<button @click="n++">点我n+1button>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//创建实例
new Vue({
el:'#root',
data:{
n:1
}
})
script>
六、其他指令
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他常用指令title>
<script type="text/javascript" src="../js/vue.js">script>
head>
<body>
<div id="root">
<h2>v-bind指令h2>
<div :id="prop">{{name}}div>
<h2>v-model指令h2>
姓名：<input type="text" v-model="name">
<h2>v-on指令h2>
<button @click="func">点我button>
<h2>v-for指令h2>
<ul>
<li v-for="(item,index) in arr" :key="index">
{{item}}-{{index}}
li>
ul>
<h2>v-show指令h2>
<p v-show="isShown">Visible only if isShown is truthy.p>
div>
body>
<script>
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
// 创建实例
const vm = new Vue({
el:'#root',
data(){
return{
name:'hello vue',
prop:"mydiv",
arr:["张三","李四","王五"],
isShown:true
}
},
methods: {
func(){
alert("v-vlick")
}
},
})
script>