1. v-text:这个指令用于将vue实例中的data内的属性渲染到标签内。有两种写法:

  1. `<div v-text="数据"></div>`:该写法会将div内的所有内容清空,然后渲染成对应的数据。

  2. `<div>{{数据}}</div>`:该写法为v-text的简写,被称为胡子语法或差值语法。该写法只会在{{}}对应的地方渲染数据,而不会改变div内其他位置的内容

  3. 由上述两个特点可以知道,{{}}更实用,简便,所以用得更多

  4. 无法识别标签

2. v-html:这个指令与v-text的作用相同,只有一点不同,即可以识别标签

3. v-model:这个指令可以用于input,select,textarea,组件这四种。作用是双向数据绑定,在标签上改变的值会影响到data的数据,data的数据改变也会影响到标签上的值

4. v-show:这个指令用于改变元素的显示/隐藏。当v-show绑定的值为true时,元素显示;反之,隐藏。这个实现是利用display

5. v-if/v-else-if/v-else:这个指令同样可以改变元素的显示/隐藏。当绑定的值为true时,元素显示;反之,隐藏。与v-show不同的是,这个指令改变了DOM树,会将元素改变为注释节点。与v-show的取舍,需要看情景。例如,v-if改变了DOM树,比较耗性能,所以在频繁切换时,会选择使用v-show。

6. v-on:这个指令绑定了事件触发时执行的methods中的方法。

  1.写法

    1. <div v-on:click="方法名"></div>

    2. <div :click="方法名"></div>

  2. 当触发时要传入参数,则可以这样写:<div :click="方法(参数)"></div>

  3. 如果逻辑简单,可以直接用逻辑代码代替方法

  4. 修饰符:例如:<div :keyup.enter="方法"></div>

7. v-bind:该指令用于修改元素属性,例如<img v-bind:src="" />

  1. 简写:<img :src="" />

8. v-for:该指令用于循环渲染页面

  1. 写法:<li v-for="(item, index) in 数据">{{item}}</li>

  2. 数据:array | object | string | number

9. v-cloak:该指令用于为还没有被vue编译完成的胡子语法添加样式。需要配合css的属性选择器:[v-cloak]来添加样式

10. 还有两个很少用的指令v-once,v-pre

Vue-指令的更多相关文章

  1. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  2. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  3. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  4. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  5. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  6. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

  7. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  8. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  9. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  10. vue指令大全~~~

    是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...

随机推荐

  1. SVG PATH 生成器

    参考网站:http://dayu.pw/svgcontrol/ 主要功能:手动可视化生成 SVG图片PATH路径. 效果如下: 代码如下: <!DOCTYPE html> <!-- ...

  2. FFmpeg 结构体学习(四): AVFrame 分析

    在上文FFmpeg 结构体学习(三): AVPacket 分析我们学习了AVPacket结构体的相关内容.本文,我们将讲述一下AVFrame. AVFrame是包含码流参数较多的结构体.下面我们来分析 ...

  3. [Swift]LeetCode222. 完全二叉树的节点个数 | Count Complete Tree Nodes

    Given a complete binary tree, count the number of nodes. Note: Definition of a complete binary tree ...

  4. [Swift]LeetCode400. 第N个数字 | Nth Digit

    Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...

  5. 机器学习入门 - Google机器学习速成课程 - 笔记汇总

    机器学习入门 - Google机器学习速成课程 https://www.cnblogs.com/anliven/p/6107783.html MLCC简介 前提条件和准备工作 完成课程的下一步 机器学 ...

  6. MySQL开启远程连接权限

    对于我们刚开始安装的mysql或者mariadb来说,默认是不开启远程连接的.所以需要我们手动开启远程连接的权限.如果你是使用docker安装mysql那需要先进入容器中,这里就不讲如何进入容器了,百 ...

  7. 基于 dubbo 的分布式架构

    前言 现在越来越多的互联网公司还是将自己公司的项目进行服务化,这确实是今后项目开发的一个趋势,就这个点再凭借之前的 SSM 项目来让第一次接触的同学能快速上手. 浅谈分布式架构 分布式架构单看这个名字 ...

  8. 【从零开始自制CPU之学习篇07】最简单的ALU—全加器

    ALU是算术逻辑单元,是CPU中重要的一部分,因为CPU本质上就是不断重复最简单的计算.而我们这一版CPU的ALU部分更为简单,是一个只能做加法的ALU. 理论部分 我们需要一个能帮我们进行数学计算的 ...

  9. qt 拖拽 修改大小

    写次篇文章之前,qt窗口的放大缩小和拖拽我都是通过setGeometry方法实现的,但是作为windows程序,windows支持橡 皮筋式(拖拽时有一个虚框)拖拽和拉伸.通过setGeometry方 ...

  10. C#版 - Leetcode 201. 数字范围按位与(bitwise AND) - 题解

    C#版 - Leetcode 201. 数字范围按位与(bitwise AND) - 题解 在线提交: https://leetcode.com/problems/bitwise-and-of-num ...