引言
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，方便與第三方庫或既有專案整合，
1. 到官網下下vue.js
vue官網
我們這里使用開發版，它包含了許多警告提示資訊
新建一個檔案夾把vue.js放進去，然后創建一個html檔案命名為index.html
2. 第一個hello world
編輯index的內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="hello"> 6 <title>hello</title> 7 <script src="https://www.cnblogs.com/zhaosq/p/vue.js"></script> 8 </head> 9 <body> 10 <div id="app">{{msg}}</div> 11 <script> 12 new Vue({ 13 el: "#app", 14 data: { 15 msg: "hello world" 16 } 17 }) 18 </script> 19 </body> 20 </html>
稍后我們在解釋里面的各個意思，先使用瀏覽器打開index.html可以看到頁面顯示 hello world，
3. 掛載點、實體與模板
1 <script> 2 new Vue({ //一個vue實體 3 el: "#app", //制定vue實體的掛載點 4 data: { 5 msg: "hello world" 6 } 7 }) 8 </script> 9 <div id="app">{{msg}}</div> //掛載點標簽里邊的內容叫做vue實體的模板,{{}}里邊的屬性與vue實體的data里的屬性系結
4：vue提供了template模板標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="hello"> 6 <title>hello</title> 7 <script src="https://www.cnblogs.com/zhaosq/p/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"></div> 11 <script> 12 new Vue({ 13 el: "#app", 14 templeate:'<h1>{{msg}}</h1>', 15 data: { 16 msg: "hello world" 17 } 18 }) 19 </script> 20 </body> 21 </html> 22 注意template由于vue的校驗限制不能直接寫{{msg}}，必須寫到標簽里，所以我們加一個h1標簽， 23 重繪頁面，同樣顯示hello world，
5. v-text與v-html
1 v-text與v-html可以指定標簽內的內容，兩者的區別就是v-html會決議html標簽， 2 <html lang="en"> 3 <body> 4 <div id="app" v-text="msg"></div> 5 <script> 6 new Vue({ 7 el: "#app", 8 data: { 9 msg: "hello world" 10 } 11 }) 12 </script> 13 </body> 14 </html> 15 重繪頁面依然可以顯示 hello world 16 data: { 17 msg: "<h1>hello world</h1>" 18 } 19 再次重繪頁面依然可以顯示 <h1>hello world</h1> 20 將標簽改為v-html，重繪頁面可以正常顯示大號的：hello world，這是因為v-text不能決議html標簽
6：點擊事件@click
1 vue的點擊事件：@click （也可以使用v-on:click），我們當然是使用簡寫啦 2 <div id="app" @clike="myClick"></div> 3 <script> 4 new Vue({ 5 el: "#app", 6 data: { 7 msg: "hello world" 8 }, 9 methods:{ 10 myClick:function(){ 11 this.msg=this.msg+" click 666"; 12 } 13 } 14 }) 15 </script>
7. 屬性系結和資料雙向系結
1 v-bind:https://www.cnblogs.com/zhaosq/p/https://www.cnblogs.com/zhaosq/p/value="value"也可以使用簡寫 :value=https://www.cnblogs.com/zhaosq/p/“value” ，我們平時就使用簡寫， 單向系結 2 input標簽代碼改為<input v-model="value"/> 雙向系結 3 單向系結 4 <div id="app"> 5 <div>{{msg}}</div> 6 <input v-bind:value="https://www.cnblogs.com/zhaosq/p/name"/> //文本框值就為zhaoshuiqing了 7 </div> 8 <script> 9 new Vue({ 10 el: "#app", 11 data: { 12 msg: "hello world", 13 name:"zhaoshuiqing" 14 } 15 16 }) 17 </script> 18 其中v-bind:https://www.cnblogs.com/zhaosq/p/https://www.cnblogs.com/zhaosq/p/value="value"也可以使用簡寫 :value=https://www.cnblogs.com/zhaosq/p/“value” ，我們平時就使用簡寫， 19 雙向系結 20 <div id="app"> 21 <div>{{msg}}</div> 22 <input v-modle:value="https://www.cnblogs.com/zhaosq/p/name"/> //文本框值就為zhaoshuiqing了 23 </div>
8. 計算器屬性和監聽器也叫偵聽器 computed和watch
1 <html lang="en"> 2 <body> 3 <div id="app"> 4 姓:<input v-model="firstName"/> 5 名:<input v-model="lastName"/> 6 <div>{{fuallName}}</div> 7 <div>{{count}}</div> 8 </div> 9 <script> 10 new Vue({ 11 el: "#app", 12 data: { 13 firstName: "", 14 lastName:"", 15 count:0 16 }, 17 computed:{ 18 fullName:function(){ 19 return this.firstName+" "+this.lastName; 20 } 21 }, 22 watch:{ 23 firstName:function(){ 24 this.count++; 25 }, 26 lastName:function(){ 27 this.count++; 28 } 29 } 30 }) 31 </script> 32 </body> 33 </html>
9. v-if、v-show、v-for
1 v-if 控制標簽及其內容的顯示和不顯示 2 v-show 控制標簽及其內容的顯示和隱藏 3 區別：if是通過添加dom和洗掉dom實作顯隱，show是通過給標簽添加隱藏屬性顯隱，if會洗掉標簽show不會 4 v-for：用來回圈遍歷 (index索引從0開始) 5 <div id="app"> 6 <div v-if="flag">{{msg}}</div> 7 </div> 8 <script> 9 new Vue({ 10 el: "#app", 11 data: { 12 msg: "hello world", 13 flag: false 14 } 15 }) 16 </script> 17 hello world將不顯示，true的情況下才會顯示，此功能可以結合@click事件控制目標的顯示和隱藏 18 回圈 19 <html lang="en"> 20 <body> 21 <div id="app"> 22 <div>{{msg}}</div> 23 <ul> 24 <li v-for="(item,index) in list" :key="index"> 25 {{item}}---索引：{{index}} 26 </li> 27 </ul> 28 </div> 29 <script> 30 new Vue({ 31 el: "#app", 32 data: { 33 msg: "hello world", 34 list[1,2,3] 35 } 36 }) 37 </script> 38 </body> 39 </html> 40 item相當于資料項內容，index是遍歷的下標， 41 顯示結果: 42 hello world 43 . 1---索引0 44 . 2---索引1 45 . 3---索引2
10：組件，全域組件與區域組件，父組件向子組件傳值
1 區域組件定義在vue物件里面，全域組件使用Vue.component定義，組件其實也是一個vue實體
暫時先就總結整理這么多，后續繼續學習！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/140850.html
標籤：Java