MyBlog

# 模板语法

# 简介

相信模板语法大家多少都有所接触，例如百度模板引擎、ejs (opens new window) 等等。同样 Vue.js 也使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析，通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时，你可以写在 HTML 元素上的操作语法，让你开发更高效，例如：绑定样式，循环出元素列表等。

# 双大括号表达式

在前端的发展历程中，为了提高开发效率，诞生了很多模板引擎，方便渲染元素或者绑定数据，很多引擎模板都采用 的语法进行插值。同样 Vue.js 也借鉴了 Angular.js 的双花括号的方式，进行向页面输出数据和调用对象方法。让我们感受一下双大括号表达式，在 IED 中新建一个.html 后缀文件，引入 Vue.js，输入以下代码，运行（open with Preview 或 Mini Browser）

代码：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 数据双向绑定 -->
    <div id="app">
      <input type="text" v-model="msg" />
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app", //el: 挂载点

        data: {
          //data:数据选项

          msg: "hello",
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

双大括号中的 ，绑定至底层 Vue 实例的数据，在浏览器中就被渲染成实例 data 选项中 msg 的值。

运行结果：

图片描述

# 插值

# 文本

在 Vue.js 中数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<div id="app">msg：{{msg}}</div>
1

双大括号中的值将会被替代为对应 data 对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

但是通过使用 v-once 指令你也能执行一次性地插值，当数据 改变时，插值处的内容 不会更新。但是你需要注意一下，该元素节点下面其他数据的绑定，数据改变，内容也不会更新，所以，注意代码块的划分。

<p v-once>msg：{{msg}}</p>
1

# 原始 HTML

上面的双大括号表达式会将数据解释为普通文本，即使你的数据为 HTML 元素，也不会渲染成对应的标签元素，只能渲染成普通文本，而非 HTML 代码，例子：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 数据绑定 -->
    <div id="app">
      <p>{{msg}}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app", //el: 挂载点
        data: {
          //data:数据选项
          msg: "<h1>hello syl</h1>",
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

运行结果：

图片描述

上面明明我们写的是 HTML 标签，为什么没渲染出来，那就是因为双大括号表达式会将数据解释为普通文本。

# v-html

有的同学会问，有的需求就是要把标签渲染出来，那么我们就需要认识另外一个指令 v-html，使用它我们就能将它正确渲染，试一试，代码：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- v-html 渲染html元素-->
    <div id="app" v-html="msg"></div>
    <script>
      var app = new Vue({
        el: "#app", //el: 挂载点
        data: {
          //data:数据选项
          msg: "<h1>hello syl</h1>",
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

运行结果：

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--{{变量}}:插值,让此处的文本和data里面的变量进行绑定,不依赖某个标签-->
    <h1>{{info}}</h1>
    <!--v-text=变量,让元素的文本内容和变量进行绑定-->
    <p v-text="info"></p>
    <!--v-html=变量,让元素的标签内容和变量进行绑定-->
    <p v-html="info"></p>
</div>
<script src="vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            info:"文本相关练习<b>加粗</b></b>"
        }
    })
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 特性

双大括号语法不能作用在 HTML 特性（标签属性）上，需要对标签属性操作，应该使用 v-bind 指令：

<div v-bind:class="syl-vue-course"></div>
1

HTML 标签属性为布尔特性时，它们的存在表示为 true，v-bind 工作起来略有不同，在这个例子中：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 布尔特性绑定-->
    <div id="app">
      <input type="checkbox" v-bind:checked="isChecked" />
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          isChecked: false, // isChecked是否选中boolean
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

运行结果：

此处输入图片的描述

注意： 如果 isChecked 的值是 null、undefined 或 false，则 checked 特性甚至不会被包含在渲染出来的 <input> 元素中，我们将 data 中的 isChecked 值改为 null

var app = new Vue({ el:'#app', data:{ isChecked:null // isChecked是否选中 } })
1

# javascript 表达式

上面，我们只进行了绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，感受强大的模板语法力量吧！例子：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- javascript表达式-->
    <div id="app">
      <!-- 运算符 -->
      <p>num + 24 = {{num + 24}}</p>
      <p> 加法:{{2+3}} </p>
	  <p> 减法:{{2-3}} </p>
	  <p> 乘法:{{2*3}} </p>
	  <p> 除法:{{3/2}} </p>
	  <p> 取余:{{10%2}} </p>
      <!-- 三元表达式 -->
      <p>Are you ok? {{ok ? 'I am ok !':'no'}}</p>
      <!-- 字符串操作 -->
      <p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  </p>
      <!-- 对象方法直接调用 -->
      <p>名字倒过来写：{{name.split('').reverse().join('')}}</p>
      <!-- 属性值运算操作 -->
      <p v-bind:class="'col'+colNum">syl</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          num: 20,
          ok: true,
          name: "实验楼",
          colNum: "12",
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

运行结果：

此处输入图片的描述

# 指令

指令 (Directives) 是带有 v- 前缀的特殊特性。以表示它们是 Vue 提供的特殊特性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

常见的Vue指令:v-if v-for v-on v-bind v-model v-cloak等

# 参数(v-bind 和v-on)

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性，在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定，例子：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 参数-->
    <div id="app">
      <a v-bind:href="url">实验楼</a>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          url: "https://www.lanqiao.cn",
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

另外一个例子，v-on 指令，用于监听 DOM 事件，例子：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 参数-->
    <div id="app">
      <p>我叫：{{name}}</p>
      <!-- handleClick 使我们在实例 methods 中写的方法 -->
      <button v-on:click="handleClick">点我</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          name: "实验楼",
        },
        methods: { /* 必须在methods里,创建Vue函数 */
          //实例方法对象
          handleClick: function () {
            this.name = this.name.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

运行结果：

此处输入图片的描述

注意：

  • 方法必须写在methods代码段中
  • 方法体中访问数据代码段中声 明的变量，前面加this
  • 方法和属性声明方式的差异在于 function(){}
  • 方法和属性调用的差异是，名称后加小括号
    {{msg}} {{XX()}}
    1

# Vue解析数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>hello vue</title>
		
		<!-- 导入js -->
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app"> 
			<h1>
				vue解析变量：{{str}} {{str.length}} 
				{{str.replace('l','666')}} {{str.concat(123)}}
				{{num}}  {{num+10}} {{num/3}} {{num%4}}
				{{num>5?1:0}} 	{{num--}}
			</h1>
			<h2>vue解析对象：{{p.name}} {{p.age}} </h2>
			<h2>vue解析数组：{{arrays[1].name}} {{arrays[0].age}} </h2>
			
			<h2>vue调用函数的语法:{{sout()}} </h2>
			<button v-on:click="add(1,2)">点我</button>
			<button @click="add(1,2)">点我</button>
		</div>
		<script>
			var vm = new Vue({
				el:"#app", //数据挂载点
				data:{
					str:"hello vue",
					num:10,
					p:{//vue定义对象
						name:"lisi",
						age:20
					},
					arrays:[//vue定义数组
						{
							name:"zhangsan",
							age:20
						},
						{
							name:"wangwu",
							age:30
						}
					]
				},
				methods:{//vue定义方法
					sout:function(){
						console.log(100);
					},
					add:function(a,b){ //含参方法
						console.log(a+b);
					}
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# 三种data值的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue里data的三种写法</title>
		<script src="vue.js"></script>
		
	</head>
	<body>
		<div id="app">{{msg}}</div>
		<script>
		
				new Vue({
					el : "#app" ,
					// 数据的三种写法:标准写法
					// 第一种形式
					// data : {
					// 	msg : "hello vueeee~~~"
					// }
					// 第二种形式:定义函数,返回对象
					// data:function(){
					// 	return {
					// 		msg:"hi~vue"
					// 	}
					// },
					// 第三种形式:定义函数,es6的简写法
					data(){
						return {
							msg:"vue hi~"
						}
					}
				});
	
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# v-model

v-model="变量", 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会设计到双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--v-model="变量"让控件的value值和变量进行双向绑定,变量影响页面 同时页面的改动也会影响变量-->
    <input type="text" v-model="info">
    {{info}}
    <h1>注册表单</h1>
    <form action="">
        用户名:<input type="text" v-model="user.username"><br>
        密码:<input type="password" v-model="user.password"><br>
    </form>
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "div",
        data: {
            info: "双向绑定",
            user:{
                username: "",
                password: ""
            }

        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# v-text

作用: 直接展现解析数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <!--{{变量}}:插值,让此处的文本和data里面的变量进行绑定,不依赖某个标签-->
    <h1>{{info}}</h1>
    <!--v-text=变量,让元素的文本内容和变量进行绑定-->
    <p v-text="info"></p>
</div>
<script src="vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            info:"文本相关练习"
        }
    })
</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 闪现 v-cloak

F12打开Chrome的调试窗口，选中NetWork，在选择Slow3G，观察问题。

遇到插值表达式加载时闪烁对用户不好的现象，那怎么解决呢？

  • 在标签中增加指令：v-cloak
  • 增加style标签，[v-cloak]属性选择器，设置先不展示display:none;

实现在页面未渲染完成时先隐藏标签，渲染完成后在展示，这样就解决了闪烁问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-clock属性</title>
		
		<style>
			/* 定义属性样式 */
			[v-cloak]{
				/*将元素进行隐藏  */
				display: none;
			}
		</style>
	</head>
	<body>
		这个指令保持在元素上直到关联实例结束编译。编译成功之后属性消失
		<div id="app" v-cloak>
			<h1>v-clock属性</h1>
			<h3>{{ hello }}</h3>
		</div>
		
		
		<!-- 引入js -->
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				//element 元素
				el: "#app",
				data: {
					hello: "helloVue"
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# v-pre 指令

用法: 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

编辑html: 在这里插入图片描述

# 动态参数

上面属性或者事件我们都是写死的，其实在 Vue 它也可以是动态的。

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 动态参数-->
    <div id="app">
      <p>我叫：{{name}}</p>
      <button v-on:[event]="handleClick">点我</button>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          name: "实验楼",
          event: "click",
        },
        methods: {
          handleClick: function () {
            this.name = this.name.split("").reverse().join("");
          },
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

event 此时的值为 click ，那我们点击按钮时就会触发事件回调，运行结果和上面一样。

# 修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，大致分为三类，后面课程我们会一一接触到：

  • 事件修饰符
  • 按键修饰符
  • 系统修饰符

例如，事件修饰符中的.prevent修饰符和原生 event.preventDefault() 效果一样，可以阻止事件默认行为，在表单中点击提交按钮，就会发生页面跳转，但是使用了 .prevent 就不会发生跳转，例如：

<!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>syl-vue</title>
    <!-- 通过cdn方式引入 vue.js -->
    <script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script>
  </head>
  <body>
    <!-- 指令 修饰符-->
    <div id="app">
      <form action="/" v-on:submit.prevent="submit">
        <button type="submit">提交</button>
      </form>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {},
        methods: {
          submit: function () {
            console.log("成功提交！");
          },
        },
      });
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

没有加修饰符，发生默认跳转，运行效果：

此处输入图片的描述

使用了 .prevent ，阻止了默认跳转，运行结果：

此处输入图片的描述

# 指令缩写

v- 是 Vue.js 中特定的标志，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为时，v- 前缀很有帮助，但是频繁使用到，也会让人感觉不到代码的简洁之道，就会感到不是太人性化。同时，在构建由 Vue 管理所有模板的单页面应用程序时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

# v-bind---属性绑定

上面例子中我们使用了 v-bind 绑定属性

<a v-bind:href="url">实验楼</a>
1

我们可以简写为：

<a :href="url">实验楼</a>
1

同样的使用 v-bind 绑定的其他属性也可以简写：

v-bind:class="className" 简写为 :class="className" v-bind:value="myValue" 简写为
:value
<!--v-bind属性绑定-->
<input type="text" v-bind:value="msg">
<!--v-bind属性绑定 简写-->
<input type="text" :value="msg">
1
2
3
4
5
6

# v-on----事件绑定

上面 v-bind 指令提供简写，同样 v-on 指令也提供简写，但是与 v-bind 有一些差异，v-on: 使用 @ 简写,调用的方法必须声明在Vue里面的methods里面.

<!-- 完整语法 -->
<button v-on:click="handleClick">点我</button>
<!-- 缩写 -->
<button @click="handleClick">点我</button>
1
2
3
4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="按钮1" v-on:click="f()">
    <input type="button" value="按钮2" @click="ff()">
    <!--两种写法等价-->
    {{info}}
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{info:"事件绑定"},
        methods:{
            f:function (){
                v.info="按钮开始点击了";
            },
            ff(){
                v.info="按钮早就点击了"
            },
        },
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# Vue写计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" v-model="n1">
    <input type="text" v-model="n2">
    <input type="button" value="加" @click="f('+')">
    <input type="button" value="减" @click="f('-')">
    <input type="button" value="乘" @click="f('*')">
    <input type="button" value="除" @click="f('/')">
    <h1>{{result}}</h1>
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            n1:"",n2:"",result:""
        },
        methods:{
            f(x){
                //eval() 此方法可以将字符串以代码的形式运行
               v.result = eval(v.n1+x+v.n2);
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 小结

可以看到Vue这类为何称为框架，名副其实，当之无愧。写javaScript时，我们要先去学习其复杂的api（document.getElementById()），写jQuery时，又学一套复杂的api(一堆的选择器)，特别它的写法虽然简洁，却晦涩难懂，需要死记大量英文单词，初学者极易写错，门槛很高，就现在很多企业的程序员依然被绊倒，说不明白，讲不清楚，使用中bug满天飞，一堆糊涂虫。

而Vue框架结构搭建好，就剩下修改数据和展示数据，而其结构非常简单，一看就会，如调用信息{undefined{message}}，就是这么豪横，还等什么，快速拥抱它吧。

← 计算属性和侦听属性与过滤器 →