提示
本文主要讲解 Vue 中的模板语法。@ermo
# 模板语法
# 文本
最长使用的就是使用双大括号绑定 Vue 中的一个属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'ermo'
}
});
</script>
</body>
</html>
# 原始 HTML
双大括号语法只能将数据解释为文本值，如果需要渲染原生 HTML 需要使用到 v-html 指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<div v-html="message">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '<h1>ermo.cc</h1>'
}
});
</script>
</body>
</html>
# 属性
可以使用 v-bind:class 指定绑定 HTML 属性值。冒号后面是具体的属性名称。
使用 v-bind 指定同样可以绑定自定义属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
<style>
.bgClass {
background: #444;
color: #eee;
}
</style>
</head>
<body>
<div id="app">
<label for="c1">修改颜色</label>
<input type="checkbox" v-model="use" id="c1">
<div v-bind:class="{'bgClass': use}">some text</div>
</div>
<div id="btn">
<label for="c2">禁用btn</label>
<input type="checkbox" v-model="disabledBtn" id="c2">
<button v-bind:disabled="disabledBtn">提交</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
use: false,
}
});
var btn = new Vue({
el: '#btn',
data: {
disabledBtn: false,
}
});
</script>
</body>
</html>
# 使用 JavaScript 表达式
对于所有的数据绑定，Vue.js 都提供了表达式支持。每个绑定都只能包含单个表达式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表达式</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
{{message ? 'true message' : 'false message'}}
{{number + 1}}
{{msg.split('').reverse().join('')}}
<div v-bind:id="'list-' + id">ermo.cc</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: false,
number: 20,
msg: "euV",
id: Math.random() * 100
}
});
</script>
</body>
</html>
# 指令
指令是 v- 开头的特殊属性，指令值为单个表达式，当表达式发生改变时，产生的影响将连带作用到 DOM 上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app" v-if="seen">
现在你看到我了
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
seen: true
}
});
</script>
</body>
</html>
# 参数
有些指令可以通过冒号带一个参数，v-bind:href="url" 比如 v-bind 指令将 href 属性与表达式 url 参数关联起来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击跳转</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://ermo.cc'
}
});
</script>
</body>
</html>
另一个指令 v-on 指令也可以加参数，用于监听 DOM 事件，参数表达式对应的是监听事件名。
<a v-on:click="doSomething">点击</a>
# 动态参数
从2.6.0开始 Vue.js 支持方括号书写的动态参数语法。
<a v-bind:[attributeName]="url">点击</a>
attributeName 最终值由 Vue 对象中的对应 data 属性决定，attributeName 不能有空格和引号。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态参数</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<a v-bind:[attr]="url">点击</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
attr: 'href',
url: 'https://ermo.cc'
}
});
</script>
</body>
</html>
# 修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如 .prevent 表示提交事件不再重新加载页面，用于阻止表单提交的默认行为。
<form v-on:submit.prevent="onSubmit">...</form>
# 用户输入
可以使用 v-model 绑定表单控件，比如 input、select、checkbox、textarea 等元素，用户在表单上输入数据，v-model 可以实现表单控件与数据的双向绑定。
双向绑定的意思是，数据发生变化，视图也相应地发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户输入</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
}
});
</script>
</body>
</html>
# 过滤器
Vue.js 允许自定义过滤器，语法为管道符 |，常用用于文本格式化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
<body>
<div id="app">
<!-- 转换为大写 -->
<p>{{msg | format}}</p>
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
filters: {
format: function(value) {
if (!value) {
return '';
}
value = value.toString();
return value.toUpperCase();
}
}
});
</script>
</body>
</html>
# 缩写
v-bind 和 v-click 支持缩写语法。
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>