v-text & v-html
在讲这两个指令之前,先说说我们很熟悉的 插值,再来说说用这两条指令替代插值的好处。
语法:
{{插值表达式}}
说明:
(1)这是使用Vue实例最简单的方式——花括号内部可以直接使用Vue实例的数据和方法
(2)不管是直接写个js语句,还是调用Vue实例,花括号内部必须有返回值
(3)当网速过慢,数据尚未加载成功时,页面时会显示最原始的花括号,这种现象叫做 插值闪烁 —— 使用指令可以避免这种现象
语法:
<span v-text="msg"></span>
<span v-html="msg"></span>
说明:
(1)将数据写到元素内部,如果数据是HTML语句,会被当作普通文本
(2)将数据写到元素内部,如果数据是HTML语句,会作为HTML被渲染
演示:
<div id="app">
<span v-text="msg"></span><br>
<span v-html="msg"></span><br>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// 注意这里的数据
msg: "<h2>Lolisuki!<h2>"
}
});
</script>
v-model
语法:
<input type="checkbox" value="111" v-model="xxx">111<br>
<input type="checkbox" value="222" v-model="xxx">222<br>
<input type="checkbox" value="333" v-model="xxx">333<br>
说明:
(1)上面讲的v-text/v-html其实是单向绑定,因为此时页面上的元素并不能被用户改动
(2)而v-model可是实现模型与视图的双向绑定,因为使用v-model的元素都是用户可以在视图直接修改的
(3)所以可使用v-model的元素有:input、select、textarea、checkbox、radio等
(4)上面的这些元素,对应的绑定数据的类型是不同的。比如input、textarea对应字符串,select、checkbox对应数组
演示:
<div id="app">
<input type="checkbox" value="物述有栖" v-model="vtuber">物述有栖<br>
<input type="checkbox" value="神乐七奈" v-model="vtuber">神乐七奈<br>
<input type="checkbox" value="猫宫日向" v-model="vtuber">猫宫日向<br>
<h2>
你选择了:{{vtuber.join(" ")}}
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
vtuber: []
}
});
</script>
v-on
语法:
v-on:click="xxxxxx"
@click="xxxxxxx"
说明:
(1)用于给页面元素绑定事件
(2)之前我们使用的 event.preventDefault() 或 event.stopPropagation() 在Vue中如何实现呢?用下面的这些事件修饰符:
事件修饰符 | 作用 |
---|---|
.stop | 阻止事件冒泡 |
.prevent | 阻止默认事件发生 |
.capture | 使用事件捕获模式 |
.self | 只有元素自身触发事件才执行,冒泡或捕获的都不执行 |
.once | 只执行一次 |
演示:
<div id="app">
<button v-on:click="inc">增加</button>
<button v-on:click="dec">减少</button>
<h2>num = {{num}}</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
inc() {
this.num++;
},
dec() {
this.num--;
}
}
});
</script>
v-for
语法:
遍历数组:
v-for="item in items"
遍历对象:
v-for="value in object"
v-for="(value,key) in object"
说明:
(1)既可以遍历数组元素,又可以遍历对象属性
(2)还可以在遍历时加上下标,比如 v-for="(item, index) in items"
演示:
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} 的年龄是 {{user.age}}
</li>
</ul>
<br>
<ul>
<li v-for="(value, key) in person">
对象的属性{{key}},对象的属性值{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// 对象列表
users: [
{"name": "Alice", "age": 12},
{"name": "Mana", "age": 11},
{"name": "Hana", "age": 11},
],
// 单个对象
person: {"name": "Alice", "age": 12}
}
});
</script>
v-if & v-show
语法:
v-if="布尔表达式"
v-show="布尔表达式"
说明:
(1)v-if为false的时候,元素直接会不存在
(2)v-show为false的时候,元素只是display: none而已
(3)你甚至可以使用 v-else-if 和 v-else
演示:
<div id="app">
<button @click="show=!show">点我切换</button>
<h2 v-if="show">
Lolisuki!!!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
}
});
</script>
v-bind
语法:
v-bind:属性名="Vue中的变量"
说明:
(1)v-bind用于在属性上(即标签上的各种字段)使用Vue数据
(2)因为元素的属性是不允许使用插值的,所以修改元素属性也只能使用v-bind
演示:
<div id="app">
<img v-bind:src="imgSrc" :height="imgHeight" :width="imgWidth"/>
<div v-bind:style="divStyle">Lolisuki!!!</div>
<div v-bind:class="divClass">Lolisuki!!!</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
imgSrc: "img/pic.png",
imgHeight: "600px",
imgWidth: "1000px",
divStyle: "color:pink",
divClass: "pink" // css中要有.pink类
}
});
</script>
❤️