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>原文地址：https://blog.csdn.net/zheshiyangyang/article/details/142482470
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！