構(gòu)造器

實例化 vue 時顶掉，需要傳入一個選項對象草娜，包括 數(shù)據(jù)、模板痒筒、掛件元素宰闰、方法和生命周期鉤子

屬性與方法

• 每個 vue 實例都會代理其data對象里所有的屬性
• 實例中會有一些實例的屬性和方法茬贵，這些屬性和方法都有前綴$（便于與代理data屬性區(qū)分）

生命周期視圖

https://cn.vuejs.org/images/lifecycle.png

實例生命周期

插值

1. 文本

• 雙大括號 {{ }}
• v-text

2. 純 HTML

• v-html

3. 屬性

• v-bind（雙括號不能在屬性中使用解藻，因此需使用v-bind）

4. 使用 JavaScript 表達式

指令

例舉一些指令

• v-bind
• v-on

• v-if

<div id="app">
<template v-if="ok==='username'">
用戶名: <input type="text" placeholder="請輸入用戶名" key="name-input">
</template>
<template v-else>
密碼: <input type="text"  placeholder="請輸入密碼" key="psd-input">
</template>
<button @click="toggle">點擊切換類型</button>
</div>

new Vue({
  el: "#app",
  data: {
    ok:'username'
  },
  methods: {
  toggle: function(todo){
      if(this.ok==='username'){
      this.ok = 'psd'
    }else{
      this.ok = 'username';
    }
  }
  }
})

https://jsfiddle.net/18613326395/zrkL9wj3/

• v-for

<ul>
  <li v-for="item in items">{{item}}</li>
</ul>
</div>

new Vue({
el: "#app",
data: {
items:['a','b','c']
},
methods: {
  toggle: function(todo){
      todo.done = !todo.done
  }
}
})

https://jsfiddle.net/18613326395/s3fu7tmk/

過濾器

用于將文本轉(zhuǎn)化成你想要的格式
filters

 <div id="app">
        <p>{{message | changeChar}}</p>
       <button @click="changeFirstChar">改變</button>
    </div>

   new Vue({
    el: "#app",
    data: {
      message:'nihao'
    },
    methods: {
        changeFirstChar: function(todo){
            this.message = 'good evening'
        }
      },
      filters:{
        changeChar(value){
                if(!value){
            return '';
          }else{
            return value.charAt(0).toUpperCase()+value.substring(1)
          }
        }
      }
    })

https://jsfiddle.net/18613326395/z81xsma3/1/

縮寫

• v-bind

<a v-bind:href="url"></a> 
---
<a :href="url"></a>

• v-on

<button v-on:click="doSomeThing"></button> 
---
<button @click="doSomeThing"></button>

計算屬性

計算屬性（減少模板{{}}的復(fù)雜度）

computed

<div id="app">
 {{fullName}}
</div>

new Vue({
  el: "#app",
  data: {
    firstName:'Ji',
    lastName:'RenGu'
  },
  computed:{
    fullName(){
      return this.firstName+'----'+this.lastName;
    }
  }
})

計算(computed) vs 方法(methods)
計算屬性computed具有緩存，而methods無緩存

計算(computed) vs 偵聽器(watch)
watch方法--觀察Vue實例上的數(shù)據(jù)變動,只要指定的數(shù)據(jù)改變就會執(zhí)行預(yù)定的函數(shù)

watch

<div id="app">
    {{msg}} <br> 
    改變了嗎? {{isChange}}
    <button @click="change">改變</button>
</div>

new Vue({
  el: "#app",
  data: {
      msg:'欲窮千里目',
      isChange:'No'
  },
  watch:{
    //只要msg改變,這個方法就會執(zhí)行
    msg(val,oldVal){
        this.isChange = 'Yes'
    }
  },
  methods:{//不得不說ES6寫起來真爽
    change(){
        this.msg = '更上一層樓'
    }
  }
})

計算屬性的兩種方法：

get和set葡盗，顧名思義螟左，一個是獲得，一個是設(shè)置觅够，常規(guī)上來講胶背，計算屬性中都是有get和set方法，默認是只有getter方法喘先，如果需要的話钳吟，可以寫一個setter方法，看下面例子

<div id="app">
  此時的onpiece: {{onepiece}} <br>
  此時的msg: {{msg}} <br><br>
  <button @click="setName">設(shè)置name</button>
</div>

new Vue({
  el: "#app",
  data: {
  name:'Kobe',
  msg:''
  },
  methods:{
    setName(){
    this.onepiece = 'JorDan'
    }
  },
  computed:{
    onepiece:{
      get(){
        return this.name +'Bryant'
      },
      set(newVal){
      //當(dāng)你給 onepiece 設(shè)置值的時候 set 就就會調(diào)用
        this.msg = newVal+'is the greatest basketball player'
      }
    }
  }
})

