概述
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合，
Vue的特點
- 易用：已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！
- 靈活：不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮，
- 高效：a. 20kB min+gzip 運行大小 b. 超快虛擬 DOM c. 最省心的優化
Vue的參考
想要在程式中參考，可以采用如下方式：
1 <!-- 開發環境版本，包含了有幫助的命令列警告 --> 2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
1 <!-- 生產環境版本，優化了尺寸和速度 --> 2 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
宣告式渲染
Vue.js 的核心是一個允許采用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統，如下所示：
以檔案插值的方式系結文本內容，寫法如下：{{message}}，
el 表示Vue系結的容器ID，data表示資料變數 ，
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>一起學Vue</title> 6 <!-- 開發環境版本，包含了有幫助的命令列警告 --> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 {{message}} 12 </div> 13 <script type="text/javascript"> 14 var app=new Vue({ 15 el:"#app", 16 data:{ 17 message:'welcome to vue world!' 18 } 20 }); 22 </script> 23 </body> 24 </html>
我們已經成功創建了第一個 Vue 應用！看起來這跟渲染一個字串模板非常類似，但是 Vue 在背后做了大量作業，現在資料和 DOM 已經被建立了關聯，所有東西都是回應式的，
注意：script必須放置在div的后面，如果放置head中，會提示找不到元素app，
v-bind系結元素屬性
除了文本插值，我們還可以像這樣來系結元素特性：以v-bind，進行系結title,格式如下：v-bind:title="message"
1 <span v-bind:title="message">滑鼠懸停幾秒鐘查看此處動態系結的提示資訊！</span>
條件判斷
v-if="sean"用于判斷是否顯示標簽(通過DOM的新增或洗掉),
v-show="sean"用于判斷是否顯示標簽(通過樣式來實作，如：display: none;)
如下所示：sean表示data的一個變數，初始值為true
1 <p v-if="sean"> {{message}} </p> 2 <p v-show="sean">{{message}}</p>
串列回圈
v-for 用于展示陣列內容，通過改變元素的值，并不能觸發頁面發生變化，只有通過變異方法實作，
1 <ul> 2 <li v-for="(todo ,index) in todos">{{todo.text}}---{{index}}</li> 3 </ul>
todos也是data的一個變數，如下所示：
1 data:{ 2 message:'welcome to vue world!', 3 sean:true, 4 todos:[{text:'學習java script'},{text:'學習html'},{text:'學習java'}], 5 groceryList: [ 6 { id: 0, text: '蔬菜' }, 7 { id: 1, text: '奶酪' }, 8 { id: 2, text: '隨便其它什么人吃的東西' } 9 ] 10 }
在控制臺里，輸入 app4.todos.push({ text: '新專案' })，你會發現串列最后添加了一個新專案，
系結事件
v-on:click 用于系結單擊事件，如下所示：
1 <button v-on:click="handleClick" >點擊一下</button>
其中handleClick是vue中的一個自定義事件，如下所示：
1 methods:{ 2 handleClick:function(){ 3 this.todos.push({text:'學習C#'}); 4 } 5 }
表單輸入
Vue 還提供了 v-model 指令，它能輕松實作表單輸入和應用狀態之間的雙向系結，
如下所示：
1 <input type="text" v-model="message" />
自定義組件
在 Vue 里，一個組件本質上是一個擁有預定義選項的一個 Vue 實體，在 Vue 中注冊組件很簡單，如下所示：
props表示變數串列，其中‘todo’為變數名稱，在使用時v-bind:todo="item"關聯起來即可，
1 Vue.component('todo-item1',{ 2 //todo-item1,現在接收一個prop的自定義屬性，prop名為todo 3 props:['todo'], 4 template:'<li>{{todo.text}}---{{todo.id}}</li>' 5 });
使用時如下所示：
1 <ol> 2 <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item1> 3 </ol>
其中groceryList 是定義的一個物件陣列，
學習手冊
最好的學習就是官網的指導手冊，本例中涉及的代碼如下所示：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>一起學Vue</title> 6 <!-- 開發環境版本，包含了有幫助的命令列警告 --> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 12 作者：[email protected] 13 時間：2019-11-18 14 描述：以檔案插值的方式系結文本內容 15 --> 16 {{message}} 17 <br /> 18 <!-- 19 作者：[email protected] 20 時間：2019-11-18 21 描述：以v-bind，進行系結title,格式如下：v-bind:title="message" 22 --> 23 <span v-bind:title="message">滑鼠懸停幾秒鐘查看此處動態系結的提示資訊！</span> 24 <br /> 25 <!-- 26 作者：[email protected] 27 時間：2019-11-18 28 描述：v-if="sean"用于判斷是否顯示標簽(通過DOM的新增或洗掉), 29 v-show="sean"用于判斷是否顯示標簽(通過樣式來實作，如：display: none;) 30 --> 31 <p v-if="sean"> {{message}} </p> 32 <p v-show="sean">{{message}}</p> 33 <br /> 34 <!-- 35 作者：[email protected] 36 時間：2019-11-18 37 描述：v-for 用于展示陣列內容，通過改變元素的值，并不能觸發頁面發生變化，只有通過變異方法實作， 38 如：push,pop,splice, 39 --> 40 <ul> 41 <li v-for="(todo ,index) in todos"> 42 {{todo.text}}---{{index}} 43 </li> 44 </ul> 45 <!-- 46 作者：[email protected] 47 時間：2019-11-18 48 描述：v-on:click 用于系結單擊事件 49 --> 50 <button v-on:click="handleClick" >點擊一下</button> 51 <!-- 52 作者：[email protected] 53 時間：2019-11-18 54 描述：v-model 實作表單輸入和應用狀態之間的雙向系結 55 --> 56 <input type="text" v-model="message" /> 57 <br /> 58 <ul> 59 <to-item></to-item> 60 </ul> 61 <ol> 62 <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> 63 64 </todo-item1> 65 </ol> 66 </div> 67 <!-- 68 作者：[email protected] 69 時間：2019-11-18 70 描述：script必須放置在div的后面，如果放置head中，會提示找不到元素app 71 --> 72 <script type="text/javascript"> 73 //宣告一個簡單的組件 74 Vue.component('to-item',{ 75 template:'<li>這是待辦項</li>' 76 }); 77 Vue.component('todo-item1',{ 78 //todo-item1,現在接收一個prop的自定義屬性，prop名為todo 79 props:['todo'], 80 template:'<li>{{todo.text}}---{{todo.id}}</li>' 81 }) 82 var app=new Vue({ 83 el:"#app", 84 data:{ 85 message:'welcome to vue world!', 86 sean:true, 87 todos:[{text:'學習java script'},{text:'學習html'},{text:'學習java'}], 88 groceryList: [ 89 { id: 0, text: '蔬菜' }, 90 { id: 1, text: '奶酪' }, 91 { id: 2, text: '隨便其它什么人吃的東西' } 92 ] 93 }, 94 methods:{ 95 handleClick:function(){ 96 this.todos.push({text:'學習C#'}); 97 } 98 } 99 100 }); 101 102 </script> 103 </body> 104 </html>View Code
備注
一首清新小詩，點散午后的煩憂，
山居秋暝
作者：王維 (唐)
空山新雨后，天氣晚來秋，
明月松間照，清泉石上流，
竹喧歸浣女，蓮動下漁舟，
隨意春芳歇，王孫自可留，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169016.html
標籤：JavaScript
上一篇：js生成條形碼