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 ...
随机推荐
- 【leetcode刷题笔记】Minimum Depth of Binary Tree
Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...
- CMake简易入门
使用CMake编译 CMake工具用于生成Makefile文件.用户通过编写CMakeLists.txt文件,描述构建过程(编译.连接.测试.打包),之后通过解析该文件,生成目标平台的Makefile ...
- 基于FTP服务、JAVA实现文件同步操作
package lixj.ftp; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...
- HihoCoder1665方块游戏([Offer收割]编程练习赛40)(线段树)
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho在玩一款类似俄罗斯方块的游戏.与原版俄罗斯方块不同的是,落下方块都是长度不一的横向长条,并且不能移动也不能变成竖直方 ...
- bzoj 3572: [Hnoi2014]世界树 虚树
题目: Description 世界树是一棵无比巨大的树,它伸出的枝干构成了整个世界.在这里,生存着各种各样的种族和生灵,他们共同信奉着绝对公正公平的女神艾莉森,在他们的信条里,公平是使世界树能够生生 ...
- VBA中的函数Timer用法
第1.40例 Timer 函数一.题目: 要求编写一段代码,运用 Timer 函数来计算本代码运行所化的时间.二.代码:Sub 示例_1_040() Dim t, i&, a t ...
- npm in macbook
打开终端,试了很多次 npm install anywhere -g,结果还是报错,大概就说没权限. 所以,才想起之前看过的博客中,提到用sudo去执行. 终于,没问题了! 如果npm install ...
- Azure PIP (Instance Level Public IP)
微软的Azure平台已经支持Instance Level Public IP功能.当有复杂协议的情况下,需要开启多个端口的情况下,可以考虑开启PIP功能. 先介绍几个概念: VIP – virtual ...
- samba server导出/datasmb/目录;samba client挂载/data/至本地的/mydata目录;本地的mysqld或mariadb服务的数据目录设置为/mydata, 要求服务能正常启动,且可正常 存储数据;
实验环境:CentOS7 主机(mini2) :172.16.250.247 主机名::localhost 客户端(mini3):172.16.253.99 主机名:pxe99 #主机:配置文件的 ...
- C/C++的区别
C和C++的关系:就像是win98跟winXP的关系.C++是在C的基础上增加了新的理论,玩出了新的花样.所以叫C加加. C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设 ...