class 與 style 綁定

綁定HTML class

• 對象語法
  • 基本
  • 在對象中傳入多個 class 屬性（其會與原有 class 共存）
  • 直接傳入對象
  • 與計算屬性一起使用（綁定返回對象的計算屬性）
• 數(shù)組語法
  • 簡單例子
  • 三元表達式
  • 當(dāng)有多個條件 class 時窘拯，可以在數(shù)組語法中使用對象語法
• 用在組件上

  • 簡單例子

  • 綁定HTML class例子

綁定class的幾種方式

.classC{
  color:red;
}
.classD{
  font-weight:bold;
}
.classE{
  font-size:20px;
}
.classF{
  color:blue;
}
.classM{
  display:block;
}
.classN{
  display:none;
}

<div id="app">
  <h2>class屬性綁定</h2>
 -------------------綁定變量-------------------------
 <div :class="{classA:a,classB:b}">
   綁定變量
 </div>
  -------------------綁定對象-------------------------
 <div :class="styleObj">
   綁定對象
 </div>
  -------------------綁定數(shù)組-------------------------
 <div :class="arrClass">
   綁定數(shù)組
 </div>
   -------------------綁定三元運算符------------------
 <div :class="m==true?'classM':'classN'">
   綁定變量
 </div>
   <button @click="toggle">toggle</button>
</div>

new Vue({
  el: "#app",
  data: {
    a:true,
    b:false,
    styleObj:{
     classC:true,
     classD:true
     },
   m:true,
   arrClass:['classE','classF']
  },
  methods:{
    toggle(){
      this.m=!this.m;
    }
  }
})

綁定內(nèi)聯(lián)樣式

• 對象語法
  內(nèi)聯(lián)式對象語法
  樣式對象式對象語法（更推薦）
• 數(shù)組語法
• 自動添加前綴
  v-bind:style 當(dāng)需要特定的前綴時如transform红且，vue.js會自動添加
• 多重值
  從vue2.3+后，可以為一個屬性添加多個值的數(shù)組涤姊，常用于含有多個前綴的情況

條件渲染

v-if（v-else）是真正的渲染

• template元素與v-if
• v-else（需要緊跟在v-if后邊）
• v-else-if（vue2.1.0新增）
• 用key管理可復(fù)用的元素
  例子：用戶名和郵箱登錄界面 如果有key就不會復(fù)用,把key去試一下,然后再次輸入看一下效果

<div id="app">
  <template v-if="ok==='username'">
      用戶名: <input type="text" placeholder="請輸入用戶名" key="name-input">
  </template>
  <template v-else>
     密碼: <input type="text"  placeholder="請輸入密碼" key="psd-input">
  </template>
  <button @click="toggle">點擊切換類型</button>
</div>

new Vue({
  el: "#app",
  data: {
   ok:'username'
  },
  methods: {
    toggle: function(todo){
        if(this.ok==='username'){
        this.ok = 'psd'
      }else{
        this.ok = 'username';
      }
    }
  }
})

v-show（其只是簡單的切換display屬性）

• v-show不支持template語法
• v-show不支持v-else

v-if vs v-show

• v-if
  1.當(dāng)條件不成立時不會渲染
  2.切換開銷較大暇番，適合不太可能變化的場景
• v-show
  1.無論成不成立都會渲染
  2.首次渲染開銷較大，但切換開銷小砂轻，因此適合經(jīng)常變化的場景

列表渲染

v-for

• 基本用法
  i. 簡單例子
  ii. 帶有index參數(shù)
  iii.使用of 替代 in
• template v-for
  i. 簡單例子
• 對象迭代 v-for
  i. 基礎(chǔ)用法
  ii. 帶其他參數(shù)用法
• 整數(shù)迭代 v-for
  例子
• 組件和v-for
  i. 包含所有類型的例子

//遍歷數(shù)組：
<ul>
  <li v-for="item in items">{{item}}</li>
<ul>

//遍歷數(shù)組對象：
<ul>
  <li v-for="(item, index) in pers">
    {{index}} 名字：{{item.name}}奔誓，年齡：{{item.age}}
  </li>
<ul>

//遍歷對象：
<ul>
  <li v-for="(value, key) in obj">
    key: {{key}}
    value: {{value}}
  </li>
<ul>

data: {
  items: ['banana', 'apple', 'orange'],
  pers: [{
    name: 'Kobe',
    age: '40'
  },
  {
    name: 'James',
    age: '38'
  }],
  obj: {
    1: 'one',
    2: 'two'
  }
}

key

