上节课模板是写在Vue的实例里面的，现在我们可以把它恢复出来。写在挂载点的内部，看起来会舒服一点。Vue的数据项，可以配置任意的数据名字。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况--> <script type="text/javascript" src="./vue.js"></script> </head> <body> <!--挂载点，模板，实例之间的关系--> <div id="root"> <!-- <h1>hello {{msg}}</h1> --> <h1>{{number}}</h1> </div> <!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript"> new Vue({ // 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例 // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素) el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div> // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素 // 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区 // 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>', data: {//这个Vue实例里面会有一些数据 msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去 //使用这个Vue实例里面的这个msg数据了。 number:123// } }) //在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM //var dom = document.getElementById("root") //dom.innerHTML = "hello world" //在Vue里面写代码和以前不一样 //在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和 //这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面 </script> </body> </html>
{{number}}插值表达式，把number这个值插入到h1之中。这个语法就是插值表达式。v-text这个指令，它的意思是h1它的内容由number这个变量决定。v-text是Vue之中的一个指令。这个指令里面跟的东西是一个变量，它告诉h1你要显示的内容就是number这个变量。这个时候页面的内容依然是123。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况--> <script type="text/javascript" src="./vue.js"></script> </head> <body> <!--挂载点，模板，实例之间的关系--> <div id="root"> <!-- <h1>hello {{msg}}</h1> --> <h1 v-text="number"></h1> </div> <!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript"> new Vue({ // 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例 // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素) el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div> // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素 // 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区 // 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>', data: {//这个Vue实例里面会有一些数据 msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去 //使用这个Vue实例里面的这个msg数据了。 number:123// } }) //在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM //var dom = document.getElementById("root") //dom.innerHTML = "hello world" //在Vue里面写代码和以前不一样 //在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和 //这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面 </script> </body> </html>
v-html也可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况--> <script type="text/javascript" src="./vue.js"></script> </head> <body> <!--挂载点，模板，实例之间的关系--> <div id="root"> <!-- <h1>hello {{msg}}</h1> --> <h1 v-html="number"></h1> </div> <!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript"> new Vue({ // 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例 // el:"" 我让Vue这个实例去接管页面上的哪一个element(元素) el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div> // el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素 // 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区 // 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>', data: {//这个Vue实例里面会有一些数据 msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去 //使用这个Vue实例里面的这个msg数据了。 number:123// } }) //在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM //var dom = document.getElementById("root") //dom.innerHTML = "hello world" //在Vue里面写代码和以前不一样 //在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和 //这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面 </script> </body> </html>