Vue中的指令(听博主说总结的很好)
指令【重点】
作用:简化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中的指令(听博主说总结的很好)的更多相关文章
- Vue基础系列(四)——Vue中的指令(上)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列(五)——Vue中的指令(中)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue中插槽指令
08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue中基本指令用法
指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地 ...
- vue中的指令v-model
Vue的指令:其实就是单个JavaScript表达式,一般来说是带有v-前缀:都有着对应的官网介绍:https://cn.vuejs.org/v2/guide/forms.html v-model:数 ...
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- vue中自定义指令的使用
原文地址 vue中除了内置的指令(v-show,v-model)还允许我们自定义指令 想要创建自定义指令,就要注册指令(以输入框获取焦点为例) 一.注册全局指令: // 注册一个全局自定义指令 `v- ...
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
随机推荐
- OSS阿里云文件上传 demo。
所需jar包: aliyun-openservices-1.2.3.jar jdom-1.1.jar commons-codec-1.4.jar commons-logging-1.1.1.jar g ...
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...
- 【转】 Pro Android学习笔记(三五):Menu(6):XML方式 & PopUp菜单
目录(?)[-] 利用XML创建菜单 XML的有关属性 onClick事件 Pop-up菜单 利用XML创建菜单 在代码中对每个菜单项进行设置,繁琐且修改不灵活,不能适配多国语言的要求,可以利用资源进 ...
- canvas线条笔帽及连接
1) 线条笔帽篇: 1 function draw (id) { 2 var canvas = document.getElementById(id); 3 context = canvas.getC ...
- PCB设计基础及技巧
一.设计步骤 (1)PCB布局 先放置接口类外设: 根据飞线的接口方向,定位各个模块的方位: 局部模块化(按照一个方向逐个局部化): (2)PCB布线 设置设计规则: 先布过孔(电源.地.长线),防止 ...
- PopupWindow --- 弹出底部窗体
第一步 : 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:a ...
- assert.strictEqual()
assert.strictEqual(actual, expected[, message]) 使用全等运算符(===)测试 actual 参数与 expected 参数是否全等. // 格式 ass ...
- AngularJS中的DI
AngularJS中的DI一直以为Angular中的DI是很高大上的东西,也自己写过一个DI的demo,知道其中的难点就是最后动态代码的执行:我现在知道了参数的值,也知道了我要执行的方法/创建对象的类 ...
- 面试题: mysql数据库 已看1 简单的sql练习
数据库总结--MySQL常见面试题 2015年03月24日 17:56:06 阅读数:7787 1.根据部门号从高到低,工资从低到高列出员工的信息 select * from employee ord ...
- Struts学习总结 学习
ContextMap 包含值栈包含 root(list结构)和context(map结构) 值栈包含contextMap的引用. Actioncontext是工具类 可以获取他们 Struts2拥 ...