一、vue介紹
vue是目前三大主流框架之一（React、Angular、Vue）
vue特點：
- 易用
- 靈活
- 高效
vue官網：官網鏈接
二，知識點
vue實例選項： el
注：不能 讓el直接管理html或者body，會報錯
-
作用：指定當前vue實例所管理的視圖
-
值：可以是id選擇器，其他選擇器，DOM元素（#div1，.div1等）
vue實例選項：data
-
作用：指定當前vue實例所管理的視圖中要使用的數據
-
值：可以是一個對象
-
訪問方法：實例對象.屬性名
-
特點：響應式數據（數據改變時，視圖層中的數據會自動發生變化）
三、用js中的數據渲染視圖層
- 引入vue.js
<script src="../js/vue.js"></script>
- 在視圖中建立一個div
<div id="div1"> <p></p> </div>
- js代碼
new Vue({ el:'#div1', //綁定視圖層的id data:{ msg:'Hello，vue' //渲染視圖層的數據 } })
- 綁定數據
<p>{{msg}}</p><!-- 綁定js中msg的數據 -->
- 運行截圖
- 完整代碼
<body> <div id="div1"><!-- 視圖層新建一個div --> <p>{{msg}}</p><!-- 綁定數據 --> </div> <script> new Vue({ el:'#div1', //綁定視圖層的id data:{ msg:'Hello，vue' //渲染視圖層的數據 } }) </script> </body>