Vue入門

時間 2019-11-26

標籤 vue 入門简体版

原文原文鏈接

1、什麼是Vue?javascript

　　官方解讀：Vue(讀音 /vju:/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其餘大型框架不一樣的是，Vue被設計爲「自底向上逐層應用」。Vue的核心庫只關注視圖層，易於上手，便於與第三方庫或現有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。簡單來講，Vue就是一個用於搭建表單項繁多且內容須要根據用戶的操做進行修改的網頁應用的框架。html

漸進：vue

聲明式渲染(Declaralive Rendering)-->組件系統(Component System)-->客戶端路由(Client-Side Routing)-->大規模狀態管理(Large Scale State Management)-->構建工具(Build System)java

2、爲何要使用Vue?npm

這裏用jQuery和Vue來作比較app

　　jQuery是使用選擇器$選取DOM對象，對其進行賦值、取值、綁定事件等操做，和原生HTML的區別只在於更方便的選取和操做DOM對象，數據和界面仍是綁定在一塊兒的。好比獲取label標籤的內容：$("label").val();它仍是依賴DOM元素的值。框架

　　Vue則是經過Vue對象把數據和界面徹底分離開了，對數據進行操做不用再引用對應的DOM元素了，經過Vue對象的vm實現相互的綁定，就是MVVM。ide

　　Vue的特色：函數

　　1.易用：Vue它能讓團隊書寫js更加容易而且簡化了js，上手容易，源碼可讀性高。工具

　　2.靈活：不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。

　　3.高效：20KBmin+gzip運行大小，超快虛擬DOM，最省心的優化。

框架和庫的區別：

　　庫是將代碼集合成一個產品，供開發者去使用，開發者去調用庫中的方法去實現本身的功能。

　　框架是爲了解決一類問題而開發出來的產品，基於自身的特色向用戶提供一套完整的解決方案。

3、Vue的使用

　　1.引用Vue

　　引用Vue分爲兩個版本

　　　　開發版本（包含完整的警告和測試模式）

　　　　生產版本（刪除了警告，33.30KBmin+gzip）

　　引用方式：

　　　　　我這裏使用了CDN的方式，在</head>的上一行加入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

　　　　　其餘方式能夠在官網進行學習使用

1     <head>
2         <meta charset="utf-8">
3         <title>Vue入門</title>
4         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
5     </head>

　　2.添加一個DOM元素做爲Vue實例的掛載目標

1     <body>
2         <div id="app">
3             
4         </div>
5     </body>

　　3.建立Vue對象的實例

 1     <body>
 2         <script type="text/javascript">
 3             var vue = new Vue({
 4                 el:'#app',
 5                 data:{
 6                     
 7                 }
 8             })
 9         </script>
10     </body>

如今數據data和DOM（id=「app」的div）已經被創建了關聯，全部東西都是響應式的，響應式便是Vue實現的雙向數據綁定。

4、Vue插值和表達式綁定數據

　　1.插值，使用{{ }}將數據編譯成普通文本，並輸出到插值位置。

　　注意：{{ }}綁定能夠放置在Vue掛載目標節點內的任意位置，而不須要額外的DOM標籤。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue_插值</title>
 6         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             {{ msg }}
11         </div>
12         <script type="text/javascript">
13             var vue = new Vue({
14                 el:'#app',
15                 data:{
16                     msg:'Hello Vue!!!'
17                 }
18             })
19         </script>
20     </body>
21 </html>

效果：

插值標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

Vue的數據綁定是數據驅動。即：當數據發生變化時會觸發html頁面更新，全部相關聯綁定的值也會隨之一塊兒變化。

　　2.表達式

　　Vue的數據綁定不只限於簡單的屬性鍵值，Vue對全部的綁定，都支持JavaScript表達式綁定。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue_插值_表達式</title>
 6         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <!-- 1.綁定函數 -->
11             <p>
12                 {{ msg.toUpperCase() }}
13             </p>
14             <!-- 2.綁定一個計算 -->
15             <p>
16                 {{ 100*100 }}
17                 {{ count*100 }}
18             </p>
19             <!-- 3.綁定三元表達式 -->
20             <p>
21                 {{ count > 0 ? 'Yes':'No' }}
22             </p>
23         </div>
24         <script type="text/javascript">
25             var vue = new Vue({
26                 el:'#app',
27                 data:{
28                     msg :'hello vue!!!',
29                     count :1
30                 }
31             })
32         </script>
33     </body>
34 </html>