一、什么是指令?

在 vue 中,指令以 v- 开头,是一种特殊的自定义行间属性。指令属性的预期值是一个表达式,指令的职责就是:表达式的值改变时,相应地将某些行为应用到DOM上。只有v-for是一个类外,后边跟的不是表达式。

一个指令能够接收一个参数,在指令名称之后以冒号表示。例如:

<a v-bind:href="url">vue官网</a>

添加指令后,url 会被当作变量来解析。

二、常用指令

2.1、v-model 双向绑定数据

v-model 指令可以用在 input、textarea、select元素上创建双向数据绑定。他会根据控件类型自动选取正确的方法来更新元素。

使用语法:<input type="text" v-model="msg"/>

<!-- 修改input中的值,标签p元素内容随之改变 -->
<input v-model="content"/><p>{{ content }}</p> data () {
return {
content: '我是双向数据绑定,可以有默认值',
}
}

2.2、v-for 列表渲染

作用:借助 v-for 把一个数据渲染成一个列表。

使用语法:<li v-for="item in list"></li>

其中 list 是源数据数组,item是被迭代的数组元素的别名。

<!-- 使用实例 -->
<ul>
<li v-for="item in list" :key="item.id">{{item.girl}}</li>
</ul> data(){
return{
list:[
{ id:'1' , girl:'花花'},
{ id:'2' , girl:'草草'}
]
}
})

2.3、v-bind 动态绑定属性

作用:用来动态绑定属性,属性值有变动的时候及时对页面数据或样式等保持最新状态。

使用语法:

<div v-bind:attribute = " 变量 "></div>

<!-- 更改 url 图片地址,网页内图片也会实时更新 -->
<img v-bind:src="url" alt=""> data () {
return {
url:'http://picture.ik123.com/uploads/allimg/161223/4-161223163338.jpg'
}
}

2.4、v-on 绑定事件

作用:给元素绑定事件监听,触发事件后,执行 methods 里面对应函数。可以缩写为@。

使用语法:

<div v-on:click="fun"></div> 
//或
<div @click="fun"></div> <!-- 点击按钮,调试器会打印出vue -->
<button @click="print">点击,打印vue</button> methods:{
print(){
console.log('vue')
}
}

注意:上述 v-on 使用的时候没有传参,所以方法后的小括号可以省略。

v-on 传参时,必须添加括号,使用如下。

<!-- 点击按钮,调试器会打印出vue -->
<button v-for="item in list" @click="print(item)">点击{{item}}</button> data () {
return {
list:[ 'one', 'two', 'three' ]
}
},
methods:{
print(item){
console.log('点击',item)
}
}

这是一个遍历的按钮组,点击的时候,打印当前元素内容。

2.5、v-if / v-else-if / v-else

作用:根据逻辑判断,控制元素的显示和隐藏。

使用语法:<div v-if=" boolean|表达式 " ></div>

注意:v-if / v-else-if / v-else 使用语法都是相同的,但是v-else-if 和 v-else 必须与v-if连用,不能单独使用。

<!-- 修改show的值,元素内容也会改变 -->
<div >
<span v-if="show">真</span>
<span v-else>假</span>
</div> data () {
return {
show:true,
}
}

2.6、v-show / v-hide

作用:控制元素的显示和隐藏。

使用语法:

<div v-show=" boolean|表达式 " ></div> //表达式为真的时候显示
<div v-hide=" boolean|表达式 " ></div> //表达式为真的时候隐藏
<div >
<span v-show="show">真</span>
<span v-hide="show">假</span>
</div> data () {
return {
show:true,
}
}

2.7、v-html 解析html标签

2.8、v-once 进入页面时 只渲染一次 不再进行渲染

2.9、v-cloak 防止闪烁

2.10、v-pre 把标签内部的元素原位输出

2.11、v-text 解析文本

三、v-if 与 v-show 的区别

相同点:都是控制元素的隐藏显示的。

