基本操作（上） 本章節簡介： vue的安裝 vue實例創建 數據綁定渲染 表單數據雙向綁定 事件處理 安裝 安裝方式有三種： 一、vue官網直接下載 http://vuejs.org/js/vue.min.js 二、使用CDN方法 二、使用node.js的npm包管理工具下載 Vue實例 vue實例 ...
基本操作（上）
本章節簡介：
vue的安裝
vue實例創建
數據綁定渲染
表單數據雙向綁定
事件處理
安裝
安裝方式有三種：
一、vue官網直接下載
http://vuejs.org/js/vue.min.js
二、使用CDN方法
- BootCDN（國內） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （國內不穩定）
- unpkg：https://unpkg.com/vue/dist/vue.js, 會保持和 npm 發佈的最新的版本一致。（推薦使用）
- cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）
二、使用node.js的npm包管理工具下載
npm install vue
Vue實例
new Vue({ el : ' ' , data : { }, methods : { } } });
vue實例中幾個最基本的屬性el、data、methods，作用如下：
- el
■ 指定被Vue管理的模板入口，網頁中的DOM節點
■ 作為模板入口的DOM節點不能是body、html
■ 必須是一個普通的HTML標簽節點，一般是某個 div
- data
■ 作用：數據驅動試圖中的數據
■ 不是什麼數據都往裡面初始化的，一般是根據你的視圖來初始化使用：數據驅動視圖功能的數據
■ data中的成員一般叫做和視圖交互的響應式數據成員
■ 以前想要操作DOM，必須給DOM起一個id搞一個標識。現在不需要了，只需要在data中初始化一個數據成員，然後再模板中綁定使用這個成員，我們就可以通過修改數據的方式來改變視圖顯示
■ 核心就是把DOM操作思想轉變成“數據驅動視圖”
- methods
■ 一般用來定義事件處理函數
■ 雖然我們可以把方法寫到data中，但是在Vue中更推薦把所有方法都寫到methods屬性中。因為這樣做更加合理，數據和方法分開，分門別類。
■ 註意：methods中不允許有和data中重名的成員
數據綁定渲染
文本綁定：{{ }}
- mustache語法 ( 八字鬍 ) ，中括弧括弧裡面可以是數據變數或者表達式
示例：
<h1>{{ message }}</h1>
屬性綁定：v-bind
- 完整寫法： v-bind:屬性名稱=”數據變數或表達式”
- 簡寫方式： :屬性名稱=”數據變數或表達式”
示例：
<!-- 完整寫法 --> <input type="text" v-bind:value="message"> <!-- 簡寫 --> <input type="text" :value="message">
下麵舉例：數據和屬性綁定的幾種用法和常見錯誤：
<!-- 下麵以data中的message的各種綁定形式舉例： --> <!-- 普通文本數據綁定 --> <!-- 正確綁定方式 --> <h1>{{ message }}</h1> <!-- 錯誤綁定方式 ： 這裡表示的是字元串 message {{ }}內不需要加引號，如果加了引號，就會把 message當做字元串處理，而不是data中的數據成員 --> <h1>{{ 'message' }}</h1> <!-- 這裡表示的是數字 123 ，不和任何數據有關聯 --> <h1>{{ 123 }}</h1> <!-- 屬性綁定方式 --> <!-- 錯誤的用法，屬性綁定需要用 v-bind 指令進行綁定,而不能使用八字鬍語法 --> <h1 foo="{{ message }}">測試文本</h1> <!-- 正確的屬性綁定方式： 完整寫法(簡寫去掉 v-bind 只用冒號即可) --> <h1 v-bind:foo="message">測試文本</h1> <!-- 錯誤的綁定方式 : 同理這裡表示的是字元串 --> <h1 v-bind:foo="'message'"></h1>
上面所說的表達式，是指一些簡單的Java Script表達式，如下所示：
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id "></div>>
註意：普通的文本數據綁定和屬性綁定都是單向綁定
- 數據改變，視圖跟著變
- 視圖改變，數據不變
對有些特殊屬性，作用方式有所不同，如 class 和 checked
特殊屬性class:
- v-bind:class=”{類名:布爾值}”
■ 當布爾值為true的時候，這作用這個類名
■ 當布爾值為false的時候，這去除這個類名
基本操作如下：
<!-- 當item.done 為true的時候，類 complete 就對當前 <li> 起作用 --> <li v-bind:class=" { complete : item.done } "> <a href="">{{ item.title }}</a>> </li>
特殊屬性checked：
checked在html標簽中只要有checked屬性即為選中的意思，無需true或flase，但在vue中處理了這個誤解人的屬性，v-bind:checked=“布爾值” ，只有布爾值為true時才有checked屬性。
表單數據雙向綁定
表單標簽的數據綁定需要使用v-model指令來操作，因為表單數據是和用戶交互的數據。
v-model指令綁定的數據是雙向綁定的。
數據←→視圖（相互影響）
表單標簽如：文本、多行文本、覆選框、單選按鈕、選擇列表等等。
示例：
<!-- 註意 : 非表單元素不可以使用 v-model 指令進行雙向綁定 --> <!-- 錯誤用法：<h1 v-model="message"></h1> --> <!-- 表單元素 text 和 textarea 的雙向綁定用法 --> <input type="text" v-model="message"> <textarea cols="30" rows="10" v-model="message"></textarea> <!-- checkbox 的雙向數據綁定的正確用法 --> <input type="checkbox" v-model="seen"> <!-- 註意：checkbox 不能使用屬性綁定的用法控制選中狀態，如下錯誤用法示例 --> <input type="checkbox" :checked="seen"> <!-- 這樣相當於給checkbox加上 checked 屬性，而作為 html 元素的 checkbox 加了checked屬性，無論是 true 還是 false 都是選中狀態的。 -->
事件處理
- vue中定義事件處理函數
- DOM中綁定事件處理函數
■ 完整寫法：v-on:事件名稱=”事件處理函數”
■ 簡寫方式： @事件名稱=”事件處理函數”
<div id="app"> <input type="text" v-model="number"><br/> <!-- vue中事件綁定需要用v-on:指令--> <!-- 完整寫法 --> <button v-on:click="handleClick">事件綁定完整寫法：點擊number++</button><br/> <!-- 因為事件處理用的比較多，所以vue提供了@事件名稱="處理函數"的簡寫方式 --> <button @click="handleClick">事件綁定簡寫方式：點擊number++</button> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> new Vue({ el : '#app' , data : { number : 1 }, methods : { // 事件處理函數定義在methods中，註意：methods中定義的方法名稱不能和data中的數據名稱相同 handleClick : function () { console.log(this.number++); } } }); </script>
效果：
vue安裝介紹參考： 三種方式安裝(vue-cli)
