<h2>1. v-on指令</h2>

v-on指令將事件綁定在元素上，可以簡寫為@。

v-on:click="" //點擊后觸發事件

v-on:keydown.enter="" //按下回車后觸發事件

@click=""  //簡寫

v-on綁定的事件可以調用methods中的方法，調用時只需寫方法名，不用加括號。

<button v-on:click="addItem">addItem</button>

export default{
  methods: {
    addItem() {
      this.list.push({
        name: 'pineapple',
        price: 256
      })
    }
  }

顯示效果

<h2>2. v-text和v-html指令</h2>

data () {
  return {
    hello: '<h1>world</h1>',
  }
}

<p v-text="hello"></p>
<p v-html="hello"></p>

顯示效果:上為v-text，下為v-html

<h2>3. v-for指令循環遍歷</h2>

<h5>3.1 </h5>

v-for 是放在需要循環遍歷展示的組件下，而不是父組件

<li v-for="item in list">{{item}}</li>

<h5>3.2 </h5>

data () {
  return {
    num: 1,
    status: false,
  }
}

<p>{{num+1}}</p>
<p>{{status ? 'success' : 'fail'}}</p>

顯示效果

<h5>3.3 </h5>

使用v-for遍歷數組時，用item,index進行遍歷。

<li v-for="(item,index) in list">{{item.name}}-{{
  item.price}}-{{index}}</li>

data () {
  return {
    list: [
    {
      name: 'apple',
      price: 34
    },
    {
      name: 'banana',
      price: 21
    }
  ],
 }
}

顯示效果

<h5>3.4 </h5>

通過v-bind綁定一個class，為index%2==0的項添加classa這個類

<li v-for="(item,index) in list" :class="{classa:index%2}">{{item.name}}-{{
  item.price}}-{{index}}</li>

<h5>3.5 </h5>

使用v-for遍歷對象時，用key，value進行遍歷。

<li v-for="(value ,key) in objList">{{key}}-{{value}}</li>

data () {
  return {
    objList: {
     name: 'orange',
     price: '78',
     color: 'red',
     weight: 14
    }
  }
}

顯示效果

<h5>3.6 </h5>

<button v-on:click="addItem">addItem</button>

這種方法會改變值，但是不會在頁面觸發更新，

export default{
  methods: {
    addItem() {
      this.list[1]={
        name: 'pineapple',
        price: 256
      }
    }
  },

引入Vue 通過Vue的set方法可改變數組的值，并能頁面觸發更新
Vue.set（數組對象， 第幾項 ， 變成什么）

import Vue from 'vue'
export default{
  methods: {
    addItem () {
      Vue.set( this.list, 1, {
        name: 'pineapple',
        price: 256
      })
    }
  },

<h2>4. v-bind指令</h2>

<h5>4.1 v-bind綁定標簽屬性</h5>

使用v-bind指令來綁定標簽屬性

<a v-bind:href="link" v-bind:title="hello">to baidu</a>

data () {
  return {
    link:'www.baidu.com',
    hello: '<h1>world</h1>',

v-bind可縮寫為“:”

<h5>4.2 v-bind綁定組件屬性</h5>
也可給組件綁定屬性

data () {
  return {
    dataA:'12',

<componentA :dataA="dataA"></componentA>

dataA屬性改變時， 組件中的dataA也會改變

<h5>4.3 v-bind綁定class</h5>
使用v-bind綁定class

<p class="green-color" v-bind:class="classStr">123</p>

data () {
  return {
    classStr:'red-color',

p標簽就擁有了red-color這個類
用v-bind綁定的class與組件原有的class不沖突

顯示效果

綁定的類也可以是個對象

<p v-bind:class="className">123</p>

data () {
  return {
      className: {
      'red-font': true,
      'blue-font': false,
      'yellow-font': true
    },

為true添加進class 為false的不添加

顯示效果

綁定的類也可以是個數組

<p v-bind:class="[classA,classB]">123</p>

data () {
  return {
    classA: 'classa',
    classB: 'classb',

顯示效果

可以通過變量控制顯示

<p v-bind:class="[{'classB': hasError}]">123</p>

data () {
  return {
    hasError: true,
classB: 'classb',

也可以綁定內聯樣式 ，樣式必須用引號

<p v-bind:style="linkCss">123</p>

data () {
  return {
    linkCss: {
      'color' : 'red' ,
      'font-size': '20px'
    },

<h2>5. v-if 和v-show指令控制顯示</h2>

v-if 的值為false時直接清除該元素
v-show 的值為false時講該元素設為display:none

export default{
  methods: {
toggle () {
  this.isPartA = !this.isPartA
}

<button v-on:click="toggle">toggle</button>

<p v-if="isPartA">partA</p>
<p v-show="!isPartA">partB</p>

顯示效果

顯示效果

也可以使用 v-else ，作用即v-if =false

<p v-if="isPartA">partA</p>
<p v-else>no data</p>