Vue-常见的指令
指令
在Vue中，前缀是v-的都叫做指令，表示它们是Vue提供的特殊的属性。
这里介绍简单常用的一些指令。
v-text
这个指令是用来设置文本值的，其使用方式v-text=表达式。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-texttitle>
head>
<body>
<div id="app">
<h1 v-text="message+'!!!'"> Helloh1>
<h1>{{ message+"!!!" }} Helloh1>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
message: "测试v-text"
}
});
script>
body>
html>
测试结果如下：
v-html
这个指令是用来设置元素的innerHTML属性的，使用方法v-html=表达式。
该指令和v-text的区别就是，该指令可以处理解析HTML代码，而v-text只能将内容原样输出。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-htmltitle>
head>
<body>
<div id="app">
<p v-html="content">p>
<p v-text="content">p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
content: "测试v-html
"
}
});
script>
body>
html>
效果如下：
我们发现使用v-html会将其HTML的标签解析，但是使用v-text就只会原样展示。
v-on
该指令是用来给元素绑定事件的，其使用方式为v-on:事件名=处理方法。
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-ontitle>
head>
<body>
<div id="app">
<button v-on:click="doSomething(info)">点我button>
<button @click="doSomething(info)">简写点我button>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
info: "信息",
message: "这是一则消息"
},
//方法
methods: {
doSomething:function (info) {
alert(this.message+"..."+info);
}
}
});
script>
body>
html>
点击两个按钮都会产生相同的结果，弹出一个消息框。
v-show
该指令可以根据表达式的真假来切换元素的显示和隐藏，其使用方式为v-show=表达式。
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-showtitle>
head>
<body>
<div id="app">
<button v-on:click="change">切换button>
<div v-show="isShow">
{{ message }}
div>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
message: "v-show测试",
isShow: true
},
//方法
methods: {
//切换isShow
change:function () {
this.isShow = !this.isShow;
}
}
});
script>
body>
html>
通过点击按钮的方式来切换message的显示与隐藏。效果不做演示。
它的本质是切换元素的display属性。
v-if
该指令会根据表达式的真假来切换元素的显示与隐藏，其使用方式v-if=表达式。
与v-show不同的是，该指令是直接操作dom元素，来控制dom元素的存在与否。
该指令还有两个可以搭配使用的指令v-else-if和v-else。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-iftitle>
head>
<body>
<div id="app">
<p v-if="score>=90">优秀p>
<p v-else-if="score>=80">良好p>
<p v-else-if="score>=70">还行p>
<p v-else-if="score>=60">及格p>
<p v-else>不及格p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
score: 70
}
});
script>
body>
html>
对于上述的代码，就是一个简单的条件判断语句，相信博主这里不做解释，也能看懂。
它会根据score的取值来显示对应的内容，感兴趣的读者可以自行测试。
v-bind
该指令用于设置元素的属性，其使用方式v-bind:属性名=表达式。
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bindtitle>
head>
<body>
<div id="app">
<p v-bind:title="message">鼠标在上面悬停一会p>
<br>
<p :title="message">鼠标在上面悬停一会p>
<br>
<p :title="message=='消息....'?'这是消息....':'消息....'">鼠标在上面悬停一会p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
message: "消息...."
}
});
script>
body>
html>
该指令用于来绑定元素的属性值。当鼠标悬停在段落上，会出现title的值，感兴趣的可以自行尝试。
v-for
根据数据生成列表结构，就是用来遍历数组的。使用方式v-for="变量 in 遍历对象"或者v-for="(变量,索引) in 遍历对象"。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-fortitle>
head>
<body>
<div id="app">
<ul>
<li v-for="message in messages">
{{message}}
li>
ul>
<hr>
<ul>
<li v-for="(message,index) in messages">
{{message}} -- {{index}}
li>
ul>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
messages: [
"消息1",
"消息2",
"消息3",
"消息4",
"消息5"
]
}
});
script>
body>
html>
遍历效果如下：
v-model
该指令用于获取和设置表单元素的值，用于数据的双向绑定，使用方式v-model="表达式"。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-modeltitle>
head>
<body>
<div id="app">
<form>
<input type="text" v-model="name">
<br>
<p>{{name}}p>
form>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
name: "Ara_Hu",
}
});
script>
body>
html>
这里我们在输入框中输入什么，Vue对应的数据对象中的值就会被修改为什么，同时，修改Vue中数据对象对应的值，也会对应改变页面输入框的值，这就是Vue的数据双向绑定。
v-once
执行一次性地插值，当数据改变时，插值处的内容不会更新，就是说指定了该指令的节点，在第一次加载了数据对象之后，后面任由更改其数据对象的数据，该节点渲染的数据都不会再发生改变了。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-ontitle>
head>
<body>
<div id="app">
<p v-once>{{ message }}p>
<hr>
<p>{{ message }}p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
var vm = new Vue({
//挂载点
el: "#app",
//数据对象
data: {
message: "这是一则消息"
}
});
script>
body>
html>
演示如下：
