1. 程式人生 > >Vue.js(一)了解Vue

Vue.js(一)了解Vue

code 視圖 模式 data img app 了解 eight 整合

什麽是Vue?

1.Vue.js是一個構建數據驅動的web界面的庫。類似於Angularjs,在技術上,他重點集中在MVVM模式的View層,非常容易學習,非常容易和其他的庫或已有的項目整合。

2.Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。

3.Vue.js的核心是一個響應的數據綁定系統,他讓數據與DOM保持同步非常簡單。

Vue的安裝:

三種:

1.獨立版版本

2.CDN

3.NPM

Vue起步

Vue的功能

技術分享

數據渲染:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <
meta charset="utf-8"> 5 <title>Vue 測試實例 - 菜鳥教程(runoob.com)</title> 6 <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <p>{{ message }}</p> 11 </div> 12 13 <script> 14 new Vue({
15 el: #app, 16 data: { 17 message: Hello Vue.js! 18 } 19 }) 20 </script> 21 </body> 22 </html>

運行效果:

技術分享

Vue構成:

技術分享

el : Vue裝載到什麽位置

template  : 裝載什麽東西

data  :  數據

Vue.js(一)了解Vue