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;
    }
  }   

效果示意图