1、vue模闆簡介
vue.js使用基于HTML的模闆文法，可以将DOM綁定到Vue執行個體中的資料。模闆就是{{}}，用來資料綁定，顯示在頁面上，也稱為Mustache文法。
2、資料綁定的方式
a.雙向綁定
v-model
b.單向綁定
方式1：使用兩對大括号{{}}，頁面上可能會出現閃爍的問題（可以使用v-cloak解決）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>屬性</title>
6 <!-- 引入vue-->
7 <script src="../vue/vue.js"></script>
8 <script>
9 window.onload=function(){
10 new Vue({
11 el:'#hello',
12 //data用來存儲資料
13 data:{
14 msg:'歡迎來到王者榮耀！'
15 },
16 //methods用來存儲方法
17 methods:{
18
19 }
20 })
21 }
22 </script>
23 <style>
24 /*v-cloak必須配置css樣式才生效*/
25 [v-cloak]:{
26 display: none;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="hello">
32 <h3>這是一款騰訊遊戲。<span v-cloak>{{msg}}</span></h3>
33 </div>
34 </body>
35 </html> 方式2：使用v-text、v-html（不會出現閃爍的問題）（v-html可以識别标簽，v-text不識别标簽）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>屬性</title>
6 <!-- 引入vue-->
7 <script src="../vue/vue.js"></script>
8 <script>
9 window.onload=function(){
10 new Vue({
11 el:'#hello',
12 //data用來存儲資料
13 data:{
14 msg:'歡迎來到<text>騰訊出品的</text>王者榮耀！'
15 },
16 //methods用來存儲方法
17 methods:{
18
19 }
20 })
21 }
22 </script>
23 <style>
24 /*v-cloak必須配置css樣式才生效*/
25 [v-cloak]:{
26 display: none;
27 }
28 </style>
29 </head>
30 <body>
31 <div id="hello">
32 <h3 v-text='msg'></h3>
33 <h3 v-html='msg'></h3>
34 </div>
35 </body>
36 </html> ![vue項目：npm打包-S和-D差別：[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)