Vue——内置指令
1.基本指令
(1)v-cloak
v-cloak不需要表达式,他会在Vue实例结束编译时从绑定的HTML元素上移除。
经常和CSS的display:none搭配使用。
如果网速很慢,vue.js文件还没有加载完成,那么页面上就会显示{{message}}的变量名,这样不利于用户体验。
这是加上一个css的display:none就解决问题了。
在变量没有加载完成时页面会一直闪动,这是解决页面初始化的一个不错的解决方案。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app" v-cloak> {{ message }} </div> <script> var app = new Vue({ el: "#app", data: { message: '测试文本' } }) </script> </body> </html>
(2)v-once
v-once也是一个不需要表达式的指令,作用是定义它的元素或者组件只渲染一次,包括元素或者组件上的所有节点。
首次渲染后,不再随数据的变化重新渲染,将被视为静态内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div v-once>{{ message }}</div> </div> <script> var app = new Vue({ el: "#app", data: { message: '测试文本001' } }) </script> </body> </html>
2.条件渲染指令
(1)v-if/v-else
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <p v-if="statu === 1">当statu为1时显示</p> <p v-else-if="statu === 2">当statu为2时显示</p> <p v-else>否则什么都不显示</p> </div> <script> var app = new Vue({ el: "#app", data: { statu: 1 } }) </script> </body> </html>
(2)v-show
v-show和v-if在功能上有些类似,
v-if会根据表达式适当的销毁或者重建元素,而v-show只是简单的CSS属性切换,无论是否显示都会被编译。
v-if适合条件不经常改变的场景,因为开销较大,而v-show适合频繁切换的场景。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <p v-show="status === 1">为1的时候显示该行</p> <!--<p style="display: none;">为1的时候显示该行</p>--> </div> <script> var app = new Vue({ el: '#app', data: { status: 2 } }) </script> </body> </html>
3.列表渲染
(1)基本用法
实例一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>体验vue</title> </head> <body> <div id="app"> <ul> <li v-for="book in books">{{book.name}}</li> </ul> </div> <script src="vue.min.js"></script> <script> new Vue ({ el: '#app', data: { books: [ { name: '《碧血剑》'}, { name: '《天龙八部》'}, { name: '《圆月弯刀》'}, { name: '《武动乾坤》'} ] } }) </script> </body> </html>
效果:
实例二:
v-for支持一个可选参数作为当前项的索引,类似于枚举的效果.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>体验vue</title> </head> <body> <div id="app"> <ul> <!--v-for支持一个可选参数作为当前项的索引,类似于枚举的效果--> <li v-for="(book,index) in books">{{ index }}-{{ book.name }}</li> <!--列表渲染还可以使用of来代替in作为分隔符--> <li v-for="(book,index) of books">{{ index }}-{{ book.name }}</li> </ul> </div> <script src="vue.min.js"></script> <script> new Vue ({ el: '#app', data: { books: [ { name: '《碧血剑》'}, { name: '《天龙八部》'}, { name: '《圆月弯刀》'}, { name: '《武动乾坤》'} ] } }) </script> </body> </html>
效果:
实例三:
v-for可以在内置标签template上将多个元素进行渲染.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <template v-for="book in books"> <li>书名: {{ book.name }}</li> <li>作者: {{ book.author }}</li> </template> </ul> </div> <script> var app = new Vue({ el: "#app", data: { books: [ { name: '《天龙八部》', author: '金庸' }, { name: '《圆月弯刀》', author: '古龙' }, { name: '《云海玉弓缘》', author: '梁羽生' } ] } }) </script> </body> </html>
效果:
实例四:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <span v-for="value in user">{{ value }}</span> </div> <!--对象的属性也是可以遍历的--> <script> var app = new Vue({ el: '#app', data: { user: { name: 'kebi', sex: 'boy', age: 26 } } }) </script> </body> </html>
效果:
实例五:
遍历对象属性时有两个可选参数,分别是键名和索引.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <li v-for="(value,key,index) in user">{{ index + 1 }}.{{ key }}:{{ value }}</li> </ul> </div> <!--遍历对象的时候还有可选参数key,index--> <script> var app = new Vue({ el: '#app', data: { user: { name: 'kebi', sex: 'boy', age: 26 } } }) </script> </body> </html>
效果:
(2)过滤与更新
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <template v-for="book in books"> <li>书名: {{ book.name }}</li> <li>作者: {{ book.author }}</li> </template> </ul> </div> <!--v-for可以在内置标签template上将多个元素进行渲染--> <script> var app = new Vue({ el: "#app", data: { books: [ { name: '《天龙八部》', author: '金庸' }, { name: '《圆月弯刀》', author: '古龙' }, { name: '《云海玉弓缘》', author: '梁羽生' } ] } }); //添加过滤 // app.books = app.books.filter(function (item) { // return item.name.match(/龙/); // }) //Vue在检测到数据变化的时候,并不是重新渲染整个列表,而是最大化的复用DOM元素 //替换的数组中含有相同元素的项不会被重新渲染,因此可以打断用新的数据来替换旧的数据,不用太过于担心性能的问题 //如果你要添加一个新的项,下面有两种方法 //vue内置的set方法 Vue.set(app.books, 3, { name: '雪山飞狐', author: '金庸' }); app.books.splice(4,1,{ name: '七剑下天山', author: '梁羽生' }) </script> </body> </html>
(3)过滤与排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <ul> <template v-for="book in sortBooks"> <li>书名: {{ book.name }}</li> <li>作者: {{ book.author }}</li> </template> </ul> </div> <!--v-for可以在内置标签template上将多个元素进行渲染--> <script> var app = new Vue({ el: "#app", data: { books: [ { name: '《天龙八部》', author: '金庸' }, { name: '《圆月弯刀》', author: '古龙' }, { name: '《云海玉弓缘》', author: '梁羽生' } ] }, //如果你不想改变原数组,想通过过滤或排序的显示时,可以使用计算属性来返回过滤或排序后的结果 computed:{ //过滤 // filterBooks:function () { // return this.books.filter(function (book) { // return book.name.match(/龙/) // }) // } // 按照书名长度排序 sortBooks: function () { return this.books.sort(function (a,b) { return a.name.length < b.name.length; }) } } }) </script> </body> </html>
4.方法与事件
(1)基本用法
可以在vue实例对象的methods选项中定义方法,然后就可以进行调用。
用方法只是为了让达到复用的效果。不使用方法其实也是可以达到相同的效果的。
下面就没有定义方法:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> 点击次数: {{ counts }} <button @click="counts++">点击加一</button> </div> <script> var app = new Vue({ el: "#app", data: { counts: 0 } }) </script> </body> </html>
如果定义方法我们可以这样写:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> 点击次数: {{ counts }} <button @click="handleAdd()">点击加一</button> <button @click="handleAdd(10)">点击加十</button> <!--如果handleAdd不添加()那么会出现[object MouseEvent]--> </div> <script> var app = new Vue({ el: "#app", data: { counts: 0 }, methods: { handleAdd: function (count) { count = count || 1; this.counts += count } } }) </script> </body> </html>
需要注意的是:
@click后面的方法名可以不跟括号。前提是不需要传入参数.
如果该方法有参数,默认会将原生事件对象event传入。
Vue提供了一个特殊变量$event,用于访问原生DOM事件.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <a href="http://www.baidu.com" @click="handleClick('禁止打开', $event)">打开链接</a> </div> <script> var app = new Vue({ el: "#app", methods: { handleClick: function (message,event) { event.preventDefault(); //取消事件的默认行为 window.alert(message); } } }) </script> </body> </html>
效果:
(2)修饰符
<!--上例中使用的event.preventDefault()也可以用Vue事件的修饰符来实现,在@绑定的事件后面加小圆点’.‘,再跟一个后缀来使用修饰符--> <!--阻止单机事件冒泡--> <a @click.stop="handle"></a> <!--提交事件不再重载页面--> <form @submit.prevent="handle"></form> <!--修饰符可以串联--> <a @click.stop.prevent="handle"></a> <!--只有修饰符--> <form @submit.prevent></form> <!--添加事件侦听器时使用事件捕获模式--> <div @click.capture="handle">...</div> <!--只当事件在该元素本身(而不是子元素)触发时触发回调--> <div @click.self="handle">...</div> <!--只触发一次,组件同样使用--> <div @click.once="handle">...</div> <!--在表单元素上监听键盘事件时,还可以使用案件修饰符--> <!--只有当keyCode等于13时才会调用vm.submit--> <input @keyCode.13 = 'submit'> <!--也可以自己配置具体键--> Vue.config.keyCode.f1 = 112 <!--Vue支持一下修饰符--> .stop .prevent .capture .self .once <!--Vue支持的快捷键--> .enter .tab .delete .esc .space .up .down .left .right
原文地址:https://www.cnblogs.com/yangmingxianshen/p/12687622.html
- Java中list<Object[]>、list<Student>、list<Map<String,String>>排序
- Java-单例模式详解(图文并茂,简单易懂)
- Fragment生命周期及实现点击导航图片切换fragment,Demo
- 《GO IN ACTION》读后记录:GO的并发与并行
- SharedPreferences 存List集合,模拟数据库,随时存取
- Servlet与Jsp的结合使用实现信息管理系统一
- Mac下nvm管理node.js版本问题
- 自定义tab吸顶效果一(原理)
- OpenGL ES学习001---绘制三角形
- Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失
- 披着狼皮的羊——寻找惠普多款打印机中的RCE漏洞
- Android之MaterialDesign应用技术
- 蛙啊!老母亲给你整理了DEDECMS漏洞集合,快回家!
- Android之Bmob移动后端云服务器
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JsonPath实践(二)
- C# 使用OpenCV在一张图片里寻找人脸
- 【DB笔试面试858】在Oracle中,ipcs和ipcrm命令的作用有哪些?
- Qt音视频开发13-mpv录像存储
- Oracle参数解析(spfile)
- ROS2机器人笔记20-08-18
- C sharp实例:华盾武器门数据接收和解析
- JsonPath实践(三)
- 有序链表转换二叉搜索树
- 128. 最长连续序列
- 【DB笔试面试859】在Oracle中,内核参数kernel.shmall、kernel.shmall等分别代表什么含义?
- Nginx配置SSL证书
- java_Object类、日期时间类、System类、包装类
- [周末往期回顾]UNDO_TABLESPACE参数
- WordPress固定链接后404解决方法