一姑蓝、什么是Vue绑雄？
Vue.js（讀音 /vju?/, 類似于 view）是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的漸進式框架愈犹。Vue.js 的目標是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件街图。
Vue.js借鑒了Angular以及React的一些核心思想莺匠，綜合各自的長處進行了操作以及性能等方面的優(yōu)化金吗，進而打造出一款性能更優(yōu)，學(xué)習(xí)更容易的MVVM框架。
它的作者是：尤雨溪
二摇庙、vue的基礎(chǔ)語法
每個 Vue.js 應(yīng)用都是通過構(gòu)造函數(shù) Vue 創(chuàng)建一個 Vue 的根實例 啟動的
Var vm=new Vue({})
基礎(chǔ)屬性：
el:獲取執(zhí)行vue的dom元素－初始化范圍
data ： 存儲數(shù)據(jù)
methods ：執(zhí)行的方法
1)綁定數(shù)據(jù)
{{}} 或者? v-text=“”? ? ? 只能綁定純文本
綁定html? angular中 ng-bind-html? vue中? v-html
表達式 在{{}}中? +-*/? 直接可用? 三木運算一樣可用?
2）事件綁定
v-on:click=“”? ? ? 或者? ? @click＝“”
綁定事件? －－事件中有event對象? 函數(shù)參數(shù)為? $event
操作數(shù)據(jù)? 通過this操作
3)其他指令
```
ref="a"? 通過 this.$refs.a 拿到該元素
v-model 實時拿到input框的值 需要在data里初始化一下
v-for=“item in list” 循環(huán)? item循環(huán)到的數(shù)組值
v-for=“(item,key) in list”? key循環(huán)到的下標index
v-model=“”? 表單元素value? ? 不可直接{{}}獲取旱物，需在vue初始化設(shè)置一下
v-if 布爾值 為true 代表節(jié)點消失
V-if 與 v-else-if v-else 可以構(gòu)成判斷
V-show布爾值? 為true? 代表節(jié)點設(shè)置了display:none屬性
無v-hide (不要任意猜測)
V-once 一次渲染
```
三、行間樣式設(shè)置
```
v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
data: {
? ? ? ? ? ? activeColor: 'red',
? ? ? ? ? ? fontSize: 30
? ? ? ? }
```
v-bind:style的對象語法十分直觀——看著非常像 CSS卫袒，其實它是一個JavaScript對象
數(shù)組樣式形式設(shè)置
```
v-bind:style=“[styleObjectA, styleObjectB]”
data: {
? ? ? ? ? ? ? ? styleObjectA: {
? ? ? ? ? ? ? ? ? ? color: 'red'
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? styleObjectB: {
? ? ? ? ? ? ? ? ? ? fontSize: '30px'
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
```
類名設(shè)置
```
1) v-bind:class=“{‘class-a’:isa,‘class-b’:isb}”
```
Isa isb 值為true 添加相應(yīng)類名
為false 不添加類名對象形式設(shè)置
對象形式設(shè)置
```
<div :class="classobj"></div>
classobj:{active:true,
'class-a':true,'
class-b':true}
```
綁定屬性 v-bind:id=“data內(nèi)的屬性值” 或者 :id=“data內(nèi)的屬性值” 兩種方法
（src? title? class? name等屬性寫法一樣）
計算屬性? 放在computed:{//函數(shù)}? 效率高? methods設(shè)置效率低
1.在模板中表達式非常便利宵呛，但是它們實際上只用于簡單的操作。
2.模板是為了描述視圖的結(jié)構(gòu)夕凝。在模板中放入太多的邏輯會讓模板過重且難以維護宝穗。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯码秉，應(yīng)當使用計算屬性逮矛。
在 Vue.js 中，你可以通過 computed 選項定義計算屬性
監(jiān)聽
```
第一種寫法vm.$watch(‘’,function( newvalue,oldvalue){ })
第二種寫法 直接在vue初始化中通過
watch｛msg:function(newvalue,oldvalue){}｝
```
過濾器
```
Vue.filter(‘過濾器名字’,function(value){
return //具體操作
})
Vue2.0自定義過濾器,vue1.0提供內(nèi)置
```
獲取數(shù)據(jù)
1.? 應(yīng)用fetch或axios 獲取數(shù)據(jù)? axios? 是vue2.0
? 插件網(wǎng)址? 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);
? ? ? ? ? });
```
