v-text
作用：更新元素的 textContent (innerText)。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
示例：
<div id="app">
<p>{{ name }}</p>
<p v-text="name"></p>
<!-- 上面两个P标签实现的效果一模一样，但如果是更新部分的话需要用{{name}} -->
<p>我的名字：{{ name }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
name:"浩气长存"
}
});
效果：
v-html
作用：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。(v-html和v-text基本相同但v-html会渲染dom节点)
示例：
<div id="app">
<span v-text="str"></span> v-text
<br>
<span v-html="str"></span> v-html
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
str: "<button>按钮</button>"
}
});
</script>
效果：
v-show
作用：根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。（v-show不能 配合 template 去使用）
示例：判断用户是否登录
<div id="app">
<button v-show="isLogined">登录</button> <!--显示-->
<button v-show="!isLogined">退出登录</button><!--隐藏-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
//判断用户是否登录
data:{
isLogined:true,
}
});
</script>
效果：
v-if
根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。（当和 v-if 一起使用时，v-for 的优先级比 v-if 更高， v-if 可以配合 template 去使用）
示例：也用判断用户是否登录
<div id="app">
<button v-if="isLogined">登录</button> <!--显示-->
<button v-if="!isLogined">退出登录</button><!--隐藏-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
//判断用户是否登录
data:{
isLogined:true,
}
});
效果：
看起来和v-show效果一样但是在切换时元素及它的数据绑定被销毁并重建而v-show不是。
v-if：
v-show：
v-else与v-else-if
作用：v-else和v-else-if 这两个指令都需要与v-if使用。
v-else：为 v-if 或者 v-else-if 添加“else 块”。（前一兄弟元素必须有 v-if 或 v-else-if）
v-else-if：表示 v-if 的 “else if 块”。可以链式调用。（前一兄弟元素必须有 v-if 或 v-else-if。）
v-if 、v-else和v-else-if 这三个都是互斥的关系，有你没我有我没你。
示例：根据成绩显示优秀、良好、及格、差
<div id="app">
<p>豪哥：{{ score[0]}}分
<span v-if="score[0] >= 90">优秀}</span>
<span v-else-if="score[0] >= 80">良好</span>
<span v-else-if="score[0] >= 60">及格</span>
<span v-else>差</span>
</p>
<p>苇哥：{{ score[1]}}分
<span v-if="score[1] >= 90">优秀</span>
<span v-else-if="score[1] >= 80">良好</span>
<span v-else-if="score[1] >= 60">及格</span>
<span v-else>差</span>
</p>
<p>小红：{{ score[2]}}分
<span v-if="score[2] >= 90">优秀</span>
<span v-else-if="score[2] >= 80">良好</span>
<span v-else-if="score[2] >= 60">及格</span>
<span v-else>差</span>
</p>
<p>小明：{{ score[3]}}分
<span v-if="score[3] >= 90">优秀</span>
<span v-else-if="score[3] >= 80">良好</span>
<span v-else-if="score[3] >= 60">及格</span>
<span v-else>差</span>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
score:[100,88,70,59]
}
});
</script>
效果：
v-for
作用：v-for主要基于源数据多次渲染元素或模板块。
格式
一、循环数组
v-for="item in xxx" v-for="(item, index)in xxx"
item 循环的每一项 item 循环的每一项
in 固定写法 index 循环的下标
xxx 要循环的数据 in 固定写法
xxx 要循环的数据
二、循环对象
v-for="item in xxx" v-for="(value,key, index)in xxx"
item 循环的xxx对象的value value value值
in 固定写法 key key值
xxx 要循环的数据 index 循环的下标
in 固定写法
xxx 要循环的数据
三、循环字符串和数字
v-for="item in '今天天气真好'"
v-for="item in 3" => v-for="item in [1,2,3]"
从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。
不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。
示例：渲染商品
<div id="app">
<ul>
<li v-for="item in goods">{{ item }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
goods:["苹果手机","华为手机","小米手机"]
}
});
</script>
效果：
v-on
作用：用于事件绑定。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
缩写：@
语法：
v-on:xxxx="yyyy"
xxxx 事件名字，比如 click、dblclick、mousedown、mouseup....
yyyy
1. 事件处理函数。这个函数需要定义在 Vue 实例的 methods 选项中
v-on:click="fn1"
2. 内联语句
v-on:click="fn1()" 加了() 不会立即执行
对象语法 (2.4.0+)
v-on="{ mousedown: doThis, mouseup: doThat }"
@ 就是 v-on 的简写方式
@xxxx="yyyy"
事件处理函数会自动接收到一个event（事件对象）。但如果是内联的写法的化就不会。
如果希望内联写法时也要收到 event 。需要手动将 $event 给传递下去
示例:tab选项卡切换
<style>
.active{ background: red;}
</style>
<body>
<div id="app">
<div>
//:class => v-bind:class
<button v-for="(item,index) in tab" @click="i = index" :class="{active : i == index}">{{ item.title }}</button>
</div>
//:src => v-bind:src
<img :src="tab[i].img" width="300px" height="300px">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
tab:[
{title:'第一张图片',img:'/img/timg01.jpg'},
{title:'第二张图片',img:'/img/timg02.jpg'},
{title:'第三张图片',img:'/img/timg03.jpg'}
],
i:0
}
});
</script>
</body>
效果
v-on 修饰符
v-on的修饰符，又叫做事件修饰符
语法
v-on:eventName.修饰符1.修饰符2.修饰符3=“Handler”
@eventName.修饰符1.修饰符2.修饰符3=“Handler”
事件修饰符：
1. stop 阻止事件冒泡
2. prevent 阻止默认行为
3. capture 让事件行为是一种捕获行为
4. self 只当事件触发在绑定事件的元素本身上时才触发
5. {keyCode} | {keyAlias} 特定的键盘事件修饰符
6. keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode attribute 也是允许的：
v-on:keyup.13
keyAlias 有哪些内置的呢：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
还可以通过 Vue.config.keyCodes 来自定义键码别名
Vue.config.keyCodes.f1 = 13
6. once 只绑定一次事件
7. left 绑定鼠标左键
8. right 绑定鼠标右键
9. middle 绑定鼠标滚轮键
10. passive 以 { passive: true } 模式添加侦听器
系统修饰符
11. ctrl
12. shift
13. alt
13. meta windows上就是windows图标的那个。mac上 command 键
14. exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
v-bind
作用：v-bind 指令将数据绑定到元素的属性上，比如 title、id、class、style
语法：
v-bind:xxxx="yyyy"
xxxx - 属性名
yyyy - 数据
以上可以简写
:xxxx="yyyy" v-bind: 可以简写成 :
v-bind 对象写法
v-bind="{ name: '张三', age: 18 }" => v-bind:name="'张三'" v-bind:age="18"
v-bind="{ 'name': name, age: age }" => v-bind:name="name" v-bind:age="age"
示例：
<div id="app">
<p :title="name">{{ name }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
name: '浩气长存'
}
});
</script>
效果：
v-bind:class
vue 中 class 属性是个特殊的属性，使用v-bind绑定时可以有不同的写法
一、v-bind:class="‘hello’" 直接使用字符串 hello 做为类名
二、v-bind:class=“hello” 使用 hello 这个数据的值作为类名
三、对象 v-bind:class="{ key1: value1, key2: value2 }"
根据 value1 这个数据是否为真值，来控制是否要加上 key1 这个类名
根据 value2 这个数据是否为真值，来控制是否要加上 key2 这个类名
四、数组 v-bind:class="[ value1, ‘value2’, value3, { key: value } ]"
使用 value1 这个数据的值来作为其中一个类名
使用 value2 这个字符串直接作为其中一个类名
使用 value3 这个数据的值来作为其中一个类名
根据 value 这个数据的值是否为真值，来控制是否要加上 key 这个类名
示例：
<div id="app">
<p :class="{active : index == 1}"></p>
<p :class="[{active : index != 1}, {title : key}]"></p>
<p :class="[value1,value2,value3]"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
index:1,
key:true,
value1: "box1",
value2: "box2",
value3: "box3",
}
});
</script>
效果：
v-bind:style
vue 中 style 属性也是特殊的一个，通过 v-bind 绑定时有不同的语法使用
一、v-bind:style=“color: red” 这种是有问题的
二、对象 v-bind:style="{ key1: value1, key2: value2, key3: ‘value3’ }"
key1、key2、key3 都是css的属性名
value1 的值作为 key1 这个css属性名的值
value2 的值作为 key2 这个css属性名的值
value3 这个字符串会作为 key3 这个css属性名的值
css属性名如果是短横线写法，需要转换成驼峰写法：
font-size => fontSize
三、数组 v-bind:style="[value1, value2, { color: myColor }]"
使用 value1 这个数据来控制 value1: {} 这时正确的， value1: “fontSize: ‘20px’” 这是错的
使用 value2 这个数据来控制
使用 myColor 这个数据来控制 color 属性的值
示例：
<div id="app">
<!-- <p :style="color: red">p1</p> 错误写法 -->
<p :style="{ color: myColor, fontSize: mySize, fontWeight: 'bold' }">
p2
</p>
<p :style="[ value1, value2, { color: myColor } ]">p3</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
myColor: "red",
mySize: "20px",
value1: {
fontSize: "20px",
},
value2: {
fontWeight: "bold",
},
},
});
</script>
效果：
v-model
作用：在表单控件或者组件上创建双向绑定。
用于：
<input>
<select>
<textarea>
components
示例：在输入input框时可以把输入的名字渲染到我的名字里。（不用等失去焦点后）
效果：
原生js的写法
<div id="app">
<p id="myName">我的名字:</p>
<input id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script>
//原生js
document.querySelector('#ipt').oninput = (e) => {
let value = e.target.value;
document.querySelector('#myName').innerHTML = `我的名字：${value}`;
}
</script>
使用vue的v-model指令
<div id="app">
<h1>双向数据绑定</h1>
<p id="myName" >我的名字：{{ name }}</p>
<input v-model="name" id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
name:''
}
});
</script>
修饰符：
.lazy - 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步。（也就是在失去焦点 或者 按下回车键时才更新）
<div id="app">
<p id="myName" >我的名字：{{ name1 }} 失去焦点</p>
<p id="myName" >我的名字：{{ name2 }} 未失去焦点</p>
<input v-model.lazy="name1" id="ipt" type="text" placeholder="请输入你的名字">
<input v-model.lazy="name2" id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
name1:'',
name2:''
}
});
</script>
.number -html元素输入的内容都是字符串类型的，即使输入的是数字但它的类型还是字符串 用 .number修饰符可以把字符串转为有效的数字。
<div id="app">
<p id="myName" >我的年龄：{{ age1 + typeof age1 }} 用了.number</p>
<p id="myName" >我的年龄：{{ age2 + typeof age2 }} 没用.number</p>
<input v-model.number="age1" id="ipt" type="text" placeholder="请输入你的年龄">
<input v-model="age2" id="ipt" type="text" placeholder="请输入你的年龄">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
age1:'',
age2:''
}
});
</script>
.trim - 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<div id="app">
<p id="myName" >我的名字和名字长度：{{ name1 + name1.length }} 用了trim</p>
<p id="myName" >我的名字和名字长度：{{ name2 + name2.length }} 没用trim</p>
<input v-model.trim="name1" id="ipt" type="text" placeholder="请输入你的名字">
<input v-model="name2" id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
<script>
let vm = new Vue({
el: "#app",
data:{
name1:'',
name2:''
}
});
v-model 其实是个语法糖,v-model的真实形态是：
v-model="msg" => v-bind:value="msg" v-on:change="msg = $event.target.value"
v-pre
作用：
有些时候我们需要在页面上就直接输出 {{ }} 这种格式的字符串，不让 vue 对其做解析的操作。这时，只需要使用上 v-pre 即可
v-pre 没有参数也没有表达式
v-bind:参数=“表达式”
<div id="app">
<p v-pre>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app"
});
</script>
效果：
v-cloak
作用：解决vue 页面闪烁问题
现象描述：有时会在页面上出现插值表达式的语句，例如 {{ msg }} 。然后过一小会就没了
问题解释：vue 解析页面需要时间
解决方案：
一、不使用 插值表达式语法 。改用 v-text 。
二、 使用 v-cloak 这个指令。（推荐使用）
1. 将 v-cloak 写在挂载点元素上，它没有参数也没有表达式
2. 设置 一个全局 css 属性选择器样式。样式代码如下
[v-cloak] {
display: none
}
v-cloak 的特性：在vue实例化并且解析完成之后会自动删除掉这个属性
用法
<style>
[v-cloak] {display: none;}
</style>
<div id="app" v-cloak><!--直接在挂载点使用并设置css[v-cloak]{display: none}-->
<p>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello",
}
});
</script>
v-once
作用：让元素默认绑定数据一次。后续数据更新，页面将不再受影响。没有参数没有表达式。
示例：
<div id="app">
<p v-once>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "hello",
},
});
</script>
效果：即使改了数据也不会改变 hello
结尾
参考Vue官方文档
如果文章中有什么不足或者错误的地方欢迎大家留言分享。如果我的文章能帮到你的话那就给我个点赞和关注，谢谢朋友们的支持。
转载：https://blog.csdn.net/yh604005215/article/details/105371596