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

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

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

渲染结果

• 双花括号 {{}}

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

  

    The result is {{status ? "success" : "fail"}}
  

3.列表渲染（v-for）

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

3.1 v-for作用于数组

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

 

  

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

3.2 v-for作用于对象

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

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

3.3 v-for配合class

 

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

  

 

结果：渲染出了多个li

3.5 组件列表渲染

---App.vue----

----ComponentA.vue----

 

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

 

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