1）、原生js拼接字符串。基本上就是将数据以字符串的方式拼接到html标签中。缺点是不一样开发人员的代码风格差异很大，随着业务的复杂，后期的维护变得逐渐困难起来。
2）、使用前端模板引擎。它拥有本身的一套模板语法规则。优势是你们都遵循一样的规则写代码，代码可读性明显提升了，方便后期的维护。缺点是没有专门提升事件机制。
3）、使用vue特有的模板语法。包含差值表达式、指令、事件绑定、属性绑定、样式绑定、分支循环结构。javascript
<!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>
2、Vue模板语法，什么是指令？
1）、什么是自定义属性。自定义属性是区别于标准属性的，标准属性是标签自带的属性。
2）、Vue指令的本质就是自定义属性。
3）、Vue指令的格式，以v-开始，好比v-cloak。指令的名称取决于设计者。css
3、Vue模板语法，v-cloak指令用法。
1）、插值表达式存在的问题，就是闪动。
2）、若是解决该问题，使用v-cloak指令，能够解决闪动的问题。
3）、解决该问题的原理，先隐藏，替换好值以后再显式最终的值。html
<!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>
1）、v-text填充纯文本。特色1、相比较插值表达式更加简洁。不存在闪动问题，比插值表达式好使的哦。
2）、v-html填充html片断。特色1、存在安全问题。特色2、本网站内部数据能够使用，来自第三方数据不能够用。
3）、v-pre填充原始信息。特色1、显式原始信息，跳过编译过程，分析编译过程。前端
<!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>
MVVM设计思想，最只要的理念就是分治，把不一样的功能代码放到不一样的模块，经过特定的方式创建关联。
1）、M指的是Model，就是data里面的数据，提供数据的。Model经过VM的Data Bindings数据绑定View。
2）、V指的是View，就是所写的模板Dom元素，提供页面展现效果的。View经过VM的DOM Listeners事件监听Model。
3）、VM指的是View-Model，就是控制逻辑，实现控制逻辑将二者结合到一块儿。vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<!-- 主要是用于表单输入域中。 -->
<!-- 双向数据绑定分析，方向1、页面影响数据，方向2、数据影响页面。 -->
<!-- 用户修改页面内容数据会改变，数据改变了影响插值表达式的内容页面改变。 -->
<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>