VUE基础知识（三）

vue指令介绍

v-text

说明: 文本数据渲染

用法: v-text = "Vue实例中的数据" => 简写 {{Vue实例中的数据}}

相当于JavaScript中的innerText

v-html

说明: HTML渲染数据

用法:v-html = "Vue实例中的数据"

会解析html结构 渲染至页面

相当于JavaScript中的innerHTML

v-on

说明: 事件绑定(绑定事件监听器)

用法: v-on:事件名 = "事件处理函数" => 简写 @事件名 = "事件处理函数"

• @事件名.修饰符 = “事件处理函数”
• 逻辑比较少的可以直接写在行内
• 逻辑较多的写到 methods 中 注意: 操作Vue实例上的数据要跟上 this
• 可以通过实参传递($event) 获取事件参数e

v-bind

说明: 属性绑定(行内属性)

用法: v-bind:属性名="Vue实例中的数据" => 简写 :属性名="Vue实例中的数据"

当Vue实例中的数据改变之后 页面会同步更新

v-model

说明: 双向数据绑定

用法: v-model = "Vue实例中的数据"

v-for

说明: 循环渲染

用法: v-for = "(item,index) in items" :key = "index"

v-if,v-else,v-else-if

说明: 条件(表达式或布尔值)判断渲染

用法:

v-if = "表达式或布尔值"

v-else-if = "表达式或布尔值"

v-else

v-show

说明: 条件渲染

用法: v-show = "表达式或布尔值"

根据表达式或布尔值的真假切换元素的display属性

v-cloak

说明: 这个指令保存在这个元素上 直到关联实例结束编译，用于禁止屏幕闪烁。

<div> {{message}} </div>

<div> hello world! </div>

一般渲染是要经过如上两个步骤的，现在渲染只需要忽略第一个的出现，从而减少闪烁。

v-once

说明: 这个指令添加的元素 内部的胡子语法只会在第一次渲染的时候执行解析一次 后面数据发生改变后也不会触发更新