vue學習之路 - 1.初步感知
一、安裝
這裏使用node的npm包管理工具進行操作。操作前請先下載node。
在工程文件夾中使用以下命令安裝vue:
npm install vue
如下圖所示：我在 helloworld 文件夾中安裝vue：
// Vue不支持IE8及其以下版本，因為Vue使用了IE8不能模擬的ECMAScript5特性。Vue.js支持所有兼容ECMAScript5的瀏覽器。
二、Vue初步感知
1、Hello World
初步認識：vue相當於一個高級的模板引擎
1 <!DOCTYPE html> 2 <html lang="en"> 3HelloWorld-代碼<head> 4 <meta charset="UTF-8"> 5 <title>vue-Hello World</title> 6 </head> 7 <body> 8 <!-- 9 0. 引包 10 1. new Vue() 實例化 Vue 應用程序 11 2. 根據你的視圖界面配置 data 數據 12 3. 通過 el 選項配置需要用 vue 管理的 DOM 節點入口 13 --> 14 <script src="node_modules/vue/dist/vue.js"></script> 15<div id="app"> 16 <h1>{{ message }}</h1> 17 </div> 18 19 <!-- 1. new Vue() 實例化 Vue 應用程序 --> 20 <script> 21 // 高級模板引擎 22 new Vue({ 23 el : ‘#app‘ , // el 是element 元素的意思 24 data : { // 數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。25 message : ‘hello vue.js‘ // 根據你的視圖界面配置 data 數據 26 } 27 }); 28 </script> 29 <!-- Vue 你就把當做一個高級的模板引擎，在 data 中的數據，就可以直接在被 vue 管理的DOM中，直接通過模板語法來使用 --> 30 </body> 31 </html>
el：綁定DOM元素，綁定規則：一般都是你哪些DOM需要被vue所管理，那麽你就綁定這些DOM元素所在的DIV。
代碼運行結果：
2、vue中的數據是響應式的
數據變化頁面會自動更新。
如上圖，拿到vue實例後，我們可以直接通過vue對象實例，來訪問操作data中的數據成員。
3、數據綁定：
一般的標簽綁定數據都是通過 {{ }} 就可以做到。如上面的例子。
但是表單元素比較特殊，在vue中需要使用v-model來進行綁定。
如：
<input type="text" v-model="message">
v-model//自定義標簽特殊屬性，HTML不識別，但是vue會識別。
雙向數據綁定：
v-model 是 Vue 提供的一個特殊的屬性，在 Vue 中被稱之為指令
它的作用就是：雙向綁定表單控件
什麽是叫雙向數據綁定？
當數據發生改變， DOM 會自動更新
當表單控件的值發生改變，數據也會自動得到更新
如下圖：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-表單元素雙向數據綁定</title> </head> <body> <script src="node_modules/vue/dist/vue.js"></script> <div id="app"> <!-- 表單元素比較特殊，在 vue 中需要使用 v-model 這個特殊的 HTML 屬性(vue指令) --> <h1>{{ message }}</h1> <input type="text" v-model="message"> <h2>{{ foo }}</h2> <input type="text" v-model="foo"> <h3>{{ apple }}</h3> <input type="text" v-model="apple"> </div> <script> var app = new Vue({ el : ‘#app‘ , data : { message : ‘hello vue.js‘, foo : ‘fooMessage‘, apple: ‘appleMessage‘ } }); console.log (app.message); </script> </body> </html>數據雙向綁定例子源碼
4、事件綁定：
我們可以通過被vue管理的模板中使用方法綁定使用：
v-on:事件名稱="methods中的方法名稱"的方式來為其註冊特定的事件處理函數
如圖所示：
初步認識：
目前我們發現Vue給我們帶來最大的一個好處是，：不需要DOM操作了(vue內部解決)
還有就是Vue其實就是一個更高級的模板引擎。
- 在頁面中具有被Vue管理的程序(DOM)入口（不能是html、body）
- 通過new Vue創建Vue應用程序實例
- 把頁面中所有要操作的DOM，通過數據綁定的方式來處理
■ 在data中聲明：
■ 在模板中通過特殊的語法來使用
◆ {{ }}使用在非表單元素、h1、p等
◆ v-model=””使用在表單元素
■ 處理事件的方式
◆ 在methods中定義方法
◆ 在模板中通過v-on:事件名稱="methods中的方法名稱"的方式來註冊特定的事件處理函數
■ 通過el選項來聲明被Vue管理的模板入口
◆ 不能是html和body
◆ 是普通元素節點
- 在Vue中，通過模板綁定的數據都是響應式的
■ 數據如果一旦變化，則綁定該數據的視圖元素也會得到改變
■ 視圖元素一旦變化，則綁定的數據也會跟著改變。
vue學習之路 - 1.初步感知