Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vuejs 采用自底向上增量開發的設計。Vuejs 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vuejs 完全有能力驅動采用單文件組件和 Vuejs 生態系統支持的庫開發的復雜單頁應用。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。有部分功能和Jquery是差不多的，Vuejs能做的，Jquery也能做,Vuejs在實現相同功能的時候更簡單.
1 、vuejs數據綁定
- 在
Vuejs中變量在html中綁定標簽是兩個花括號{{變量}} - 在
vuejs中的獲取頁面中id不可以放在body和html標簽里 vuejs啟用的區域就在id為demo的div塊中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs簡單示例</title> <!--引入開發版本vue.js，在開發版本中會有很多友好的提示--> <script src='./vue.js'></script> </head> <body> <!--定義一個id為demo的div--> <div id="demo"> <!--此處的msg為在vuejs中定義的變量，放在兩個花括號中--> <h1>Hello {{msg}}</h1> </div> <script> <!--實例化vuejs--> new Vue({ <!--el指定的id為css選擇器--> el:'#demo', <!--我們的變量統統放到data中--> data:{ <!--此處聲明的變量msg內容為實驗--> msg:'實驗' } }) </script> </body> </html>
上面的代碼實際上初始化了Vue，我們看里面兩個屬性；el表示在html中哪個部分起作用，語法類似jquery的節點選擇器，在這里我們看到它選擇了一個ID。
data屬性就是我們要定義變量的地方：
msg:'實驗' 我們定義了一對鍵值，很好理解。
2、 vuejs數據雙向綁定
v-model指令在表單控件元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。vuejs雙向綁定並不能適用於所有的html表單，限制為input、select、textarea、components。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs簡單示例</title> <!--引入開發版本vue.js，在開發版本中會有很多友好的提示--> <script src='./vue.js'></script> </head> <body> <!--定義一個id為demo的div--> <div id="demo"> <!--此處的msg為在vuejs中定義的變量，放在兩個花括號中--> <h1>Hello {{msg}}</h1> <!--此處我們創建一個文本框並定義它的v-model的屬性的內容為我們在vue中定義的msg--> <input type="text" v-model="msg"> </div> <script> <!--實例化vuejs--> new Vue({ <!--el指定的id為css選擇器--> el:'#demo', <!--我們的變量統統放到data中--> data:{ <!--此處聲明的變量msg內容為實驗--> msg:'實驗' } }) </script> </body> </html>
我們在改變文本框內容的同時，在h1標簽中的msg也同時會改變。以后我們說雙向綁定，都是指的是類似input這樣的，自帶change事件的表單項目。
3、 vuejs中的v-text屬性
在vuejs中可以使用v-text屬性來控制整個標簽的內容綁定，在上面中我們使用了{{msg}}在頁面中綁定數據，另外我們也可以使用vuejs的v-text屬性來綁定數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Vuejs簡單示例</title> <!--引入開發版本vue.js，在開發版本中會有很多友好的提示--> <script src='./vue.js'></script> </head> <body> <!--定義一個id為demo的div--> <div id="demo"> <!--此處的msg為在vuejs中定義的變量，放在兩個花括號中--> <h1>Hello {{msg}}</h1> <!--此處我們把v-text屬性放到span標簽中--> <span v-text='msg'>hello shiyanlou</span> </div> <script> <!--實例化vuejs--> new Vue({ <!--el指定的id為css選擇器--> el:'#demo', <!--我們的變量統統放到data中--> data:{ <!--此處聲明的變量msg內容為實驗--> msg:'實驗' } }) </script> </body> </html>
瀏覽結果可以看到在span標簽中的內容並沒有被輸出，輸出的是我們在vue定義的變量msg的內容。v-text屬性會把整個標簽的內容綁定為我們定義的內容。