一、Vue模板语法，默认语法的功能就是前端渲染，前端渲染即使把数据填充到html标签中。数据（来自服务器） + 模板（html标签） = 前端渲染（产物是静态html内容）。
前端渲染的三种方式。
1）、原生js拼接字符串。基本上就是将数据以字符串的方式拼接到html标签中。缺点是不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2）、使用前端模板引擎。它拥有自己的一套模板语法规则。优点是大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点是没有专门提高事件机制。
3）、使用vue特有的模板语法。包含差值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<!--
Vue的基本使用步骤
1）、需要提供标签用于填充数据。
2）、引入vue.js库文件。
3）、可以使用vue的语法做功能了。
4）、把vue提供的数据填充到标签。使用插值表达式{{}}，作用就是将数据填充到指定的标签的位置。
-->
<!-- {{}}叫做插值表达式，将数据填充到html标签中，插值表达式支持基本的计算操作。-->
<div id="app">
<div>{{msg}}</div>
<div>{{'I love you ' + msg}}</div>
<div>{{1 + 2 + 3}}</div>
</div>
<script src="vue.js" type="text/javascript"></script>
<script type="text/javascript">
// Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。
// 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。
// Vue所做的工作也就是把数据填充把页面的标签里面。
var vm = new Vue({
// el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。
el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。
// data模型数据，值是一个对象。
data: { // 用于提供数据。
msg: 'hello Vue!'
}
});
</script>
</body>
</html>
二、Vue模板语法，什么是指令？
1）、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。
2）、Vue指令的本质就是自定义属性。
3）、Vue指令的格式，以v-开始，比如v-cloak。指令的名称取决于设计者。
三、Vue模板语法，v-cloak指令用法。
1）、插值表达式存在的问题，就是闪动。
2）、如果解决该问题，使用v-cloak指令，可以解决闪动的问题。
3）、解决该问题的原理，先隐藏，替换好值之后再显式最终的值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> <style type="text/css"> [v-cloak] { display: none; } </style> </head> <body> <!-- v-cloak指令的用法。 1）、需要提高样式。 [v-cloak] { display: none; } 2）、在插值表达式所在的标签中添加v-cloak指令。 3)、原理，先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显式最终的结果，此时就不会显式{{}}这种闪动效果。 --> <div id="app" v-cloak> <div>{{msg}}</div> </div> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。 // Vue所做的工作也就是把数据填充把页面的标签里面。 var vm = new Vue({ // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。 // data模型数据，值是一个对象。 data: { // 用于提供数据 msg: 'hello Vue!' } }); </script> </body> </html>
四、Vue模板语法，v-text、v-html、v-pre数据绑定指令用法。
1）、v-text填充纯文本。特点一、相比较插值表达式更加简洁。不存在闪动问题，比插值表达式好使的哦。
2）、v-html填充html片段。特点一、存在安全问题。特点二、本网站内部数据可以使用，来自第三方数据不可以用。
3）、v-pre填充原始信息。特点一、显式原始信息，跳过编译过程，分析编译过程。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> </head> <body> <div id="app"> <div>{{msg}}</div> <!-- v-text没有闪动问题的，用户体验更好，比插值表达式更加好使 --> <div v-text="msg"></div> <!-- 内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击 --> <div v-html="msg2"></div> <!-- 显式原始信息，跳过编译过程(分析编译过程) --> <div v-pre>{{msg}}</div> </div> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。 // Vue所做的工作也就是把数据填充把页面的标签里面。 var vm = new Vue({ // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。 // data模型数据，值是一个对象。 data: { // 用于提供数据 msg: 'hello Vue!', msg2: '<h1>hello Vue!</h1>', //可以使用v-html标签展示html代码。 } }); </script> </body> </html>
五、Vue模板语法，双向数据绑定。
MVVM设计思想，最只要的理念就是分治，把不同的功能代码放到不同的模块，通过特定的方式建立关联。
1）、M指的是Model，就是data里面的数据，提供数据的。Model通过VM的Data Bindings数据绑定View。
2）、V指的是View，就是所写的模板Dom元素，提供页面展示效果的。View通过VM的DOM Listeners事件监听Model。
3）、VM指的是View-Model，就是控制逻辑，实现控制逻辑将两者结合到一起。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello world</title> </head> <body> <div id="app"> <div>{{msg}}</div> <!-- 主要是用于表单输入域中。 --> <!-- 双向数据绑定分析，方向一、页面影响数据，方向二、数据影响页面。 --> <!-- 用户修改页面内容数据会改变，数据改变了影响插值表达式的内容页面改变。 --> <div> <input type="text" v-model="msg" /> </div> </div> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> // Vue代码运行原理分析，概述编译过程的概念（Vue语法->原生语法），就是Vue代码经过Vue框架变成了原生js代码。 // 创建一个Vue的变量vm，存储Vue的实例，提供一个参数，是对象形式的，并且这个对象包含两个重要的属性el、data。 // Vue所做的工作也就是把数据填充把页面的标签里面。 var vm = new Vue({ // el元素的挂载位置，值可以是CSS选择器或者DOM元素，挂载就是将数据关联到页面的某个标签上。 el: '#app', // el是告诉Vue把数据填充到那个位置，这里通过id选择器进行绑定到那个标签。 // data模型数据，值是一个对象。 data: { // 用于提供数据 msg: 'hello Vue!', } }); </script> </body> </html>
