v-cloak:解决网速延迟 闪烁问题
v-text=msg: 和{{}}表达式一样,没有闪烁问题,但是前后不能加别的,覆盖原本的内容 innerText
v-html=msg:innerHtml,一样可以打印标签
v-band:src='msg':为元素绑定属性;可以这样写 : src='msg' 也可以写一些js表达式 :src='"..//"+msg'
v-on:click='show':事件绑定机制 对应的在 mehods 对象 绑定的方法 或者 @表示

事件 修饰符
@click.stop 阻止事件冒泡
@click.prevent 阻止默认事件,比如 跳转,提交
@click.self 实现只有点击当前元素的是才触发函数 也可以阻止冒泡。但是只是当前元素
@click.once 只触发一次

Vue会监听data数据的改变。自动同步,不用管页面以及渲染

箭头函数解决this作用域的问题。内部的this等于外部的this

v-model 双向数据绑定,只能运用表单元素

类和行内样式都可以用对象的方式书写或者以对象数组的形式 :style="color:'red',font-size:'18px'"

v-for:循环 数组
<p v-for="(item,i) in list">{{i}}-------------{{item}}</p>
item:数组的每一项,i:索引。类似于 for in

循环对象
<p v-for="(val,key,i) in user">{{val}}-------------{{key}}</p>
val:键,key:值。n

迭代数字
<p v-for="count in 10">count</p>

在使用 v-for 循环的时候 或者 特别的时候 需要唯一性,可以用:key 属性绑定唯一性

v-if:true 删除或者创建元素
v-show 不会删除。只是切换元素的 display:none样式

表达式 不一定只能是值,可以是方法 <p>{{search()}}</p>

过滤器

作用:文本的格式化

调用方式:{{name| 过滤器NameD('123')}}//可以传递多个参数。可以调用多个过滤器

定义:Vue.filter(NameD,function(data,sd){
return data+"12"+sd.repace(/疯狂/g,'谢谢')// 替换可以是正则,可以是字符串
})

自定义 全局按键修饰符
Vue.config.keyCodes.f2=113

自定义指令

v-focus

el:绑定的元素 是原生的DOM对象
Vue.directive('focus',{
bind:function(el){}, //每当绑定的时候执行一次,没有放入dom,只是在内存中 只能一次
inserted:function(el){}// 当元素放入dom的时候
updated:function(el){} // 组件更新的时候执行
})

Vue.js——4.指令 笔记的更多相关文章

  1. vue.js自定义指令入门

    Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

  2. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  3. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  4. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  5. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  6. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  7. Vue.js 2.x笔记:指令(4)

    1. 内置指令 指令是Vue.js 中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM 行为. Vue.js 本身提供了大量的内置指令来进行对DOM 的操作,同时可以开发自定义指令. 2. ...

  8. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  9. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

随机推荐

  1. Json实体类驼峰名称转化器

    背景 我们常用一些网站,将json转化成实体类.但不巧的是,这些自动生成的都是小驼峰.需要进一步的改成大驼峰+JsonProperty.接着同事说他已经有个工具了.我稍微简化了一下 方法 首先行分离. ...

  2. 使用Ubuntu系统管理包工具(apt)部署Zabbix企业级监控系统

    使用Ubuntu系统管理包工具(apt)部署Zabbix企业级监控系统  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Ubuntu系统部署笔记:https://www.cnblo ...

  3. 20200119日志 EPLAN高压房 VFD 单线图 心得

    提纲: EPLAN 画单线图的方法,可以先绘制原理图,然后在一个柜子里面的器件 用方框圈起来.方框名称一样.注意 一个工程里面的器件编号是唯一的. 断路器选型. PT 手车 接地刀作用     具体内 ...

  4. 小程序分享报错 Cannot read property 'apply' of null;at page XXX onShareAppMessage function

    Cannot read property 'apply' of null;at page XXX onShareAppMessage function 然后看了下自己的代码,分享按钮在子组件里, at ...

  5. netty权威指南学习笔记八——编解码技术之JBoss Marshalling

    JBoss Marshalling 是一个java序列化包,对JDK默认的序列化框架进行了优化,但又保持跟java.io.Serializable接口的兼容,同时增加了一些可调参数和附加特性,这些参数 ...

  6. 官网英文版学习——RabbitMQ学习笔记(五)Publish/Subscribe

    发布/订阅模式:把一个消息发送给多个消费者. 前几篇文章的思想是,我们好像看到了生产者将消息直接发送给queue,然后消费者也从queue中进行消费.其实并非如此,RabbitMQ中的消息传递模型的核 ...

  7. 三、JavaScript之隐藏HTML元素

    一.代码如下 二.点击前效果 三.点击后效果 <!DOCTYPE html> <html> <meta http-equiv="Content-Type&quo ...

  8. 六十四、SAP中的内表的9种定义方式

    一.内表一共有9种定义方式,如下: 二.执行如下 *&--------------------------------------------------------------------- ...

  9. bash 内嵌命令 printf 用于进制转换

    printf - 格式化并显示数据 printf "%d" 0x10 printf "%x" 16

  10. 2020/2/17 zzcms8.2 PHP代码审计

    0x00 看网站结构 ********************************* * * * ZZCMS产品版目录结构 * * * ****************************** ...