指令【重点】

作用:简化Dom操作

参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

特点:
1、都是以v-开头
2、除了插值表达式,其它都写在标签的属性中

{{}} & v-text & v-html

在视图显示数据

{{}} 和 v-text 只能显示普通文本

{{}} 里面还可以进行一些简单的运算,或是三目表达式,但是不要写太复杂的逻辑,比如if判断,循环不支持

v-html 它可以将模型中字符串中带有的html标签,解析出来

v-on

注意点:
如果我们的v-on绑定的事件处理函数,没有参数,在写的时候,可以省略`()`,如果有参数,不能省略 事件还可以加上修饰符【监听键盘按下】 v-on:可以简写成 @

v-bind

绑定,当我们的内容是来源于model中的时候,v-bind一般常用于
src,to 这些属性的标签中 注意:
1、当我们有些属性的值,不是写死的情况下,就可以考虑使用v-bind:
2、v-bind: 可以简写成 `:`
3、v-bind的绑定是单向的,从模型到视图

v-model

双向数据绑定
模型 ---> 视图
视图 ---> 模型 用于双向数据绑定的标签 input radio checkbox... 应用场景:获取form表单值的时候,非常方便

v-if & v-show

特性:要想v-if和v-show起作用,必须给他绑定一个boolean类型的Model

v-if:
当值为true,dom元素会被创建出来,当值为false的时候
dom元素被删除 v-show:
当值为true,dom元素会被创建出来,并且显示(display:block),当它的值为false的时候,通过样式控制它隐藏(display:none),但是dom元素还在 实际工作中,如何抉择?
参考:https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
频繁需要切换的时候,用v-show 不频繁使用用v-if

v-for

循环渲染

渲染列表

注意点:
在遍历的时候,最好给它都加一个唯一标识符

v-pre & v-cloak & v-once【了解】

参考:https://cn.vuejs.org/v2/api/#v-pre

其它

Vue.js devtools 帮助查看Vue中数据的工具
安装方式:可以通过google插件

Vue中的指令(听博主说总结的很好)的更多相关文章

  1. Vue基础系列(四)——Vue中的指令(上)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  2. Vue基础系列(五)——Vue中的指令(中)

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

  3. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  4. vue中自定义指令

    //vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...

  5. Vue中基本指令用法

    指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...

  6. vue中的指令v-model

    Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀:都有着对应的官网介绍:https://cn.vuejs.org/v2/guide/forms.html v-model:数 ...

  7. vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  8. vue中自定义指令的使用

    原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...

  9. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

随机推荐

  1. C语言小程序(三)、判断两个日期之差

    输入两个日期,计算之间相差多少天. 用了两种方法实现,第二种利用结构体,代码比较清晰,其余的都一样. 1.普通的写法 #include <stdio.h> int leapyear(int ...

  2. tomcat可以访问默认页面,但是无法访问webapp下的指定项目

     tomcat可以访问默认页面,但是无法访问webapp下的指定项目 1.注意下安装tomcat时的默认端口,8005,8009,8080,我这边没有修改,根据需要自行修改,确保tomcat可以启动 ...

  3. 51Nod1766 树上的最远点对

    1766 树上的最远点对 n个点被n-1条边连接成了一颗树,给出a~b和c~d两个区间,表示点的标号请你求出两个区间内各选一点之间的最大距离,即你需要求出max{dis(i,j) |a<=i&l ...

  4. I2C Bus

    概述: I²C 是Inter-Integrated Circuit的缩写,发音为"eye-squared cee" or "eye-two-cee" , 它是一 ...

  5. sql查询将列里面的值替换为别的值但是实际值不变

    数据库有一张表BUG(缺陷记录表) 里面有字段severity(严重程度): severity的值实际为1,2,3,4,但希望在查询结果中将severity的1,2,3,4值显示为其他的值,但seve ...

  6. Microsoft Data Access Components 2.8

    今天在安装金蝶系统的时候,发现这个组件无法安装上 此组件如果跳过,不安装,将会导致金蝶安装完毕后,提醒无法创建账套,也就是金蝶软件无法连接到数据库上,所以此步为必须. 于是乎,网上找这个组件,下载地址 ...

  7. WPF 界面提示加载出错

    当WPF界面代码中包含多个 VisualStateManager.VisualStateGroups 时会导致界面无法正常显示,把这些代码注释掉就可以展示出界面.

  8. [转]VS 2013 未找到与约束contractname Microsoft.VisualStudio.Utilities.IContentTypeRegistryService...匹配的导出

    前几天,将Visual studio 2013 update 3 升级到了update 5.打开原来的解决方案,出现了 未找到与约束 contractname Microsoft.VisualStud ...

  9. 网络编程之socket编程

    TCP/IP协议 网络层的“ip地址”可以唯一标识网络中的主机,而传输层的“协议+端口”可以唯一标识主机中的应用程序(进程).这样利用三元组(ip地址,协议,端口)就可以标识网络的进程了,网络中的进程 ...

  10. Windchill 配置LOG文件,使开发中的代码能显示打印的信息

    如开发代码的类HomeLogic.java, 包路径在pnt.report.home 需求:需监控此类的打印数据 方法:配置D:\ptc\Windchill_10.1\Windchill\codeba ...