Vue3学习---【内置指令】【从零开始的Vue3学习】

前言：

Vue3学习---【API】【从零开始的Vue3学习！！！】-CSDN博客

v-text

更新元素的文本内容

v-text通过设置元素的textContent属性来工作，因此它将覆盖元素中所有现有的内容

v-text的效果与“文本模板”(双花括号{{}})一致

<body><div id="app">{{content}}<br><span v-text="content"></span></div><script>const app = Vue.createApp({data(){return {content:"这是一个示例文本."}}});app.mount("#app")</script>
</body>

效果：

v-html

更新元素的innerHTML

v-html的内容直接作为普通HTML插入

即：“Vue模板语法是不会被解析的”(不推荐使用)

<body><div id="app"><span v-html="myHtml"></span></div><script>const app = Vue.createApp({data(){return {myHtml:"<span style='color:red'>我是一个Html</span>"}}});app.mount("#app")</script>
</body>

效果：

v-show

基于表达式值的真假性，来改变元素的可见性

v-show通过设置：“内联样式的CSS属性display”来工作

<body><div id="app"><span style='color: red;' v-show="isColor1">我被v-show控制</span><span style='color: blue;' v-show="isColor2">我也被v-show控制</span></div><script>const app = Vue.createApp({data(){return {isColor1:true,isColor2:false,}}});app.mount("#app")</script>
</body>

效果：

v-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段
与编程语言一样，v-if下有“v-else”、“v-else-if”

v-if用于条件性地渲染一块内容，这些内容只有在指令的表达式返回真值时才被渲染

v-if不同于v-show，v-show是通过display属性来控制，而v-if则是使用“注释”的方法来控制，当返回一个假值时，v-if所在语句将会被Vue注释掉

<body><div id="app"><span style='color: red;' v-if="isIf1">我被v-if控制</span><span style='color: blue;' v-if="isIf2">我也被v-if控制</span></div><script>const app = Vue.createApp({data(){return {isIf1:true,isIf2:false,}}});app.mount("#app")</script>
</body>

效果：

v-else

v-else是v-if的否定，当v-if返回假值时，v-else语句将会被渲染
v-else必须跟在一个“v-if”或“v-else-if”后面，否则将不会被识别

<body><div id="app"><button @click="isClick = !isClick">点击渲染不同内容</button><br><span style='color: red;' v-if="isClick">我是红色</span><span style='color: blue;' v-else="isClick">我是蓝色</span></div><script>const app = Vue.createApp({data(){return {isClick:true,}}});app.mount("#app")</script>
</body>

效果：

v-else-if

v-else-if对应于编程语言中的else if，作用一致

<body><div id="app"><button @click="isClick = 1">点击渲染红色文本</button><br><br><button @click="isClick = 2">点击渲染蓝色文本</button><br><br><button @click="isClick = 3">点击渲染紫色文本</button><br><br><span style='color: red;' v-if="switchColor() == 1">我是红色</span><span style='color: blue;' v-else-if="switchColor() == 2">我是蓝色</span><span style='color: purple;' v-else="switchColor() == 3">我是紫色</span></div><script>const app = Vue.createApp({data(){return {isClick:1,}},methods:{switchColor(){if(this.isClick == 1){return 1;}else if (this.isClick == 2){return 2;}else {return 3;}}}});app.mount("#app")</script>
</body>

效果：

注意：

v-if是“真实的”按条件渲染，条件区块内的事件监听器和子组件都会被销毁与重建
v-if是“惰性”的，如果在初次渲染时值为false，则不会做任何事
v-if的切换开销比v-show大的多，如果需要频繁切换，使用v-show较好
v-if和v-for同用时(不推荐一起使用)，v-if的优先级大于v-for

v-for

基于原始数据多次渲染元素或模板块
可以绑定值的类型有：“数组”、“对象”、“数字”、“字符串”、“可迭代对象”
语法格式为：“value in values”形式的语法，values是原数据数组，value是数组迭代中的别名
v-for常用来做列表渲染

