Vue API学习——指令

官网 https://cn.vuejs.org/v2/api/

1. 分类概述

• 全局API

• 参数选项：在创建Vue实例对象时的一些参数设置。参数选项有以下几类：

数据、DOM、生命周期钩子、资源、组合、其他

• 实例对象本身的属性和方法：创建完Vue实例对象以后实例对象所拥有的，以美元符$开头，直接用Vue实例对象调用。分为以下几类

• 指令：

• 内置组件

2.指令（v-text、v-html、v-bind、{{}}）

• v-text：在标签的开始标签中使用，将值作为当前标签的内容，也就是替换标签中原有内容
• v-html：与v-text类似，只不过如果值符合HTML语法，那么会按照HTML的形式显示在页面上。

------------------App.vue----------------------

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

<script>
export default {
  data(){
    return {
      hello: "<span>World is so big that I want to see it.</span>"
    }
  }
}
</script>

• v-bind   标签属性中绑定变量使用v-bind，v-bind:属性名=属性值，这里v-bind也可以省略，直接用:属性名=属性值即可。

下面的例子中，hello为data中的一个字段，也就是一个变量。

  <div>
    <p v-bind:title="hello"></p>
    <span v-bind:title="hello"></span>
  </div>

渲染结果

• 双花括号 {{}}

不能在标签的属性中直接使用（Vue1.0可以，但是Vue2.x不在支持）。可以在标签的开始标签和闭合标签之间使用，其中放入变量即可渲染出变量的值。此外，双花括号之间还可以写入简单的JS，比如条件表达式，下面的例子中status为data中的一个字段，当前值为true。

  <div>
    <span>The result is {{status ? "success" : "fail"}}</span>
  </div>

3.列表渲染（v-for）

         列表渲染使用v-for指令，写在标签的开始标签中，可用于数组或者对象，渲染的结果是重复当前标签，并赋予标签相应的内容。

3.1 v-for作用于数组

• v-for = "item in list"  item表示数组中的每一项
• v-for = "(item, index) in list" index表示数组中每一项的索引，从0开始

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

 

  

结果可以看出循环渲染了多个p标签和div标签

3.2 v-for作用于对象

• v-for = "value in obj"  value表示对象的每个字段的值
• v-for = "(value, key) in obj" key表示对象中每个字段的名称

<template>
  <div>
    <p v-for="value in obj">{{value}}</p>
    <div v-for="(value,key) in obj">{{key}}: {{value}}</div>
  </div>
</template>

      obj:{
        age:16,
        job:"teacher",
        favoriteFood:"apple"
      }

3.3 v-for配合class

<template>
  <div>
    <p v-for="value in obj" >{{value}}</p>
    <div v-for="(value,key) in obj" :class="{appear:key === 'age'}">{{key}}: {{value}}</div>
  </div>
</template>

 

3.4 v-for配合li更符合语义

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

  

 

结果：渲染出了多个li

3.5 组件列表渲染

---App.vue----

<template>
    <div>
      <component-a></component-a>
      <span>Hello World</span>
    </div>
</template>

<script>
  import ComponentA from './components/ComponentA'
export default {
  components: {ComponentA},
  data(){
    return {
      obj:{
        age:16,
        job:"teacher",
        favoriteFood:"apple"
      },
      list:[
        {
          name:"apple",
          price:2,
          color:"red"
        },
        {
          name:"pear",
          price:3,
          color:"white"
        },
        {
          name:"banana",
          price:3,
          color:"yellow"
        }
      ]
    }
  }
}
</script>

<style>

</style>

----ComponentA.vue----

<template>
    <div>I am a component a</div>
</template>

<script>
    export default {
        name: "ComponentA"
    }
</script>

<style scoped>

</style>

 

如果将App.vue中对<component-a>也使用v-for，即

<template>
    <div>
      <component-a v-for="item in list"></component-a>
      <span>Hello World</span>
    </div>
</template>

 

     组件列表渲染的意义：为子组件使用v-for的用途是可以将循环出来的内容动态地传入子组件，当子组件获得了父组件的传值以后，可以做一些相应的操作；此外，能够生成多个子组件。

<template>
    <div>
      <component-a v-for="item in list" :price="item.price"></component-a>
      <span>Hello World</span>
    </div>
</template>