input js 离开事件_听说你熟练使用Vue.js,这9种Vue技术你掌握了吗?
现在,Vue.js已成为前端开发的热门框架。有很多工程师利用Vue.js的便利性和强大功能。但是,我们完成的某些解决方案可能未遵循最佳做法。好吧,让我们看一下那些必备的Vue技术。
1. 函数组件
函数组件 是无状态的,没有生命周期或方法,因此无法实例化
创建一个函数组件非常容易,你需要做的就是在SFC中添加一个 functional: true
属性,或者在模板中添加 functional
。由于它像函数一样轻巧,没有实例引用,所以渲染性能提高了不少。
函数组件依赖于上下文,并随着其中给定的数据而突变。
<template functional><div class="book">{{props.book.name}} {{props.book.price}}</div>
</template><script>
Vue.component('book', {functional: true,props: {book: {type: () => ({}),required: true}},render: function (createElement, context) {return createElement('div',{attrs: {class: 'book'}},[context.props.book])}
})
</script>
2.深层选择器
有时,你需要修改第三方组件的CSS,这些都是 scoped
样式,移除 scope
或打开一个新的样式是不可能的。
现在,深层选择器 >>>
/deep/
::v-deep
可以帮助你。
<style scoped>
>>> .scoped-third-party-class {color: gray;
}
</style><style scoped>
/deep/ .scoped-third-party-class {color: gray;
}
</style><style scoped>
::v-deep .scoped-third-party-class {color: gray;
}
</style>
3.高级“watcher”
立即执行
当被监控的prop发生突变时,watch handler就会触发。但有时,它是在组件被创建后才出现的。
是的,有一个简单的解决方案:在 created
的钩子中调用处理程序,但这看起来并不优雅,同时也增加了复杂性。
或者,你可以向观察者添加 immediate
属性:
watch: {value: {handler: 'printValue',immediate: true}
},
methods : {printValue () {console.log(this.value)}
}
深度监听
有时,watch 属性是一个对象,但是其属性突变无法触发 wacher 处理程序。在这种情况下,为观察者添加 deep:true
可以使其属性的突变可检测到。
请注意,当对象具有多个层时,深层可能会导致一些严重的性能问题。最好考虑使用更扁平的数据结构。
data () {return {value: {one: {two: {three: 3}}}}
},
watch: {value: {handler: 'printValue',deep: true}
},
methods : {printValue () {console.log(this.value)}
}
多个handlers
实际上,watch 可以设置为数组,支持的类型为 String、Function、Object。触发后,注册的watch处理程序将被一一调用。
watch: {value: ['printValue',function (val, oldVal) {console.log(val)},{handler: 'printValue',deep: true}]
},
methods : {printValue () {console.log(this.value)}
}
订阅多个变量突变
watcher
不能监听多个变量,但我们可以将目标组合在一起作为一个新的 computed
,并监视这个新的 "变量"。
computed: {multipleValues () {return {value1: this.value1,value2: this.value2,}}
},
watch: {multipleValues (val, oldVal) {console.log(val)}
}
4.事件参数:$event
$event
是事件对象的一个特殊变量。它在某些场景下为复杂的功能提供了更多的可选参数。
原生事件
在原生事件中,该值与默认事件(DOM事件或窗口事件)相同。
<template><input type="text" @input="handleInput('hello', $event)" />
</template><script>
export default {methods: {handleInput (val, e) {console.log(e.target.value) // hello}}
}
</script>
自定义事件
在自定义事件中,该值是从其子组件中捕获的值。
<!-- Child -->
<template><input type="text" @input="$emit('custom-event', 'hello')" />
</template><!-- Parent -->
<template><Child @custom-event="handleCustomevent" />
</template><script>
export default {methods: {handleCustomevent (value) {console.log(value) // hello}}
}
</script>
5.路由器参数解耦
我相信这是大多数人处理组件中路由器参数的方式:
export default {methods: {getRouteParamsId() {return this.$route.params.id}}
}
在组件内部使用 $route
会对某个URL产生强耦合,这限制了组件的灵活性。
正确的解决方案是向路由器添加props。
const router = new VueRouter({routes: [{path: '/:id',component: Component,props: true}]
})
这样,组件可以直接从props获取 params
。
export default {props: ['id'],methods: {getParamsId() {return this.id}}
}
此外,你还可以传入函数以返回自定义 props
。
const router = new VueRouter({routes: [{path: '/:id',component: Component,props: router => ({ id: route.query.id })}]
})
6.自定义组件的双向绑定
允许自定义组件在使用
v-model
时自定义使props和event。默认情况下,组件上的v-model使用value作为属性,Input作为事件,但一些输入类型,如复选框和单选按钮可能希望使用value属性来实现不同的目的。在这种情况下,使用model选项可以避免冲突。
v-model
是众所周知的双向绑定。input
是默认的更新事件。可以通过 $emit
更新该值。唯一的限制是该组件需要<input>
标记才能与 value
属性绑定。
<my-checkbox v-model="val"></my-checkbox><template><input type="checkbox" :value="value" @input="handleInputChange(value)" />
</template><script>
export default {props: {value: {type: Boolean,default: false}},methods: {handleInputChange (val) {console.log(val)}}
}
</script>
双向绑定还有另一种解决方案,即 sync
修饰符。与 v-model
不同的是,它不需要你的组件有一个 <input>
标签并将值绑定到它上面。它仅触发 update:<your_prop>
通过事件系统对属性进行突变。
<custom-component :value.sync="value" />
7.组件生命周期 Hook
通常,你可以像这样监听子组件的生命周期(例如 mounted
)
<!-- Child -->
<script>
export default {mounted () {this.$emit('onMounted')}
}
</script><!-- Parent -->
<template><Child @onMounted="handleOnMounted" />
</template>
还有另一种简单的解决方案,你可以改用 @hook:mount
在Vue内部系统中使用。
<!-- Parent -->
<template><Child @hook:mounted="handleOnMounted" />
</template>
8.事件监听APIs
比如,在页面挂载时增加一个定时器,但销毁时需要清除定时器。这看起来不错。
坦白地说,只有在 beforeDestroy
中使用 this.timer
来获取计时器ID才有意义。并非刻薄,而是变量越少,性能越好。
export default {data () {return {timer: null}},mounted () {this.timer = setInterval(() => {console.log(Date.now())}, 1000)},beforeDestroy () {clearInterval(this.timer)}
}
使其只能在生命周期钩子内访问。使用 $once
来放弃不必要的东西。
export default {mounted () {let timer = nulltimer = setInterval(() => {console.log(Date.now())}, 1000)this.$once('hook:beforeDestroy', () => {clearInterval(timer)})}
}
9.以编程方式挂载组件
在某些情况下,以编程方式加载组件要优雅得多。例如,可以通过全局上下文 $popup()
或 $modal.open()
打开弹出窗口或模态窗口。
import Vue from 'vue'
import Popup from './popup'const PopupCtor = Vue.extend(Popup)const PopupIns = new PopupCtr()PopupIns.$mount()document.body.append(PopupIns.$el)Vue.prototype.$popup = Vue.$popup = function () {PopupIns.open()
}
Element UI 实现了结构良好的模式组件,该组件允许使用自定义API来控制实例的生命周期。该理论与我上面演示的几乎相同。
这是有关Vue 2.x的9种技术,希望在本文中你可以对使用框架有更好的了解。如果你认为本文很棒,请在其他社交网络上分享。
原文:https://medium.com/dev-genius
作者:Yanze Dai
翻译:公众号《前端全栈开发者》
input js 离开事件_听说你熟练使用Vue.js,这9种Vue技术你掌握了吗?相关推荐
- input js 离开事件_js控制input执行onchange事件
js给textbox赋值触发onchange事件的方法 js中onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的一个事件.但是如果在js代码中改变一个textbox的va ...
- jquery input值改变事件_前端技术--JQuery
JQuery 一.引言 1.JQuery是一个基于javascript语言的框架 --- 是对js代码的合理封装 2.js缺点,jquery优点 1)js代码比较复杂 var tag = docum ...
- 构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
- input js 离开事件_JS购物车的实现
在电商类项目中,购物车可以说是基本要求了.购物车的综合功能能以及逻辑功能对学习阶段的人来说都能或多或少的提升js知识,锻炼论及能力. 购物车中主要分为全选.店铺.单选.价格几大类. 每个人的编写逻辑风 ...
- input js 离开事件_onBlur事件与onfocus事件(js) (光标到达和离开是触发事件)...
[1.回车键触发事件的js代码 在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件判断是否按下的为回车非常简单:function EnterPress(){ i o ...
- js 鼠标事件_移入移出
mouseover(移入) mouseout(移出) mouseover 此事件类型冒泡,可能引起很多头痛的问题.例如,当鼠标指针移出Inner元素,事件将被发送到Inner元素,然后冒泡到Outer ...
- 介绍数据库中的wal技术_门禁系统中RFID与ETC两种新兴技术介绍
1.无线射频识别 RFID(Radio Frequency Identification,无线射频识别)是一种非接触式的自动识别技术,它通过射频信号自动识别目标对象并获取相关数据,可快速进行物品追踪和 ...
- java响应鼠标滚轮事件_鼠标滚轮事件MouseWheel
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...
- html5 自动失去焦点,js input失去焦点事件
JS中,何为鼠标失去焦点事件??是onmouseout事件. 用法举例: 鼠标离开文本框的时候触发JS的chk()方法. js 怎样判断ipunt失去焦点 js input失去焦点事件 onfocus ...
最新文章
- HTML5中的websocket图片直播
- jQuery动态设置输出窗口的高度
- 技术中国论坛版本升级了!
- android引入开源库_为好目录引入开源:通过代码帮助公益组织
- python中数据类型转换_Python(二).数据类型,数据类型转换
- js学习总结----js中常用的四种输出方式
- url解码java_JAVA对URL的解码【转】
- ubuntu 14.04安装zabbix3.0以及汉化
- poj 1141 Brackets Sequence(线性dp)
- AD09 pcb绘制技巧笔记
- 【经验分享】数学建模论文格式要求及常见问题汇总
- ireport 循环_ireport detail循环原理
- 20210605:前期使用pyqt5做的操作流程界面化,涉及mysql代码写的太差,可以用函数复用减少代码
- 电池寿命计算(电池放电支持时长)
- GNU Radio: USRP2 and N2x0 Series
- 如何使用“友宝”app在自动售水机上使用“友宝钱包”支付。
- linux lightdm.conf,lightDM(Light Display Manager)简介
- LiveGBS接入LiveQing流媒体服务实现云端录像和大屏展示
- 查询出每一个雇员的姓名,工资,部门名称,工资在公司的等级及其领导的姓名,领导的工资,以及领导所相应的等级...
- MySQL 与 PostgreSQL 比较,哪个更好、我们该选用哪个?
热门文章
- Unity5x编辑器的主菜单和布局
- Java解码vhd的磁盘文件,VHD Java library
- 服务器通过光纤模块挂载存储服务器
- php 定义title,HTML5中对title属性的定义与规定
- vba调用计算机,如何实现跨工作表自动引用数据? 求:EXCEL公式(函数)或VBA宏程序...
- 南邮java大作业实验报告_南京邮电大学java第三次实验报告
- Java设计模式(二):观察者设计模式
- 深入理解JVM虚拟机(九):运行期优化与JIT编译器
- 二叉树的深度优先搜索c语言,C语言 二叉树按层打印、深度优先遍历、二叉树是否对称...
- mysql事务隔离级别与设置