VUE入門例項
阿新 • • 發佈：2020-07-18
引言
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="./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="./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:value="value"也可以使用簡寫 :value=“value” ，我們平時就使用簡寫。 單向繫結 2 input標籤程式碼改為<input v-model="value"/> 雙向繫結 3 單向繫結 4 <div id="app"> 5 <div>{{msg}}</div> 6 <input v-bind:value="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:value="value"也可以使用簡寫 :value=“value” ，我們平時就使用簡寫。 19 雙向繫結 20 <div id="app"> 21 <div>{{msg}}</div> 22 <input v-modle:value="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例項
暫時先就總結整理這麼多，後續繼續學習！