指令【重点】

作用:简化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. 【leetcode刷题笔记】Remove Nth Node From End of List

    Given a linked list, remove the nth node from the end of list and return its head. For example, Give ...

  2. CURL抓取网页内容

    <?php $curl = curl_init();//初始化一个cURL对象 $url = "http://cart.jd.com/cart/cart.html?backurl=ht ...

  3. bzoj 4407 于神之怒加强版 —— 反演+筛积性函数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4407 推导如这里:https://www.cnblogs.com/clrs97/p/5191 ...

  4. Poj_1002_java解决

    一.Description 电话号码的标准格式是七位十进制数,并在第三.第四位数字之间有一个连接符.电话拨号盘提供了从字母到数字的映射,映射关系如下: A, B, 和C 映射到 2 D, E, 和F ...

  5. java代码GUI简单的。。。

    总结:觉得 package com.da; import java.awt.*; //逆向思维:important //创建一个String对象的数组,然后执行读取文本,把文本每一行存入数组,它将读取 ...

  6. 资料:MVC框架+SQL Server 数据集成引擎

    ylbtech-资料:MVC框架+SQL Server 数据集成引擎 1.返回顶部 1. 功能特点: MVC框架耦合性低视图层和业务层分离,这样就允许更改视图层代码而不用重新编译模型和控制器代码,同样 ...

  7. Linux统计文件夹占用空间大小--du命令基本用法

    命令行环境下要知道linux系统里一个文件夹以及其包含的文件实际所占用的空间大小,linux自带的命令 du可以很好地满足需求. 其他的用法我就不一一写出来了,就列本人觉得会用得最多的,直接上: $ ...

  8. 四种生成和解析XML文档的方法介绍

    解析XML的方法越来越多,但主流的方法也就四种,即:DOM.SAX.JDOM和DOM4J 1.DOM(Document Object Model) DOM是用与平台和语言无关的方式表示XML文档的官方 ...

  9. 2017 world final

    E 解题关键:二分时注意C函数的单调性. #include<bits/stdc++.h> #define eps 1e-8 #define INF 0x3f3f3f3f using nam ...

  10. 面试题: mysql 数据库去重 已看1 不好使

    mysql去重面试总结 前言:题目大概是这样的. 建表: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 CREATE TABLE `test2` (   `id` ...