指令【重点】

作用:简化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. Linux下用FFMPEG采集usb摄像头到RTMP

    Linux下用 FFMPEG 采集 usb摄像头视频 和 摄像头内置麦克风音频 到RTMP服务   ffmpeg -f video4linux2 -qscale 10 -r 12 -s 640x480 ...

  2. ACM学习历程—广东工业大学2016校赛决赛-网络赛C wintermelon的魔界寻路之旅(最短路 && 递推)

    题目链接:http://gdutcode.sinaapp.com/problem.php?cid=1031&pid=2 题目由于要找对称的路径,那么狠明显可以把右下角的每一块加到左上角对应的每 ...

  3. 【C&C++】查看代码运行时间

    查看代码运行时间有助于更好地优化项目代码 1. Windows平台 windows平台下有两种方式,精度有所不同,都需要包含<windows.h>头文件 1) DWORD GetTickC ...

  4. 多级联动下拉菜单--cxSelect

    jquery cxSelect插件 github地址:https://github.com/ciaoca/cxSelect demo地址:http://code.ciaoca.com/jquery/c ...

  5. w3c上的SQL 教程---基本语法 语句学习

    SQL 教程路径:http://www.w3school.com.cn/sql/index.asp

  6. Maven(2)-坐标和依赖

    本文简要介绍Maven里面的坐标(coodinate)以及maven依赖管理(Dependency) 一.坐标 先来个截图: 在上图peoject栏目有groupId,artifactId,versi ...

  7. 机器学习:Jupyter Notebook中numpy的使用

    一.Jupyter Notebook的魔法命令 # 模块/方法 + ?或者help(模块/方法):查看模块/方法的解释文档: 1)%run # 机械学习中主要应用两个魔法命令:%run.%timeit ...

  8. Android精品资源汇总,10个源码(持续更新)

    最近一直在学习Android,在各大社区逛,总结下自己看到的一些不错的源码.希望可以给大家带来帮助. 1.Android精品源码:带动态效果的Button(按钮) 最喜欢各种效果的按钮了,没办法就是这 ...

  9. zookeeper.out: Permission denied错误解决方法

    [hadoop@node1 root]$ zkServer.sh start JMX enabled by default Using config: /opt/software/zookeeper- ...

  10. /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/

    <!DOCTYPE html> /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ <html lang=" ...