Vue3 模板语法
Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
{{…}} 标签的内容将会被替代为对应组件实例中 message 属性的值，如果 message 属性的值发生了改变，{{…}} 标签内容也会更新。
如果不想改变标签的内容，可以通过使用 v-once 指令执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ message }}</span>
Html
使用 v-html 指令用于输出 html 代码：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="example1" class="demo">
<p>使用双大括号的文本插值: {{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
<script>
const RenderHtmlApp = {
data() {
return {
rawHtml: '这里会显示红色！'
}
}
}
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>
</body>
属性
v-bind是一个 vue 指令，用于绑定 html 属性，如下：
<div id="app">
<p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
el: '#app',
data: {
title: 'title content'
}
});
这里的 html 最后会渲染成：
<div id="app">
<p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
上面这种 v-bind 这也是我们对于 vue 指令最初的理解，但实际上，vue 指令的预期值（如 v-bind:class=“classProperty” 中，v-bind 是指令，: 后面的 class 是参数，而 classProperty 则在官方文档中被称为“预期值”），除了像上面那样绑定一个字符串类型变量，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）。
所以在这里，我们就可以有更多的选择，例如：
执行运算
<div id="app">
<p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
el: '#app',
data: {
t1: 'title1',
t2: 'title2'
}
});
最后渲染的结果：
<div id="app">
<p title="title1 title2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
执行函数等
<div id="app">
<p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
el: '#app',
data: {
getTitle: function () {
return 'title content';
}
}
});
最后渲染的结果：
<div id="app">
<p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
支持的数据类型
上面的内容，指令预期值得到的都是字符串类型的数据，但实际上，我们知道 js 有很多数据类型，它如果放入其中呢？
对象类型
<div id="app">
<p v-bind:title="obj">content</p>
</div>
......
var obj = {};
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
为什么一来就选择对象类型呢？答案是它比较有代表性，它渲染结果如下：
<div id="app">
<p title="[object Object]">content</p>
</div>
诶，这个怎么有点眼熟？有点像…没错！对象的 toString 方法的返回值！为了验证我们的猜想，我们进行进一步的测试：
<div id="app">
<p v-bind:title="obj">content</p>
</div>
......
var obj = {};
obj.toString = function () {
return 'edited in toString!';
};
var vm = new Vue({
el: '#app',
data: {
obj: obj
}
});
上面这里修改了 obj 的 toString 方法（但准确的说，这里不是修改，而是添加。一开始的 obj 对象上自身是没有 toString 方法的，它继承了 Object.prototype.toString，但这里我们执行 obj.toString = function… 实际上是为它添加了一个 toString 方法，使得它执行的时候，不用再去调用继承自 Object 的方法），渲染结果如下：
<div id="app">
<p title="edited in toString!">content</p>
</div>
这里就进一步证实了我们的猜想。
数组类型
数组类型的 toString 方法和对象类型的有所不同，它将返回和执行 arr.join(’,’) 相同的结果。如 [1, 2, 3].toString() 将返回 “1,2,3”。下面进行测试：
<div id="app">
<p v-bind:title="arr">content</p>
</div>
......
var vm = new Vue({
el: '#app',
data: {
arr: [1, 2, 3]
}
});
渲染结果如下：
<div id="app">
<p title="1,2,3">content</p>
</div>
仍然跟预期结果一样。
其它类型
- number 类型，正常执行 toString，包括数字0，结果都正常渲染成对应的字符串；
- boolean 类型，true 正常渲染成字符串 “true”，但 false 虽然执行 toString 方法将返回 “false”
字符串，但是却没有渲染出来； - null / undefined 类型，二者没有 toString 方法，也没有渲染出来。
显然，在执行 toString 方法之前，vue 内部应该先做了类型校验，满足条件才输出。而且这里不是简单的真 / 假值校验，因为 、0 虽为假值，但最终却像真值一样渲染了出来。具体如何实现，可能需要参考 vue 的源码了，这里不再深究。
以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.class1{
background: #444;
color: #eee;
}
</style>
</head>
<body>
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
const app = {
data() {
return {
use: false
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
<script>
const HelloVueApp = {
data() {
return {
ok: true,
message: 'RUNOOB!!',
id: 1
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
const app = {
data() {
return {
seen: true /* 改为false，信息就无法显示 */
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
v-if 这个属性主要是来干什么的呢,它的用途是哪些？
v-if使用一般有两个场景：
- 多个元素 通过条件判断展示或者隐藏某个元素，或者多个元素
- 进行两个视图之间的切换
下面写了两个例子，是Vue官方的简单实例。
- 第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。
- 第二个例子实现了，点击按钮实现两个视图的切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue中v-if的常见使用</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){
//创建一个vue实例
var app = new Vue({
el: '#app',
data: {
type:'C',
loginType:'username'
},
methods:{
changeloginType(){
let self = this;
if(self.loginType=='username'){
self.loginType = ''
}else{
self.loginType = 'username'
}
}
}
})
}
</script>
<body>
<div id="app">
<div style="color:red">v-if的简单实用</div>
<template>
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type=='B'">
B
</div>
<div v-else>
C
</div>
</template>
<div style="color:green">v-if的弹框切换</div>
<template v-if="loginType === 'username'">
<label>用户名：</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>密码：</label>
<input placeholder="Enter your email address" key="email-input">
</template>
<button @click="changeloginType">切换状态</button>
</div>
</body>
</html>
效果图：
另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p><a v-bind:href="url">菜鸟教程</a></p>
</div>
<script>
const HelloVueApp = {
data() {
return {
url: 'https://www.runoob.com'
}
}
}
Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
在这里参数是监听的事件名。
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
const app = {
data() {
return {
message: 'Runoob!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
以下实例在用户点击按钮后对字符串进行反转操作：
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
const app = {
data() {
return {
message: 'Runoob!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>