一:插值表达式

将data中定义的数据显示到模板上。

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）

二:vue指令-v-for

功能

列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法

<标签 v-for="(值, 索引或者属性名) in 目标结构" :key="唯一值"></标签>

• 索引可以省略
• 目标结构可以是：数组 / 对象 / 数字

小结

1. v-for的功能是对标签进行循环生成
2. 快速把数据赋予到相同的dom结构上循环生成

三:vue指令v-text和v-html

目的: 更新DOM对象的innerText/innerHTML

语法:

• v-text="vue数据变量"
• v-html="vue数据变量"

(较简单,重点掌握v-html)

代码运行后的效果

小结

v-text把值当成普通字符串显示, v-text ===> innerText

v-html把值当做html解析,v-html ===> innerHTML

四:vue指令v-show和v-if

作用

控制标签的可见与不可见

语法

• <标签 v-show="vue变量" />
• <标签 v-if="vue变量" />

如果vue变量的值为true，就可见，否则就不可见。

原理

• v-show 用的display:none隐藏   (频繁切换使用)
• v-if  直接从DOM树上添加或移除

<template><div><h1 v-show="isOk">v-show的盒子</h1><h1 v-if="isOk">v-if的盒子</h1><div><p v-show="age > 18">我成年了</p><p v-if="age > 18">我成年了</p></div></div>
</template><script>
export default {data() {return {isOk: true,age: 15,}}
}
</script>

小结

• v-show 性能较好，对应需要频繁切换显示与隐藏的功能，可以使用v-show。
• 注意无论变量是否为true还是false,它一定会创建元素的。
• v-if 会动态创建和删除元素。
• 在频繁的切换可见与不可见时，它的效率会低一点
• 如果变量的值为false,它将不会创建元素

特殊的适用v-if的场景：如果是登陆用户就显示头像 <img src="xxx" v-if="isLogin">

五:vue指令v-if,v-else-if,else

最后运行显示结果为 一般

六:vue指令v-bind

作用

v-bind用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。

格式

bind：绑定。以前学习过，用它来改变this的指向

<元素 v-bind:属性名1="值1" v-bind:属性名2="值2"></元素>
// 简写, 省略v-bind
<元素 :属性名1="值1" :属性名2="值2"></元素>

v-bind指令有简写用法  : 冒号，例如：

<img :src="data数据">

一般在是在属性名的=里面写一个data中的数据项，  :属性名="数据项" 称之为：把x绑定在y属性上

示例代码如下:

运行后显示(照片网上随意寻找,为了练习使用)

七:v-on和methods

作用

给标签绑定事件

语法

1. <标签 v-on:事件名="要执行的少量代码" >
2. <标签 v-on:事件名="methods中的函数" >
3. <标签 v-on:事件名="methods中的函数(实参)">

注意

1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件

示例代码:

运行后显示页面效果:

 this指向在methods内部访问数据。如 this.xxx

注意

1. v-on可以简写成 @。 即 @事件名="methods中的函数"
2. 事件名可以是任意合法的dom事件

Vue指令超详细演示理解相关推荐

1. 教你用webpack搭一个vue脚手架[超详细讲解和注释！]

   1.适用人群 1.对webpack知识有一定了解但不熟悉的同学.2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同学 ...

2. vue - 【超详细】网站接入使用支付宝支付功能，点击支付跳转新页面后生成订单及支付二维码，实现支付宝在线付款详细的教程（整个支付的完整配置及支付流程，一键复制源码开箱即用）！

   效果图 在vue网站网页项目中,实现跳转新页面生成订单,进行 "支付宝" 支付详细教程,包括详细的配置及示例完整源代码, 你可以直接复制示例的完整源码(保证可用),改个参数就能用了 ...

3. 让别人和自己看懂自己的程序代码？一文掌握Java单行多行、文档注释以及注解(Annotation)超详细的理解使用，IDEA注释注解快捷键和模板，提高程序代码更有可读性

   文章目录 单行和多行注释 文档注释(Java特有) Annotation(注解)的理解 常见的Annotation示例 IDEA注释注解快捷键及模板 自定义 Annotation JDK 中的元注解 ...

4. 超详细易理解的HTTPS（易上手哦）

   文章目录 1. 什么是 https 2.为什么要引入https 3.https工作流程 3.1对称加密 3.2非对称加密 3.3引入证书 数据指纹 未使用证书产生的问题 使用证书 4.https传输总 ...

5. 英文拼写纠错-超详细演示

   一.详细过程 拼写纠错任务目标是找到概率最大的 p(correct|incorrect)比如:incorrect='appl',而correct 可以为任何词,我们的目的就是要找到哪个词作为corre ...

6. 什么是云开发？小程序实例超详细演示～

   学习视频: 八分钟读懂云开发_哔哩哔哩_bilibili 小姐姐带你30分钟创建并上线小程序项目[云开发实战]_哔哩哔哩_bilibili 参考资料: 微信开放文档 (qq.com) 云开发_百度百科 ...

7. Vue基本指令（详细，好理解，示例代码）

   Vue指令可以帮助我们更好的实现交互功能.下面是对Vue的基本指令的整理,希望可以帮助到有需要的小伙伴~ 文章目录 指令 什么是指令 v-clock指令用法 数据绑定指令 数据响应式 指令 什么是指令 ...

8. Nginx实战部署常用功能演示(超详细版)，绝对给力~~~

   前言 上次分享了一些开发过程中常用的功能,但如果到真实环境中,其实还需要一些额外的配置,比如说跨域.缓存.配置SSL证书.高可用等,老规矩,还是挑几个平时比较常用的进行演示分享.上篇详见Nginx超详 ...

9. 常用Linux命令及其作用（超详细，带演示）

   常用Linux命令及其作用(超详细,带演示) 文章目录 常用Linux命令及其作用(超详细,带演示) 1. 提前了解 1.1 终端命令格式 1.2 --help 1.3 man command 查询使 ...

最新文章

1. [Ruby01]Class, Module, Object,Kernel的关系
2. Windows下的鱿鱼（Squid）
3. 资源文件的读取和使用
4. spring boot 在eclipse里启动正常，但打包后启动不起来
5. request请求和response响应时的乱码解决代码
6. Bamboolib -- 十分钟教会业务小姐姐做数据分析
7. Python学习笔记（四）Python函数
8. 办公技巧：Excel下拉菜单小技巧，赶紧学一下！
9. fanuc机器人与视觉通信_要说工厂干起活来：工业机器人和数控机床才是真正的一对！...
10. 紫色管理系统UI bootstrap后台模板
11. 【idea基础知识】常用快捷键整理
12. php 导出excel 2007,使用PHPExcel导出Excel表
13. 万圣节主题海报设计，少不了的素材
14. Redis：复制，第1部分——概述 复制与分片、哨兵与集群、Redis拓扑
15. java中继承applet类_java.applet.Applet类
16. line-height学习与总结
17. Cobalt Strike 和 MSF 免杀上线
18. 网络安全--通过握手包破解WiFi(详细教程)
19. 安洵信息渗透工程师面试经验分享
20. 射频电路PCB的设计技巧

热门文章

1. 平板电脑系统优化垃圾清理软件CleanMyMac X
2. 简单的docker-k8s集群部署
3. 【javaSE】java异常详解
4. 代理一个手游需要多少？
5. 在Android项目中调用FFmpeg命令
6. 整体功能大于部分功能之和_功能性思考，第1部分
7. 再学全面质量管理(转载)
8. 「二分类算法」提供银行精准营销解决方案
9. 玄武短信接口和移动MAS短信接口的API封装
10. 数字图像处理：图像缩放和降低灰度级