区别:

  • v-if 是条件渲染,满足条件时,节点元素都会被渲染出来,包括事件绑定等,如果不满足条件,节点就不会被渲染出来,包括事件等。但 v-show 是借助 display:none 隐藏节点的显示,它的内容还有事件等始终都存在。
  • v-if 来回切换时,浏览器需要不停地渲染,损耗性能,所以成本很高。但是 v-show 只是隐藏显示,所以成本较低。
  • v-show 在页面初始化的时候,需要全部渲染,相对 v-if 成本要高。
  • 根据 v-if 的特性,适合用于加快初始化的渲染速度。而 v-show 适合用于频繁切换的场景。

重学VUE——vue 常用指令有哪些?的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. 新人成长之入门Vue.js常用指令介绍(一)

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribu ...

  7. vue入门-常用指令操作

    指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书 v-model:实现数据和视图的双向绑定 v-text:在元素中插入值 v-html:在元素中插入标签或者插入文本 v-if:根据 ...

  8. vue之常用指令

    事件缩写 v-on:click= 简写方式 @click= 事件对象$event <!DOCTYPE html> <html lang="en"> < ...

  9. vue的常用指令

    https://www.bootcdn.cn/ 前端资源库 <!-- 常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-i ...

  10. Vue.js常用指令总结

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind ...

随机推荐

  1. 操作系统思考 第十一章 C语言中的信号量

    第十一章 C语言中的信号量 作者:Allen B. Downey 原文:Chapter 11 Semaphores in C 译者:飞龙 协议:CC BY-NC-SA 4.0 信号量是学习同步的一个好 ...

  2. 【原创】利用“进程注入”实现无文件不死webshell

    引子 上周末,一个好兄弟找我说一个很重要的目标shell丢了,这个shell之前是通过一个S2代码执行的漏洞拿到的,现在漏洞还在,不过web目录全部不可写,问我有没有办法搞个webshell继续做内网 ...

  3. MATLAB—数组运算及数组化编程

    文章目录 前言 一.数组的结构和创建 1.数组及其结构 2.行数组的创建 3.对数组构造的操作 二.数组元素编址及寻访 1.数组元素的编址 2.二维数组元素的寻访 三.数组运算 非数的问题 前言 编程 ...

  4. MySQL约束条件 表关系建立 查询数据

    约束条件 unsigned 无符号 即为非负数,用此类型可以增加数据长度 例如 tinyint最大范围是127,那tinyint unsigned 最大就可以到 127 * 2 通常用在不会出现符号的 ...

  5. .Net 之进制转换 余位补全

    十进制转二进制 Convert.ToString(n, 2) 其中 n -- 源类型 可以是shrot Byte Int Uint Long 2 -- 目标位 可以是2,8,10,16 同理十进制转1 ...

  6. yield 关键字的认知

    namespace ConsoleDemo{ class Program { static void Main(string[] args) { string[] str = { "1&qu ...

  7. C#中的信号量---Semaphore

    emaphore是System.Threading下的类,限制可同时访问某一资源或资源池的线程数. 常用构造方法 https://msdn.microsoft.com/zh-cn/library/e1 ...

  8. 【java虚拟机】类加载机制

    作者:平凡希 原文地址:https://www.cnblogs.com/xiaoxi/p/6959615.html 一.什么是类的加载 类的加载指的是将类的.class文件中的二进制数据读入到内存中, ...

  9. LeetCode42. 接雨水(java)

    42.接雨水 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 上面是由数组 [0,1,0,2,1,0,1,3,2,1,2,1] 表示的高度图,在这种 ...

  10. Linux从头学09:x86 处理器如何进行-层层的内存保护?

    作 者:道哥,10+年的嵌入式开发老兵. 公众号:[IOT物联网小镇],专注于:C/C++.Linux操作系统.应用程序设计.物联网.单片机和嵌入式开发等领域. 公众号回复[书籍],获取 Linux. ...