3.Vue常用特性
1.表单操作
(1)基于Vue的表单操作
input 单行文本 处理方式就是使用 v-model双向绑定data中的数据
1 <input type="text" v-model='uname'>
radio 单选框 处理方式是先使用value属性给其赋值以便区分,之后再使用v-model双向绑定data中的数据
1 <input type="radio" id="male" value="1" v-model='gender'>
2 <label for="male">男</label>
3 <input type="radio" id="female" value="2" v-model='gender'>
4 <label for="female">女</label>
checkbox 多选框 处理方式是先使用value属性给其赋值以便区分,之后再使用v-model双向绑定data中的数据,与单选框不同之处在于,所绑定的data数据应该为一个数组
1 <span>爱好:</span>
2 <input type="checkbox" id="ball" value="1" v-model='hobby'>
3 <label for="ball">篮球</label>
4 <input type="checkbox" id="sing" value="2" v-model='hobby'>
5 <label for="sing">唱歌</label>
6 <input type="checkbox" id="code" value="3" v-model='hobby'>
7 <label for="code">写代码</label>
1 data:{
2 uname:'lisi',
3 gender:1,
4 hobby:['1','2']
5 },
select - option 下拉多选 处理方式是先在<option>标签中使用value属性给其赋值以便区分,之后在<select>标签中使用v-model双向绑定绑定data中的数据,与单选框以及多选框的区别在于既可以与data中所绑定的数据既可以是单个值也可以为一个数组,为单个值则表示单选,为一个数组则表示多选。
1 <select v-model='occupation' multiple='true'>
2 <option value="0">请选择职业...</option>
3 <option value="1">教师</option>
4 <option value="2">软件工程师</option>
5 <option value="3">律师</option>
6 </select>
1 data:{
2 uname:'lisi',
3 // 单选框为单个值
4 gender:1,
5 // 多选框为一个数组
6 hobby:['1','2'],
7 // select - option 单选就为一个值,多选就为一个数组
8 occupation:['1','2']
9 },
textarea 多行文本 使用方式与单行文本相同,即使用v-model与data中的数据进行双向绑定即可
1 <textarea v-model='desc'></textarea>
(2)表单域修饰符
number 转化为数值
trim 去掉开始和空格的结尾
lazy 将input事件切换为change事件, 鼠标失去焦点后才会触发
1 <input type="text" v-model.number='age'>
2 <input type="text" v-model.trim='info'>
3 <input type="text" v-model.lazy='msg'>
2.自定义指令
(1)为何需要自定义指令?
内置指令不满足需求
(2)定义的语法规则
全局指令定义
1 Vue.directive('自定义指令名称',{
2 // 自定义指令实现逻辑
3 })
1 Vue.directive('focus',{
2 inserted:function(el){
3 // el表示指令所绑定的元素
4 el.focus();
5 }
6 });
(3)自定义指令用法
1 <input type="text" v-focus>
(4)带参数的自定义指令(改变元素背景色)
自定义指令中的函数会自动传入以下参数
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下 property:name
:指令名,不包括v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为2
。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
1 Vue.directive('color',{
2 bind:function(el,binding){
3 // 根据指令的参数设置背景色
4 // console.log(binding.value.color);
5 el.style.backgroundColor = binding.value.color;
6 }
7 })
(5)指令的用法
1 <input type="text" v-color='msg'>
(6)局部指令
1 directives:{
2 color:{
3 bind:function(el,binding){
4 // 根据指令的参数设置背景色
5 // console.log(binding.value.color);
6 el.style.backgroundColor = binding.value.color;
7 }
8 },
9 focus:{
10 inserted:function(el){
11 el.focus();
12 }
13 }
14 }
3.计算属性
为何需要计算属性?
表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁
计算属性的用法
1 computed:{
2 reverseString:function(){
3 return this.msg.split('').reverse().join('');
4 }
5 }
计算属性与方法的区别
计算属性是基于它们的依赖缓存的
方法不需要缓存
4.侦听器
(1)应用场景
数据变化时执行异步或开销较大的操作
(2)侦听器的用法
1 watch:{
2 firstName:function(val){
3 this.fullName = val + ' ' + this.lastName;
4 },
5 lastName:function(val){
6 this.fullName = this.firstName + ' ' + val;
7 }
8 }
侦听的值:function(侦听的值){
// 执行逻辑
}
5.过滤器
作用
格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等
自定义过滤器
Vue.filter('过滤器名称',function(value){
// 过滤器业务逻辑
})
过滤器的使用
1 <div>{{msg | upper}}</div>
2
3 <div>{{msg | upper | lower}}</div>
4
5 div :abc='msg | upper'>测试数据</div>
局部过滤器
1 // 局部过滤器只能在本组件中使用
2 filters:{
3 upper:function(val){
4 return val.charAt(0).toUpperCase() + val.slice(1);
5 }
6 }
带参数的过滤器
Vue.filter('format',function(value,arg1){
// value就是过滤器传递的参数
})
过滤器的使用
1 <div>{{date | format('yyyy-MM-dd')}}</div>
6.生命周期
1.主要阶段
挂载(初始化相关属性)
beforeCreate
created
beforeMount
mounted
更新(元素或组件的变更操作)
beforeUpdate
updated
销毁(销毁相关属性)
beforeDestroy
Destroyed
2.Vue实例的生产过程
① beforeCreate 在实例初始化之后,数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用,发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。
3.Vue常用特性的更多相关文章
- Vue的常用特性
Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. ...
- 第三节:Vuejs常用特性2和图书案例
一. 常用特性2 1. 监听器 用watch来响应数据的变化, 一般用于异步或者开销较大的操作, watch 中的属性 一定是data 中 已经存在的数据!!! 当需要监听一个对象的改变时,普通的wa ...
- 第二节: Vuejs常用特性1
一. 常用特性 1. 表单元素 通过 v-model指令绑定 输入框.单选/多选框.下拉框.文本框 2. 表单域修饰符 (1) .number:转换成数值,如果输入的是非数字字符串时,无法进行转换 ( ...
- Vue常用性能优化
Vue常用性能优化 Vue常用的一些优化方式,主要是在构建项目过程需要注意的方面. 编码优化 避免响应所有数据 不要将所有的数据都放到data中,data中的数据都会增加getter和setter,并 ...
- 探索ASP.NET MVC5系列之~~~4.模型篇---包含模型常用特性和过度提交防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- ES6的一些常用特性
由于公司的前端业务全部基于ES6开发,于是给自己开个小灶补补ES6的一些常用特性.原来打算花两天学习ES6的,结果花了3天才勉强过了一遍阮老师的ES6标准入门(水好深,ES6没学好ES7又来了...) ...
- MVC常用特性
MVC常用特性使用 简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将 ...
- C#网络程序设计(1)网络编程常识与C#常用特性
网络程序设计能够帮我们了解联网应用的底层通信原理! (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网 ...
- Vue常用经典开源项目汇总参考-海量
Vue常用经典开源项目汇总参考-海量 Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的 ...
- C# XML序列化方法和常用特性
/* C#对象XML序列化(一):序列化方法和常用特性 .Net Framework提供了对应的System.Xml.Seriazliation.XmlSerializer负责把对象序列化到XML,和 ...
随机推荐
- Flutter statecontroller.update(MaterialState.disabled,false)无效
因为中间会调用 void initStatesController() { if (widget.statesController == null) { internalStatesControlle ...
- iOS证书签名
苹果官方有一对密钥,即私钥和公钥,私钥在苹果后台,公钥在iOS系统中(如iPhone手机在出厂后,其中就保存有苹果官方的公钥):在Mac系统打包app时也会生成一对密钥(私钥.公钥),并保存在钥匙串中 ...
- 安装centos7 报错no controller found踩坑
安装centos7.9时出现如上报错,特记录解决方法: 1.查看硬盘 出现如上报错时,耐心等待,等错误提醒不断滚动时,一会出现命令行输入界面,输入命令: [root@localhost ~]# ls ...
- vw与百分比%的区别
单位, vw:只和设备宽度有关系 %:有继承关系
- 微信小程序学习记录
尺寸单位 rpx 常常以iphone6为开发基准, 1px = 2rpx,不同设备的比例是不同的: 小程序生命周期 和vue的生命周期很相似,不过小程序的生命周期和页面.组件的生命周期又又一点不一样 ...
- Vue项目打包报错 error TS6504
此处提醒:项目是vite还是vue/cli,打包有区别 打包报错问题: 原因: package.json中,build配置vue-tsc的问题,把对应的命令给删掉: . 语法检查问题: 要么<s ...
- 781. 森林中的兔子 (Medium)
问题描述 781. 森林中的兔子 (Medium) 森林中有未知数量的兔子.提问其中若干只兔子 "还有多少只兔子与你(指被提问的兔子)颜色相同?" ,将答案收集到一个整数数组 an ...
- mac SIP系统完整性保护关闭方法
许多Mac用户反应,装了部分软件后打不开,那可能是sip系统完整性没有关闭.下面我们就来看一下如何关闭sip系统完整性. 检查状态 在sip系统完整性关闭前,我们先检查是否启用了SIP系统完整性保护. ...
- SpringBoot整合mqtt协议,实现订阅topic并将消息存储到mysql数据库
所需依赖如下: <dependencies> <dependency> <groupId>org.springframework.boot</groupId& ...
- window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题
window.parent.postMessage 解决iframe父子页面域名不一样出现的跨域问题 内嵌 iframe 页面,一般使用 window.parent 或 window.top 来获取父 ...