一、Vue介紹 二、使用VUE 1、引入vue.js文件 2、通過下麵的代碼展示用，創建一個Vue的實例，然後通過應用的id嵌入根元素，將數據放入一個對象data中，並且將表達式傳入div中{{msg}}（一定註意必須是雙大括弧） 三 、指令 指令：帶有首碼 v-，以表示它們是 Vue 提供的特殊特 ...
一、Vue介紹
過去的十年，我們的網頁變得更加動態化和強大，是因為有JAVAScript，我們已經把很多傳統服務端代碼放到瀏覽器中這樣就產生了成千上萬行的JavaScript代碼，他們鏈接了各種各樣的HTML和CSS文件，但缺乏正規的組織形式，這也是為什麼越來越多的開發者使用JavaScript框架，例如：angular、REACT和VUE這樣的框架。
這裡我們就說一下vue，vue是一款有好的、多用途且高性能的JavaScript框架，它能夠幫助你創建可維護性和課測試性更強的代碼庫，vue是漸進式的JavaScript框架，也就是說如果你已經有一個現成的服務端應用你可以將vue作為該應用的一部分嵌入其中，帶來更加豐富的交互體驗或者如果你希望將更多的業務邏輯放到前端來實現那麼vue的核心庫機器生態系統也可以滿足你的各式需求。
與其他框架相同，vue允許你講一個網頁分割成可復用的組件，每個組件都包含屬於自己的HTML、CSS、JavaScript以用來渲染網頁中相應的地方。
二、使用VUE
1、引入vue.js文件
//下載後導入 <script src=vue.js></script>
2、通過下麵的代碼展示用，創建一個Vue的實例，然後通過應用的id嵌入根元素，將數據放入一個對象data中，並且將表達式傳入div中{{msg}}（一定註意必須是雙大括弧）
//展示的HTML <div id="app"> {{ msg}} </div> //建立vue對象，固定格式 new Vue({ el: '#app', //通過id嵌入元素，el是元素ELEMENT的縮寫 data: { msg: 'Holle Word!' } })
三 、指令
指令：帶有首碼 v-，以表示它們是 Vue 提供的特殊特性，通過屬性來操作元素。
1、v-model
v-model:實現了數據和視圖的雙向綁定 分成了3步： 1）把元素的值和數據相互綁定 2）當輸入內容時，數據同步發生變化，視圖 ---數據的驅動 3）當改變數據時，輸入內容也會發生變化，數據-》視圖的驅動 例子：利用vue中的v-model把input標簽與data數據中msg屬性進行雙向綁定，msg可以有預設值也可以預設為空！ <div id="app"> <input type="text" v-model="msg"> <h1>{{msg}}</h1> </div> <script> new Vue({ el:"#app", data:{ msg:"Holle Word !" } })
2、v-bind
// 綁定元素的屬性來執行相應的操作，滑鼠懸浮幾秒後顯示出綁定的提示信息 <div id="app"> <a v-on:href="url">我想去百度</a> </div> <script> new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ url: "http://www.qq.com" }, }) </script>
3、v-text
// v-text 在元素中插入文本，比較單一 <div id="app"> <h1 v-text="msg">{{msg}}</h1> </div> <script> new Vue({ el:"#app", data:{ msg:"Holle Word !" } })
4、v-html
// v-html:在元素不中不僅可以插入文本，還可以插入標簽，多樣化 <div id="app"> <h1 v-html="hd"></h1> </div> <script> new Vue({ el:"#app", data:{ hd: "<input type='button' value='提交'>", str: "我要發財!" } })
5、v-if -- v-show -- v-on
// v-if: 根據表達式的真假值來動態插入和移除元素，下麵的例子演示了我們不僅可以把數據綁定到 DOM 文本或特性，還可以綁定到 DOM 結構。此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
// v-show:根據表達式的真假值來隱藏和顯示元素
<div id="app"> <p v-if="pick">我是劉德華</p> <p v-else>我是張學友</p> <p v-show="temp">我是趙本山</p> <p v-show="ok">你喜歡我嗎？</p> </div> <script> var vm = new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ pick: false, temp: true, ok: true } }) <!--不屬於vue，單純是js的語法，沒過多少時間就會改變當前狀態--> window.setInterval(function(){ vm.ok = !vm.ok; },1000)代碼顯示
// 對迴圈的數據進行刪除v-on點擊事件（也可以寫成：@click） <div id="app"> <input type="button" value="點我吧!" v-on:click="show()"> </div> <script> new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ arr: [11,22,3344,55], }, methods: { show: function () { this.arr.pop(); } } }) </script>v-on和v-show合用刪除事件
6、v-for
根據變數的值來迴圈渲染元素
<div id="app"> <ul> <li v-for="item in todos"> {{ item.text }} </li> </ul> </div> var app = new Vue({ el: '#app', data: { todos: [ { text: '學習 JavaScript' }, { text: '學習 Vue' }, { text: '整個牛項目' } ] } })普通迴圈
// 迴圈列表有兩個參數，一個為元素中的數據，另一個為索引值 <div id="app"> <ul> <li v-for="(item,index2) in arr"> {{item}}: {{index2}} </li> </ul> </div> <script> new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ arr: [11,22,33,44,55], } }) </script>迴圈列表
// 迴圈字典時，有三個參數，元素中的value值，key，索引值 <div id="app"> <ul> <li v-for="(item,key,index) in obj"> {{item}}: {{key}}:{{index}} </li> </ul> </div> <script> new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ obj: {a:"張三",b:"李四",c:"王大拿",d:"謝大腳"}, }, }) </script>迴圈字典
// 迴圈數組中的對象，點出來（理解但是不知道怎麼表達，參考之前學的知識） <div id="app"> <ul> <li v-for="item in obj2"> {{item.username}} {{item.age}} {{item.sex}} </li> </ul> </div> <script> new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ obj2:[ {username: "jason"}, {age: 20}, {sex: "male"} ], }, }) </script>迴圈數組
對數組的操作：
push
pop
shift
unshift
splice
reverse
7、輸入信息表（low逼）
<div id="app"> <div> <p><input type="text" placeholder="姓名" v-model="username"></p> <p><input type="text" placeholder="年齡" v-model="age"></p> <p><input type="button" value="提交" v-on:click="add"></p> </div> <div> <table cellpadding="1" border="1" > <tr v-for="(item,index) in arr"> <td><input type="text" class="txt" v-model="item.username"></td> <td>{{item.age}}</td> <td>{{index}}</td> <td><input type="text" class="txt"></td> <td><input type="button" value="刪除" v-on:click="del(index)"></td> </tr> </table> </div> </div> <script> new Vue({ el:"#app", data:{ username:"", age:"", arr:[] }, methods:{ add:function () { this.arr.push({username:this.username,age:this.age}) console.log(this.arr); }, del:function (index) { this.arr.splice(index,1); } } }) </script>多個知識點結合
還有很多實例和知識點，請看官網https://cn.vuejs.org/v2/guide/index.html
相關博客：http://www.cnblogs.com/keepfool/p/5619070.html
http://www.cnblogs.com/zhaodagang8/category/1134528.html