作用：用v-for更新已渲染過的列表時，它默認采用的是“就地復(fù)用”的原則搔涝，也就是如果數(shù)據(jù)項順序發(fā)生了改變厨喂，vue將不是移動DOM元素來匹配數(shù)據(jù)項的順序，而是簡單復(fù)用此處的元素庄呈。如果想跟蹤每個節(jié)點的身份蜕煌，從而重用或重新排列現(xiàn)有元素，可使用key诬留。（key還可用在v-if中斜纪，詳見v-if中的郵箱名和用戶名切換的例子）

還是不懂，看下面的例子

<div id="app">
  KEY: <input type="text" v-model="id"> 
  VALUE: <input type="text" v-model="name">
  <button @click="add">添加</button>
  <ul>
    <li v-for='item in list' :key="item.id">  //---
      <input type="checkbox">
      {{item.id}}---{{item.name}}
    </li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    list:[
      {id:1, name:'李斯'},
      {id:2, name:'嬴政'},
      {id:3, name:'趙高'},
      {id:4, name:'韓非'},
      {id:5, name:'荀子'},
    ]
  },
  methods: {
    add: function(){
    this.list.unshift({id:this.id, name:this.name})
    }
  }
})

試著把 key 先去掉文兑，然后勾選一條盒刚，點擊添加；再加上 key 重復(fù)下操作绿贞。就會發(fā)現(xiàn)微妙的地方

數(shù)組更新檢測

• 變異方法（會改變原有數(shù)組）
  push()
  pop()
  shift()
  splice()
  sort()
  reverse()
• 重塑數(shù)據(jù)
  filter()
  concat()
  slice()
• 注意事項
  利用索引直接設(shè)置一個項時因块，vue不能檢測變動，如：vm.items[indexOfItem] = newValue
  那如果設(shè)置某一項的該怎么設(shè)置呢?
  -1. Vue.set(example1.items, indexOfItem, newValue)
  -2. example1.items.splice(indexOfItem, 1, newValue)

<div id="app">
  <button @click="setZF">設(shè)置第二項為張飛</button>
  <button @click="setGY">設(shè)置第三項為關(guān)羽</button>
  <ul>
    <li v-for="item in list">
      <input type="checkbox">{{item.id}}---{{item.name}}
    </li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    id: '',
    name: '',
    list:[
      {id:1, name:'李斯'},
      {id:2, name:'嬴政'},
      {id:3, name:'趙高'},
      {id:4, name:'韓非'},
      {id:5, name:'荀子'},
    ]
  },
  methods: {
    setZF: function(){
        Vue.set(this.list,1,{id:2,name:'張飛'})
    },
    setGY: function(){
        this.list.splice(2,1,{id:3,name:'關(guān)羽'})
    }
  }
})

注意:

• 修改數(shù)組長度時籍铁，vue 不能檢測變動涡上，如 `vm.items.length = newLength
• 只能用`example1.items.splice(newLength)

對于顯示過濾 / 排序結(jié)果的兩種方法

過濾數(shù)組--計算屬性 (computed)

<div id="app">
  {{specialNum}}
</div>

new Vue({
  el: "#app",
  data: {
    nums: [1,2,3,4,5,6,7,8,9]
  },
  computed: {
    specialNum() {
        return this.nums.filter((item, index) => {return item%3 == 0})
    }
  }
})

過濾數(shù)組--方法 (method)

<div id="app">
  <ul>  //在 v-for 循環(huán)中趾断，直接嵌入方法
    <li v-for="item in fil(numbers)">{{item}}</li>
  </ul>
</div>

new Vue({
  el: "#app",
  data: {
    numbers:[1,2,3,4,5,6,7,8,9]
  },
  methods:{
    fil(nums){
      return nums.filter((item,index)=>{
        return item%3==0;
      })
    }
  }
})

事件處理器

用v-on來綁定事件，兩個簡單的例子

<div id="app">
  <button @click="num+=1">增加1</button>
  {{num}}
</div>

new Vue({
  el: "#app",
  data: {
    num: 0
  },
})

<div id="app">
  <button @click="sayHello">點擊sayHello</button>
</div>

new Vue({
  el: "#app",
  methods: {
    sayHello: function(){
      alert('sayHello')
    }
  }
})

內(nèi)聯(lián)處理器方法

訪問原生DOM事件的例子,如果click事件不傳參數(shù),就默認把原生DOM傳遞進去

<div id="app">  <!-- 沒有傳參數(shù),就是原生的!!! -->
  <button @click="showBtnname">顯示按鈕的名字</button> <br>
  {{msg}}
</div>

new Vue({
  el: "#app",
  data: {
    msg:''
  },
  methods: {
    showBtnname: function(e){
      this.msg = e.target.innerText;
    }
  }
})

未訪問原生DOM事件的例子,如果傳了參數(shù).那么方法中接受的第一個參數(shù)就是該參數(shù),在vue中所有的事件綁定都是這樣的

事件修飾符