Vue基礎語法介紹
什麼是Vue？
Vue.js（讀音 /vjuː/, 類似於 view）是一個構建資料驅動的 web 介面的漸進式框架。Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。
Vue.js借鑑了Angular以及React的一些核心思想，綜合各自的長處進行了操作以及效能等方面的優化，進而打造出一款效能更優，學習更容易的MVVM框架。
它的作者是：尤雨溪
vue對比angularjs
1、vue在設計之初參考了很多angularjs的思想（angjularjs != angular）
2、vue相對比與angular比較簡單
3、 vue相對比與angular比較小巧，執行速度快
4、 vue與angular資料繫結都可以用｛｛｝｝
5、vue指令用v－xxx angularjs用ng－xxx
6、vue資料放在data物件裡面，angular資料繫結到$scope物件上
vue對比react
1、vue與react都使用 virtual DOM(虛擬DOM)
2、vue與react都提供了元件化的檢視元件
3、 vue與react將注意力集中保持在核心庫，有豐富的外掛庫
4、react使用jsx渲染頁面，vue使用更簡單的模版
5、vue比react執行速度更快
vue基礎語法
每個 Vue.js 應用都是通過建構函式 Vue 建立一個 Vue 的根例項 啟動的
Var vm=new Vue({})
基礎屬性：
el:獲取執行vue的dom元素－初始化範圍
data ： 儲存資料
methods ：執行的方法
1)繫結資料
{{}} 或者 v-text=“” 只能繫結純文字
繫結html angular中 ng-bind-html vue中 v-html（專門處理帶標籤的）
表示式 在{{}}中 ±*/ 直接可用 三木運算一樣可用
2）事件繫結
v-on:click=“” 或者 @click＝“”
繫結事件 －－事件中有event物件 函式引數為 $event
操作資料 通過this操作
methods:專門寫函式的
event物件
3)其他指令
v-for=“item in list” 迴圈 item迴圈到的陣列值
v-for=“(item,key) in list” key迴圈到的下標index
v-model=“” 表單元素value 不可直接{{}}獲取，需在vue初始化設定一下
單選框的話兩個v-model值必須一樣
多選框的value值是一個布林值
v-model永遠指向表單元素的value值，
v-if 布林值 為false 代表節點消失（有更高的渲染開銷）
-if 與 v-else-if v-else 可以構成判斷（必須要連著一塊寫）
-show布林值 為false代表節點設定了display:none屬性
無v-hide (不要任意猜測)
-once 一次渲染
v-if和v-show的區別
行間樣式設定
v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
v-bind可以省略不寫
data: {
activeColor: ‘red’,
fontSize: 30
}
v-bind:style的物件語法十分直觀——看著非常像 CSS，其實它是一個JavaScript物件
陣列樣式形式設定
v-bind:style=“[styleObjectA, styleObjectB]”
data: {
styleObjectA: {
color: ‘red’
},
styleObjectB: {
fontSize: ‘30px’
}
}
類名設定
-
v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
Isa isb 值為true 新增相應類名
為false 不新增類名
2）物件形式設定
繫結屬性 v-bind:id=“data內的屬性值” 或者 :id=“data內的屬性值” 兩種方法
（src title class name等屬性寫法一樣）
計算屬性 放在computed:{//函式} 效率高 methods設定效率低
1.在模板中表達式非常便利，但是它們實際上只用於簡單的操作。
2.模板是為了描述檢視的結構。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什麼 Vue.js 將繫結表示式限制為一個表示式。如果需要多於一個表示式的邏輯，應當使用計算屬性。
在 Vue.js 中，你可以通過 computed 選項定義計算屬性
利用計算屬性 （computed）
實現金額結算
實現篩選資料
監聽
第一種寫法vm.$watch(‘’,function( newvalue,oldvalue){ })
第二種寫法 直接在vue初始化中通過
watch｛msg:function(newvalue,oldvalue){}｝
過濾器----變換輸出形式
Vue.filter(‘過濾器名字’,function(value){
return //具體操作
})
Vue2.0自定義過濾器,vue1.0提供內建
獲取資料
vue全家桶（vue+axios+router+vuex）
- 應用fetch或axios 獲取資料 axios 是vue2.0
外掛網址 https://github.com/mzabriskie/axios
需要引入 axios.js
Eg:get方式
var _that=this; /注意this的作用域/
axios.get(url)
.then(function (response) {
console.log(response.data.result);
_that.list=response.data.result;
})
.catch(function (error) {
console.log(error);
});
vue1.0用法（知道就行）
github 搜尋 resource https://github.com/pagekit/vue-resource
Eg:百度介面
var api=‘https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php’;
var that=this;
this.$http.jsonp(api,{
jsonp:‘cb’
}).then(function(data){
console.log(data.body);
that.list=data.body.s;
},function(){
//錯誤失敗資訊
})
fetch用法
先在bootcdn中引用fetch.js
第一個then處理資料的，要對資料進行型別的轉換
第一個then獲取資料的