初入vue.js，vue.js筆記
阿新 • • 發佈：2019-01-25
1、vue.js簡介
Vue.js 是用於構建互動式的 Web 介面的庫。它提供了 MVVM 資料繫結和一個可組合的元件系統，具有簡單、靈活的 API。 從技術上講， Vue.js 集中在 MVVM 模式上的檢視模型層，並通過雙向資料繫結連線檢視和模型。實際的 DOM 操作和輸出格 式被抽象出來成指令和過濾器。相比其它的 MVVM 框架，Vue.js 更容易上手。
Vue.js 是一個用於建立 Web 互動介面的庫。它讓你通過簡單而靈活的 API 建立由資料驅動的 UI 元件。
本章使用的為獨立版本，直接下載並用 <script>
Vue 會被註冊為一個全域性變數.
2、start
2.1、Hello World !
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="/vue/vue-dev/dist/vue.js"></script> </head> <body> <div id="app1"> {{message}} </div> </body> <script type="text/javascript"> new Vue({ el: "#app1", data:{ message:"Hello World!" } }) </script> </html>
（注：這裡有一個需要注意的地方，vue.js的程式碼必須在要操作的Dom之後，不然會無效，如果是寫在外部js檔案內，頁面引用時也需要注意這裡點！）
2.2、雙向繫結
<div id="app2">
{{message}}
<input v-model="message">
</div>js程式碼：
new Vue({
el: "#app2",
data:{
message:"Hello Vue.js!"
}
})當在文字框內進行輸入時，與其v-mode=“”l內名字所對應的名字的值都會改變。（v-model指令只能用於文字框才會有效）
2.3、列表渲染
<div id="app3">
<ul>
<li v-for="todo in todos">{{todo.rname}}</li>
</ul>
</div>js程式碼：
<!-- arr為模擬後臺傳入前臺的json字串 -->
var arr=[
{"annotation":"具有最高許可權","rname":"超級管理員","rid":"001"},
{"annotation":"管理自己的一切部落格","rname":"博主","rid":"002"},
{"annotation":"負責學生的生活，學習及心裡問題","rname":"輔導員","rid":"003"},
{"annotation":"講課的","rname":"教師","rid":"004"},
{"annotation":"聽課","rname":"學生","rid":"005"}
]
new Vue({
el: "#app3",
data:{
roles:arr
}
});2.4、事件的繫結
<div id="app4">
<p>{{message}}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div> js程式碼：
new Vue({
el:"#app4",
data:{
message: "Hello Vue.js!"
},
methods:{
reverseMessage: function(){
alert(this.message);
}
}
});若方法需要加引數，直接在方法名後加上括號填入引數即可： v-on:click="reverseMessage(12)"，js程式碼中也要加入對應的引數.