<body><div id="app"><ul><li v-for="item in items">{{item}}</li></ul></div><script>const app = Vue.createApp({data(){return {items:[1,2,3,4]}}});app.mount("#app")</script>
</body>

效果：

v-for中可以访问父作用域

v-for中可以访问顶层Vue应用中的属性和方法，v-for也支持使用可选的第二个参数表示当前项的位置索引

<body><div id="app"><ul><li v-for="(value,index) in values">我是{{topVariable}},我的索引是{{index}},我的名字是{{value}}</li></ul></div><script>const app = Vue.createApp({data(){return {topVariable:"Hello I am fruit",values:["apple","banana"]}}});app.mount("#app")</script>
</body>

效果：

注意：

与其它编程语言的索引迭代不同，在Vue中是“变量在前，索引在后”，即：“(value index)”

v-for的多层嵌套

v-for的多层嵌套，作用域与单层v-for的作用域一致

<body><div id="app"><ul><li v-for="value in values">{{topVariable}}<span v-for="childValue in value" style="border:1px solid">{{topVariable}}:{{childValue}}</span></li></ul></div><script>const app = Vue.createApp({data(){return {topVariable:"Hello!!",values:[["apple","banana"],["dog","cat"]]}}});app.mount("#app")</script>
</body>

效果：

使用of代替in

<div v-for="item of items"></div>

v-for与对象

使用v-for遍历一个对象所有属性时，遍历的顺序会基于对该对象调用Object.values()
直接使用“value in values”返回的是对象值

<body><div id="app"><ul><li v-for="value in values">{{value}}</li></ul></div><script>const app = Vue.createApp({data(){return {values:{title:"Vue 3.0",content:"Hello Vue 3.0"}}}});app.mount("#app")</script>
</body>

效果：

我们可以提供第二个参数表示属性名(键)

<li v-for="(value,key) in values">{{key}}的值是:{{value}}
</li>

效果:

也可以添加第三个参数表示位置索引

<li v-for="(value,key,index) in values">{{key}}的值是:{{value}},索引是{{index}}
</li>

效果：

v-for中使用范围值

v-for可以直接接受一个整数值，此时模板会基于“1,2,3...n”的取值范围重复多次

<li v-for="n in 10">{{ n }}
</li>

效果：

通过key来管理状态

Vue默认按照“就地更新”的策略来更新通过v-for渲染的元素列表，当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素

但我们可以通过给v-for添加一个唯一的“key”属性，来表示唯一的遍历元素，当某个元素更新时，Vue可以通过这个key属性确定这个元素，从而只更新这一个元素

但这个属性并不是真实存在的属性，仅在Vue中可见

<body><div id="app"><ul><li v-for="value in values" :key="value.id">{{ value.name }}</li></ul></div><script>const app = Vue.createApp({data(){return {values: [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }]}}});app.mount("#app")</script>
</body>

效果：

v-on

给元素绑定事件监听器
绑定值类型：“Function(函数)”、“Inline Statement(内联语句)”、“Object(对象)”
参数：“event”(使用对象语法则为可选项)
修饰符：
- .stop：调用event.stopPropagation()
- .prevent：调用event.preventDefault()
- .capture：在捕获模式添加事件监听器
- .self：只有事件从元素本身发出来触发处理函数
- .{keyAlias}：只在某些按键下触发处理函数
- .once：最多触发一次处理函数
- .left：只在鼠标左键事件触发处理函数
- .right：只在鼠标右键事件触发处理函数
- .middle：只在鼠标中键触发处理函数
- .passive：通过{passive:true}附加一个DOM事件
简写：“@”

示例

