一塊兒學Vue之入門篇

時間 2019-11-24

標籤一塊兒 vue 入門简体版

原文原文鏈接

概述

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。javascript

Vue的特色

易用：已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！
靈活：不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。
高效：a. 20kB min+gzip 運行大小 b. 超快虛擬 DOM c. 最省心的優化

Vue的引用

想要在程序中引用，能夠採用以下方式：html

1 <!-- 開發環境版本，包含了有幫助的命令行警告 -->
2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者vue

1 <!-- 生產環境版本，優化了尺寸和速度 -->
2 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

聲明式渲染

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統，以下所示：java

以文件插值的方式綁定文本內容。寫法以下：{{message}}。npm

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 已經被創建了關聯，全部東西都是響應式的。app

注意：script必須放置在div的後面，若是放置head中，會提示找不到元素app。框架

v-bind綁定元素屬性

除了文本插值，咱們還能夠像這樣來綁定元素特性：以v-bind，進行綁定title,格式以下：v-bind:title="message"ide

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                 做者：Alan.hsiang@qq.com
 13                 時間：2019-11-18
 14                 描述：以文件插值的方式綁定文本內容
 15             -->
 16             {{message}}
 17             <br />
 18             <!--
 19                 做者：Alan.hsiang@qq.com
 20                 時間：2019-11-18
 21                 描述：以v-bind，進行綁定title,格式以下：v-bind:title="message"
 22             -->
 23             <span v-bind:title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span>
 24             <br />
 25             <!--
 26                 做者：Alan.hsiang@qq.com
 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                 做者：Alan.hsiang@qq.com
 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                 做者：Alan.hsiang@qq.com
 47                 時間：2019-11-18
 48                 描述：v-on:click 用於綁定單擊事件
 49             -->
 50             <button v-on:click="handleClick" >點擊一下</button>
 51             <!--
 52                 做者：Alan.hsiang@qq.com
 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             做者：Alan.hsiang@qq.com
 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>