vue中自定义指令、组件化、生命周期、节流和防抖、获取DOM、mint-ui简介、过渡和动画

自定义指令:

vue中通过directive方法自定义指令,如:自定义一个v-focus指令:

	<script>Vue.directive('focus', {//通过directive('指令名',{配置})注册全局指令inserted: function (el) {//inserted:表示当自定义指令插入元素后,后面跟处理函数el.focus()//通过原生API获取光标}})//实例化:new Vue({el: '#app',//directives:{},//directives可在实例中注册局部指令,用法:directives:{指令名:{inserted:处理函数}}})</script><div id="app"><input v-focus></div>//自定义使用使用

组件化:

组件是带有名称的可复用实例,组件系统是vue允许我们使用小型、独立、可重复的组件构建复杂应用;如创建一个header组件并放到另一个组件中:

	 // 1.定义数据配置:const db = {data() {return {text: 'header'}},template:`<h2>{{text}}</h2>`}// 2.创建 Vue 应用实例并将定义的数据配置给app实例:const app = Vue.createApp(db)//新版vue中通过createApp函数创建实例// 3.给app定义名为 head-vue 的组件:(component声明全局组件,components声明局部组件)//全局组件:app.component('head-vue', {props: ['person'],//props:接收父组件变量供子组件使用,后面可接数组或对象(当需要指定变量值类型时使用对象方式,如:person:String)template: `<li>{{person.names}}<button @click="$emit('big')">按钮</button></li>`,//$meit用于调用内建括事件,括号里面传入内建函数名,如:@big='Font += 1'供按钮调用emits: ['inFocus', 'submit']//定义已发出事件})// 局部组件声明:const comA = {}; //在对象中定义组件const comB = {};const app = Vue.createApp({components: {//components后面接一个对象,对象中以:'组件名':组件 的形式声明组件'componentA': ComA,'componentB': ComB}})//注意:局部注册的组件在其子组件中不可用,如果想要在comA中使用comB,可这样声明组件:const comA = {components:{'componentB':comB}}//或者使用es6中模块导入的方式:import comB from './comB.vue'export default {//在组件comA中components: {componentB:comB}}// 4.mount挂载 Vue 应用到Dom上:app.mount('#box')//5.在另一个组件使用head-vue:<div><head-vue></head-vue>//可以将组件进行任意次数的复用,互不影响</div>

子组件和全局组件基本用法:

	<script>// 1.SPA架构:// 2.父组件和子组件:使用的是父组件,被使用的是子组件,父组件在使用子组件的时候,父组件要声明子组件、引入子组件、使用组件对象// 3.子组件的使用:// 1.创建一个子组件*.vue// 2.引入子组件到父组件script部分export default前面,如引入一个footer组件: import footer from './footer.vue'// 3.export default{}中声明子组件:components:{footervue:footer,headervue:header}// 4.父组件template中使用:<template><div><footervue></footervue></div></template>//4.全局组件的使用:1.创建一个子组件*.vue2.在main.js文件中引入子组件:import headervue from './components/header.vue',并使用:vue.component('组件名',组件对象)声明为全局组件3.父组件template中使用:<template><div><footervue></footervue></div></template>//5.父组件传递值给子组件:1.在父组件template中的子组件<*** key='value'></***>加入key='value'----传递参数,或者<*** v-bind:key='变量名'></***>//2.在子组件export default 里的props里面加入参数的key,如: props:['key','key1'] -----接收父组件参数的设置//3.在子组件template中通过使用{{key}}的方式使用参数//注意:在js中可以通过this.key的方式获取key并使用//6.vueBus的通信使用来实现子组件通信父组件:1.创建一个sub.vue子组件文件,并在main.js文件中引入子组件:import sub from './sub.vue',并使用:vue.component('sub',sub)使其成为全局子组件 或者 在components:{}中定义为局部子组件// 2.创建一个用来通信的连接器connector.js文件,此文件实际导出的是一个vue实例对象:new Vue(),代码如://import Vue from 'vue';//var connector = new Vue();//export default connector;// 3.分别在父组件和子组件引入connector.js连接器文件// 4.在父组件使用:连接器connector.$on('事件名',function(mes){console.log(mes)})监听子组件的通讯// 5.在子组件使用:connector.$emit('事件名','子组件发送的内容') 发送通讯,唯一标识 子父一致//注意:具体使用看Vuetest案例分析</script>

Provide\Inject父组件传递数据给子组件:

使用props从父组件向子组件传递数据时,当子组件嵌套太深时要逐级传递数据,会很麻烦;此时使用Provide\Inject就方便多了,具体使用如:

	//如在父组件fatherView中n层下面有一个子组件sonViewNz,此时子组件想要拿到父组件中的一个数据(例如变量user中的值),如下:app.component('fatherView', {data() {arr: [1, 2, 3]},provide: { //provide:用来在父组件中定义要传入子组件的数据,数据通过键值对的方式传递给子组件user: 'jack',},provide() { //当要访问父组件属性值时,上面的变量方法是行不通的,要使用返回对象provide的函数的形式传递数据return {// fatherArrLenth: this.arr.length //:默认情况下传递的数据不是响应式的,也就是说父组件中数据改变时传递的值不会改变,想要改变就要使用Vue.computed方法处理数据,如下:fatherArrLenth: Vue.computed(() => this.arr.length),}}})app.component('sonViewN', {data() {},inject: ['user'], //inject:在子组件中接收父组件中传入过来的数据,后面接一个数组,里面传入父组件中要传递数据的变量名created() { //钩子事件处理函数console.log(`${this.user}`); //通过this.变量名即可拿到数据}})

使用keep-alive解决is性能问题:

	 //利用is指令可以实现不同组件之间的切换,但是有时候会保持这些组件的状态来避免反复渲染,此时可以使用keep-alive,如:<keep-alive><viewCom :is = 'coms'></viewCom></keep-alive>

异步组件:

	 // 返回promise的工厂函数const app = Vue.createApp({})const AsyncComp = Vue.defineAsyncComponent(() =>new Promise((resolve, reject) => {resolve({template: '异步'})}))app.component('asyncComp', AsyncComp)//es6形式:import {defineAsyncComponent} from 'vue'const AsyncComp = defineAsyncComponent(() =>import ('./components/AsyncComponent.vue'))app.component('asyncComponent', AsyncComp)

生命周期钩子:

	 Vue.createApp({data() {return { num: 1 }},created() {//created:当实例创建后执行处理函数;生命周期钩子还有一些如: mounted、updated 和 unmountedconsole.log(this.num) // 1   this指向当前实例,通过this.变量可以拿到变量的值}})

节流和防抖:

vue没有内置的防抖和节流支持,借用lodash可实现此功能,如:

	<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script><script>Vue.createApp({methods: {click: _.debounce(function() {//}, 300)}}).mount('#app')//注意:此方式使可复用组件共享相同的防抖处理函数,为彼此独立,可将此添加到created钩子中</script>

获取DOM:

	1.前端框架就是为了减少DOM操作,但是在特殊情况下,也可以操作DOM的。2.操作DOM的步骤:1.在需要操作的DOM元素上添加:ref='名称A'2.在需要获取的地方加入:this.$refs.名称A注意:在子组件上获取DOM元素的方式为:this.$refs.名称.$el

mint-ui使用简介:

	// 1.mint-ui就是element-ui的移动端版本,是饿了么团队开发的。// 2.使用步骤:// 1.安装: npm install mint-ui -S// 2.引入vue  : import Vue from 'vue'  // 3.1引入全部组件使用型:       // 1.引入mint-ui  : import Mint from 'mint-ui'// 2.使用全部mint-ui: Vue.use(Mint)// 3.2按需引入部分组件实用型:// 1.引入部分组件  : import {Cell,Checklist,...} from 'mint-ui'// 2.使用部分mint-ui组件 : Vue.component(Cell,name,Cell)

过渡和动画:

在vue中可以通过class和style自定义动画和过渡,同时vue也提供了自己的动画及过渡。

	<!-- 1.<transition name='key'>:控制元素或组件进入和离开时触发过渡,它有6个控制过渡效果的类名(v-enter-from进入过渡开始状态、v-enter-active进入过渡生效状体、v-enter-to进入过渡结束状态、v-leave-from离开过渡开始状态、v-leave-active离开过渡生效状态、v-leave-to离开过渡结束状态),这6个控制状态的class类在使用时需要注意:transition上面应该有一个name属性,其值为这6个类名的标识,具体使用时,将这6个类名中v替换为transition中name的属性值;同时在transition中的元素被插入或删除时,vue自动监听类的变化外,还会监听钩子函数,如下: -->.fade-enter-from{}里面正常写CSS代码,当p标签出现或消失时就会使用到这里6个类中对应状态的过渡效果<transition name='fade'><p v-if="show">hello</p></transition><transition :duration="1000">...</transition><!-- :duration='毫秒值'用来控制过渡或动画时间,值也可以是一个对象:{ enter: 500, leave: 800 }控制具体进入离开的时间 --><transition @before-enter="beforeEnter :css="false"">css="false"用于跳过过渡检测,提高性能</transition><!-- 可在transition中声明钩子函数,用函数控制具体的效果,@before-enter类似事件,"beforeEnter"为事件处理函数名;事件还有:enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled--><transition mode="out-in"></transition><!-- mode用于设置过渡模式,其值有:in-out新元素先过渡,过渡完后当前元素在过渡、out-in顺序相反 --><transition-group tag="ul"></transition-group><!-- 处理多个元素,渲染列表等,tag用于声明该组中transition-group类型,如果里面元素为li等,这里可设置为ul -->watchers<!-- 处理应用中不同状态的过渡 -->

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575289.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

H264解码的一个測试程序

网上看到的一个H264视频格式的解码測试程序&#xff0c;能够用来參考其逻辑流程。 代码例如以下&#xff1a; Test_Display_H264(){ in_fd open(H264_INPUT_FILE, O_RDONLY); //video file open fstat(in_fd, &s); …

spring框架 web开发_go语言web开发框架学习:Iris框架讲解(一)

Golang介绍Go语言是谷歌推出的一种全新的编程语言&#xff0c;可以在不损失应用程序性能的情况下降低代码的复杂性。谷歌首席软件工程师罗布派克(Rob Pike)说&#xff1a;我们之所以开发Go&#xff0c;是因为过去10多年间软件开发的难度令人沮丧。谷歌资深软件工程师罗布派克(R…

vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项

路由vue-router介绍: // 1.前端路由核心&#xff1a;锚点值的改变&#xff0c;根据不同的锚点值&#xff0c;渲染指定dom位置的不同数据。// 2.vue中&#xff0c;模板数据不是通过ajax请求的&#xff0c;而是调用函数获取到模板内容// 3.vue-router使用方式&#xff1a;// 1.下…

最小路径覆盖,最小点覆盖,最大独立点集(转)

来自&#xff1a;http://blog.csdn.net/l04205613/article/details/6278394 node 1&#xff1a;最小路径覆盖 在一个&#xff30;&#xff38;&#xff30;的有向图中&#xff0c;路径覆盖就是在图中找一些路经&#xff0c;使之覆盖了图中的 所有顶点&#xff0c;且任何一个顶…

iOS中画矩形的几种方法总结

方法1&#xff1a; #pragma mark 画矩形方法1void drawRect1(){ // 1取得图形上下文 CGContextRef ctx UIGraphicsGetCurrentContext(); // 2画一条线段 // 设置一个起点 CGContextMoveToPoint(ctx, 20, 20); CGContextAddLineToPoint(ctx, 100, 10…

linux终端的背景_如何在终端显示图像缩略图 | Linux 中国

lsix 是一个简单的命令行实用程序&#xff0c;旨在使用 Sixel 图形格式在终端中显示缩略图。-- Sk不久前&#xff0c;我们讨论了 Fim[1]&#xff0c;这是一个轻量级的命令行图像查看器应用程序&#xff0c;用于从命令行显示各种类型的图像&#xff0c;如 bmp、gif、jpeg 和 png…

移动App开发、App和Web区别、开发移动app时技术选型

移动App开发 混合移动App: 移动端App开发有Android和iOS及混合App,开发它们采用不同的语言,如: 苹果软件使用: OC、或者Swift语言开发。 安卓软件使用:Java,安卓控件进行开发。 混合App使用:把前端特有的技术(HTML+CSS+JS)通过某种方式移植到移动App开发上,这种…

多线程下HttpContext.Current 的问题

在项目中需要记录文本日志&#xff0c;为了加快响应速度所以用到了多线程。 但是以前的方法是不支持多线程的&#xff0c;程序运行错误。 追踪代码发现提示HttpContext为空。 1.HttpContext.Current表示当前HttpRequest 对应的Context对象 httpContext.current在不同的httpRe…

混合App开发,HBuilder开发移动App

使用HBuilder开发混合App&#xff1a; Hbuilder&#xff1a;是一个在线打包工具&#xff0c;不需要在本地配置开发环境&#xff1b;直接将做好的网站&#xff0c;通过一些简单的操作&#xff0c;就能在线打包为一个App&#xff1b; 混合APP开发常见技术&#xff1a;Html5、Re…

fanuc roboguide_ROBOGUIDE软件:机器人产线输送带输送物料虚拟仿真操作

概述输送带在机器人生产线或工作站中是常见的物料传送设备&#xff0c;它能够将物料从一个工位自动传送到另一个工位&#xff0c;是实现自动化生产制造必不可少的装置设备之一。虚拟仿真是对真实的工业机器人生产线或工作站的图形化再现&#xff0c;因此&#xff0c;对于具有输…

ZOJ 3209

精确覆盖 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> #include <vector> using namespace std;const int maxn920; const int maxnode920*550; const int maxr550; int ans; struct DLX {int n , sz; …

webpack上线版(生产环境中推荐使用)

配置上线版&#xff08;生产环境&#xff09;webpack&#xff1a; 实际中将开发环境中和生产环境中打包配置是分开的&#xff0c;两者本质没太大区别&#xff0c;只是生产环境中的webpack打包配置要更加优化合理&#xff0c;下面将具体介绍一下生产环境中webpack配置文件&…

双电阻差分电流采样_小小的采样电阻,还真有点门道!

电流检测电阻的基本原理根据欧姆定律,当被测电流流过电阻时,电阻两端的电压与电流成正比.当1W的电阻通过的电流为几百毫安时,这种设计是没有问题的.然而如果电流达到10-20A,情况就完全不同,因为在电阻上损耗的功率(PI2xR)就不容忽视了.我们可以通过降低电阻阻值来降低功率损耗,…

jpa in查询_优选在shopee虾皮怎么发货价格查询皮皮虾云仓

优选在shopee虾皮怎么发货价格查询皮皮虾云仓皮皮虾云仓物流系统为现代化管理系统&#xff0c;可集中化&#xff0c;高效化的处理本土店物流订单。物流系统可对接主流的的电商平台ERP可以实现高效的订单处理。如lazada&#xff0c;shopee&#xff0c;1688、速卖通、eaby、shopi…

html5+、ReactNative、Weex、Ionic之间的区别、(配置java、python、Android环境)、ReactNative(react-native-cli)、yarn、Weex

html5、ReactNative、Weex、Ionic之间的区别&#xff1a; html5和Ionic&#xff1a; 在开发原理上基本相同&#xff0c;都是需要先开发出一个完整的网站&#xff0c;再通过html5或Ionic提供的打包技术对网站进行打包成移动app&#xff0c;它们实际还是一个网站&#xff0c;并非…

AVAudioSession

AVAudioSession类由AVFoundation框架引入。每个IOS应用都有一个音频会话。这个会话可以被AVAudioSession类的sharedInstance类方法访问&#xff0c;如下&#xff1a; AVAudioSession *audioSession [AVAudioSession sharedInstance];复制代码在获得一个AVAudioSession类的实例…

delphi listview失去焦点后的颜色_阴阳师姑获鸟和惠比寿建模更新对比 爷爷帅了 觉醒后鸟姐颜值提升...

阴阳师体验服近期更新了人气式神姑获鸟还有惠比寿的相关建模&#xff0c;本次特别奉上有关这两位式神的建模形象对比图&#xff0c;对比后发现经过修改和优化之后&#xff0c;爷爷更帅了&#xff0c;而觉醒后的鸟姐颜值也有所提升&#xff0c;一起来看看吧。惠比寿觉醒前觉醒前…

kibana 显示 @timestamp 时间问题(utc or browser当前时间)自动转换显示

https://github.com/elasticsearch/kibana/issues/95 可以统一timestamp时间字段为当前信息时区的时间&#xff01; http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-date-format.html 转载于:https://www.cnblogs.com/sunxucool/p/3939701.ht…

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

React简介&#xff1a; 前面只是简单介绍移动APP开发&#xff0c;后面还会继续深入介绍移动app开发&#xff1b;其中想要用ReactNative开发出更出色的应用&#xff0c;那么就得学好React&#xff0c;下面将介绍React&#xff1a; React 是一个由 Facebook 开发用于构建用户界…

去掉 edittext 长按全选_开封消毒湿巾全选

开封消毒湿巾全选   其实&#xff0c;带有杀菌效果的清洁产品大多通过降低微生物的繁殖力达到预期的杀菌效果&#xff0c;所添加的每种杀菌成分都针对特定细菌&#xff0c;无法杀灭所有细菌。如果产品中的杀菌剂浓度总是不能将细菌完全杀灭&#xff0c;就可能导致细菌对该类杀…