指令【重点】

作用:简化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. 深入V8引擎-枚举+位运算实现参数配置

    不知不觉都快月底了,看了看上一篇还是6号写的,惭愧惭愧,说好的坚持.为了证明没有偷懒(其实还是沉迷了一会dota2),先上一个图自证清白. 基本上从初始化引擎,到Isolate.handleScope ...

  2. Parallel Programming-Parallel.Invoke

    本文主要介绍Parallel.Invoke的使用. 一.使用例子 class ParallelInvoke { public void Action1() { Thread.Sleep(); Cons ...

  3. NBIOT回答

    该部分分享的是物联网各垂直应用领域里,NB-IoT技术的部署,看看适合NB-IoT技术的垂直应用场景有哪些?垂直应用服务商又该如何部署? 1 NB-IoT适合的垂直应用场景有哪些? 2 NB-IoT垂 ...

  4. Centos环境docker的正确安装及疑难杂症

    根据官方文档:https://docs.docker.com/install/linux/docker-ce/centos/搭建docker 1.卸载docker旧版本: sudo yum remov ...

  5. uboot搬移部分和重定位部分的代码分析

    来看一下搬移部分和重定位部分的代码: relocate: /* 把U-BOOT重新定位到RAM*/          //r0=0; adr r0, _start /* r0是代码的当前位置*/ ld ...

  6. 加固mysql服务器

    实验环境:CentOS7 [root@~ localhost]#yum -y install mariadb-server [root@~ localhost]#mysql_secure_instal ...

  7. LAMP 1.9域名301跳转

    给两个域名分主次.输入次域名跳转到主域名然后进行访问. 首先打开虚拟机配置文件. vim /usr/local/apache2/conf/extra/httpd-vhosts.conf 把这段配置添加 ...

  8. EchoServer和EchoClient模型的改进1之多线程

    在之前的EchoServer模型个EchoClient模型中,客户端和服务端只是单纯的一一对应的关系,如果存在多个客户端和一个服务端,这就需要具体处理了.在这里我们明显想到的第一种方案是使用多线程处理 ...

  9. 使用Timer为界面执行异步任务

    -------------------siwuxie095                         工程名:TestSwingTimer 包名:com.siwuxie095.timer 类名: ...

  10. Learning Python 008 正则表达式-003 search()方法

    Python 正则表达式 - search()方法 findall()方法在找到第一个匹配之后,还会继续找下去,findall吗,就是找到所有的匹配的意思.如果你只是想找到第一个匹配的信息后,就不在继 ...