<!-- 方法处理函数 -->
<button v-on:click="doThis"></button><!-- 动态事件 -->
<button v-on:[event]="doThis"></button><!-- 内联声明 -->
<button v-on:click="doThat('hello', $event)"></button><!-- 缩写 -->
<button @click="doThis"></button><!-- 使用缩写的动态事件 -->
<button @[event]="doThis"></button><!-- 停止传播 -->
<button @click.stop="doThis"></button><!-- 阻止默认事件 -->
<button @click.prevent="doThis"></button><!-- 不带表达式地阻止默认事件 -->
<form @submit.prevent></form><!-- 链式调用修饰符 -->
<button @click.stop.prevent="doThis"></button><!-- 按键用于 keyAlias 修饰符-->
<input @keyup.enter="onEnter" /><!-- 点击事件将最多触发一次 -->
<button v-on:click.once="doThis"></button><!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-on作用于不同对象

当v-on作用于普通元素时，只监听原生DOM事件

当用于自定义元素组件，则监听子组件触发的自定义事件
<body><div id="app"><button @click="handle('hello',$event)">点击我</button></div><script>const app = Vue.createApp({methods:{handle(...args){console.log(args);}}});app.mount("#app")</script>
</body>
效果：

v-bind

动态的绑定一个或多个attribute(属性)，也可以是组件的prop
- 缩写：“:”或者“.”(当时用prop修饰符时)
- 值可以省略(当attribute和绑定的值同名时)
绑定值类型：“any(带参数)”、“Object(不带参数)”
参数：attrOrProp(可选的)
修饰符：
- .camel：将短横线命名的attribute转变为驼峰式命名
- .prop：强制绑定为DOM property
- .attr：强制绑定为DOM attribute

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" /><!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button><!-- 缩写 -->
<img :src="imageSrc" /><!-- 缩写形式的动态 attribute 名 (3.4+)，扩展为 :src="src" -->
<img :src /><!-- 动态 attribute 名的缩写 -->
<button :[key]="value"></button><!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" /><!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div><!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div><!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div><!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" /><!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" /><!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-model

在表单输入元素或组件上创建双向绑定
绑定值类型：“根据表单输入元素或组件输出的值而变化”
仅限于：
- <input>
- <select>
- <textarea>
- components
修饰符：
- .lazy：监听change事件而不是input
- .number：将输入的合法字符串转为数字
- .trim：移除输入内容两端空格

<body><div id="app"><p>这是你输入的信息: {{content}}</p><input type="text"v-model="content"></input></div><script>const app = Vue.createApp({data(){return {content:""}}});app.mount("#app")</script>
</body>

效果：

v-pre

跳过该元素及其所有子元素的编译

元素内具有v-pre，所有Vue模板语法都不会渲染，保留原形式(保留大括号等)

<body><div id="app"><p v-pre>{{ content }}</p><!-- v-html和v-pre共用时，v-pre将会覆盖v-html --><span v-html="myHtml" v-pre></span></div><script>const app = Vue.createApp({data(){return {myHtml:"<span>这是 HTML 代码 </span>",content:"Hello Vue"}}});app.mount("#app")</script>
</body>

效果：

v-once

仅渲染元素和组件一次，并跳过之后的更新

在随后的重新渲染，元素/组件及其所有的子项都会被当做静态内容并跳过渲染，这可以用来优化更新时的性能

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once><h1>Comment</h1><p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul><li v-for="i in list" v-once>{{i}}</li>
</ul>

v-cloak

用于隐藏尚未完成编译的DOM模板

该指令只在没有构建步骤的环境下需要使用

当使用直接在DOM中书写的模板时，可能会出现一种“未编译模板闪现”的情况：

用户可能先看到是还没先编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容

v-cloak会保留在所绑定的元素上，直到相关组件实例被挂载后才移除

配合“v-cloak{display:none}”这样的CSS规则，它可以在组件编译完毕前隐藏原始模板

[v-cloak] {display: none;
}<div v-cloak>{{ message }}
</div>

Vue3学习---【内置指令】【从零开始的Vue3学习】

目录

前言：

v-text

v-html

v-show

v-if

v-else

v-else-if

注意：

v-for

v-for中可以访问父作用域

v-for的多层嵌套

使用of代替in

v-for与对象

v-for中使用范围值

通过key来管理状态

v-on

示例

v-on作用于不同对象

v-bind

v-model

v-pre

v-once

v-cloak

相关文章