Vue學習之路（三）---基本指令

基本指令的寫法都是以v-開頭，例如v-html，v-bind:title……等等。
現在說下基本指令一些用法：

1.基本的形式,v-text和v-html的區別

網頁上的顯示效果

2.v-for的使用

代碼（循環遍歷數組）

效果圖

說明：如果需要索引的話可以寫成如下形式（vue2.0的寫法）

 <div v-for="(item,index) in listArr" v-text="item.name + '----' + item.age + '----' + index"></div>

代碼（循環遍歷對象）

效果圖

說明：如果需要key鍵值的話，代碼如下

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

代碼（循環遍歷組件）

首先在循環組件之前需要做一下準備工作，新建一個components組件文件夾，然後在該文件夾中新建一個a.vue文件
文件結構圖如下

a.vue文件中的代碼如下

<template>
  <div>{{msg}}</div>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'I am a template!Over'
      }
    }
  }
</script>

接下來在App.vue文件中引入a.vue

import componetA from './componets/a'

接下來可以循環遍歷組件了，代碼圖如下

效果圖

因爲對象有三個key，所以得到的值是三個，也就是說v-for循環了三遍

3.v-on的使用

關鍵代碼

效果圖

App.vue中源碼

<template>
  <div id="app">
<!--    <div :title="name"></div><br>
    v-html: <span v-html="html"></span><br>
    v-text: <span v-text="html"></span><br>
    v-for<br>
    <div v-for="(item,index) in listArr" v-text="item.name + '&#45;&#45;&#45;&#45;' + item.age+ '-&#45;&#45;&#45;&#45;' + index"></div>
    v-for遍歷對象<br>
    <div v-for="(value,key) in listObj">{{value}}</div>-->
    <!--<componentsA v-for="value in listObj" v-text="value + '    '"></componentsA>-->
    <div v-for="(item,index) in listArr" v-text="item.name + '------' + item.age+ '-----' + index"></div>
    <button v-on:click="add">add</button>
  </div>
</template>

<script>
import componentA from './components/a'
export default {
  components: {componentA},
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: 'Julian',
      sex: 'Man',
      age: 18,
      html: '<span style="color: red">第一個</span>',
      listArr: [
        {
        name: 'a',
        age: 18
      },
        {
          name: 'b',
          age: 19
        },
        {
          name: 'c',
          age: 20
        }],
      listObj: {age: 18,name: 'zs',sex: 'man'}
    }
  },
  methods: {
    add: function (){
      this.listArr.push({
        name: 'd',
        age: 100
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

特別提醒：在vue中，數組對象並不是所有的數組方法會觸發列表的更新，比如說listArr[1] = {},listArr.length = newLength,這兩種方法都不能使數組列表更新，如果我們需要使用更改數組，可以使用全局Vue.set(需要修改的數組，索引，替代的項)

//首先要引入Vue
import Vue from 'Vue'
Vue.set(this.listArr,1,{name: 'e',age:20})

4.v-bind綁定標籤屬性，v-bind:title,可以縮寫爲:title

v-bind:title,v-bind:href,v-bind:class,v-bind:style,自定義屬性v-bind:dataA,v-bind綁定的屬性都是動態渲染的。

（1）v-bind:class的使用
1.0 類名綁定對象

//html
<div :class="classObj"></div>
//data中的數據
classObj: {'classA': true,'classB':false}//這個時候div的class顯示爲classA

2.0 類名綁定數組

//html
<div :class="classArr"></div>
//data中的數據
classArr: ['classA','classB']//這個時候div的class顯示爲classA classB

3.0 類名綁定數組和對象（混合使用）

//html
<div :class="['classA',{'classB':isData}]"></div>//這個時候div的class也顯示爲classA classB
//data中的數據
isData: true,

5. v-if，v-else，v-show的使用

一般v-if與v-else 配合着使用，如果條件值爲false，v-if是直接將dom元素移除，而v-show則是設置爲display:none，下面我就舉例子說明下：
源碼

<template>
  <div id="app">
<!--    <div :title="name"></div><br>
    v-html: <span v-html="html"></span><br>
    v-text: <span v-text="html"></span><br>
    v-for<br>
    <div v-for="(item,index) in listArr" v-text="item.name + '&#45;&#45;&#45;&#45;' + item.age+ '-&#45;&#45;&#45;&#45;' + index"></div>
    v-for遍歷對象<br>
    <div v-for="(value,key) in listObj">{{value}}</div>-->
    <!--<componentsA v-for="value in listObj" v-text="value + '    '"></componentsA>-->
   <!-- <div v-for="(item,index) in listArr" v-text="item.name + '&#45;&#45;&#45;&#45;&#45;&#45;' + item.age+ '-&#45;&#45;&#45;&#45;' + index"></div>
    <div :class="classArr">今天的天氣很好</div>
    <div :class="classObj">今天的天氣很好</div>
    <div :class="['classA',{'classB':isClassB}]">今天的天氣很好</div>-->
    <div v-if="hasErr">v-if</div>
    <div v-show="!hasErr">v-show</div>
    <button v-on:click="add">add</button>
  </div>
</template>

<script>
import Vue from 'Vue'
import componentA from './components/a'
export default {
  components: {componentA},
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      name: 'Julian',
      sex: 'Man',
      age: 18,
      isClassA: true,
      isClassB: false,
      hasErr:false,
      html: '<span style="color: red">第一個</span>',
      listArr: [
        {
        name: 'a',
        age: 18
      },
        {
          name: 'b',
          age: 19
        },
        {
          name: 'c',
          age: 20
        }],
      listObj: {age: 18,name: 'zs',sex: 'man'},
      classArr: ['classA','classB'],
      classObj: {'classA': true}
    }
  },
  methods: {
    add: function (){
      this.listArr.push({
        name: 'd',
        age: 100
      });
      Vue.set(this.listArr,0,{name:'ls',age:150});
      this.hasErr = !this.hasErr;
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
.classA {
  color: red;
}
.classB {
  background: blue;
}
</style>

關鍵代碼

//html中
 <div v-if="hasErr">v-if</div>
 <div v-show="!hasErr">v-show</div>
//data數據中
  hasErr:false,
//methos方法中
  methods: {
    add: function (){
      this.hasErr = !this.hasErr;
    }
  }   

效果示意圖