Vue
裴嘉靖
学而不思则罔 思而不学则殆
展开
-
vue的渲染器的实现
【代码】vue的渲染器的实现。原创 2023-03-21 14:48:45 · 149 阅读 · 0 评论 -
vue3插件的使用方式
函数类型写法:根目录建一个 plugins_function.js。对象类型写法:根目录建一个 plugins_object.js。原创 2023-03-10 15:40:07 · 77 阅读 · 0 评论 -
uniapp中mixin的局部混入用法
新建一个bluetooth.js。原创 2023-03-09 12:07:25 · 895 阅读 · 0 评论 -
v-model的修饰符
v-model的常用修饰符有以下几种lazynumbertrimdebounce(在Vue2.0后被移除)v-model.lazy 只有在input输入框发生一个blur时才触发 <input type="text" v-model.lazy="con"> <p>用户输入的内容: {{con}}</p>v-model.trim 将用户输入的前后的空格去掉 <input type="text" v-model.trim="con">原创 2021-12-16 21:08:12 · 233 阅读 · 0 评论 -
uniapp小程序更新版本提醒
在App.vue的onLaunch中写 onLaunch(options) { if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) {原创 2021-10-11 17:04:12 · 565 阅读 · 0 评论 -
uniapp H5端解决ios音频自动播放
<script> import wx from 'weixin-js-sdk'; // 引入微信SDK onLoad() { let that = this; innerAudioContext = uni.createInnerAudioContext(); innerAudioContext.autoplay = true; innerAudioContext.loop = true; innerAudioContext.src ='https://vkc.原创 2021-04-27 13:28:56 · 1962 阅读 · 0 评论 -
ES6之模板引擎&&字符串模板x-template
前言在js里面,经常需要使用js往页面中插入html内容写过一点前端的都会碰到需要使用JS字符串拼接HTML元素然后append到页面DOM树上的情况。一般的写法都是使用+号以字符串的形式拼接,如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。比如有的时候需要使用弹出框的时候手动使用字...原创 2019-11-07 20:11:44 · 936 阅读 · 0 评论 -
Vue之全局API(全局操作set+delete)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API。通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...原创 2019-11-06 19:49:13 · 575 阅读 · 0 评论 -
Vue之全局API(nextTick、filter、use)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API.通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作Vue.set + Vue.delete4、V...原创 2019-11-06 18:58:37 · 379 阅读 · 0 评论 -
Vue之全局API(扩展实例构造器extend)
全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API函数来定义新的功能。(2)常用vue 的全局 API列表1、Vue.directive 自定义指令2、Vue.extend 扩展实例构造器3、全局操作V...原创 2019-11-04 18:06:36 · 569 阅读 · 0 评论 -
Vue之全局API(自定义指令directive)
课程大纲(1)全局API(2)自定义指令—起源(3)自定义指令—分类(4)自定义指令—注册(5)自定义指令—调用(6)自定义指令—生命周期钩子全局API(1)什么是全局API?全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如本节要介绍的指令Vue.directive通俗理解:就是在构造器外部用Vue提供的API...原创 2019-11-04 17:22:08 · 4834 阅读 · 5 评论 -
Vue之多元素组件过渡+动画封装
课程大纲(1)多元素过渡(2)多组件过渡(3)列表过渡(4)动画封装多元素过渡首先介绍下如何实现多元素过渡(1)利用条件编译指令v-if与v-else实现多元素内容切换.(2)接下来在内容切换基础上,添加过渡动画,例如渐隐渐现效果1、transition添加name属性命名2、设置过渡状态(3)状态管理测试后发现并没有过渡效果,分析原因Vue在多个元素切换过程中...原创 2019-11-04 16:48:37 · 894 阅读 · 0 评论 -
Vue文本渲染指令v-text
文本渲染指令:这里补充个vue基础指令v-text文本渲染指令,v-text取值为数据data中某项时,便以文本形式渲染到DOM中场景:如果想单纯展示vue对象中的数据,可以使用文本渲染指令v-text插值表达式{{}}对比v-text(1)是否显示虚拟DOM即virtual dom验证后发现两者渲染结果完全一样,页面元素也一样。区别:但是如果你把网速调的很慢会发现,“v-...原创 2019-11-04 16:14:37 · 877 阅读 · 0 评论 -
Vue对象:允许对组件的属性实现数据验证。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></scri...原创 2019-11-01 20:38:20 · 612 阅读 · 0 评论 -
Vue组件需要注意的事项
Vue.js1、Vue的下载安装:Vue.js官网 | 学习 | 教程 | 安装。2、Vue.js的版本:2.6.10。3、Vue的第一个程序:Hello,World! var vm=new Vue({ el:‘#box’, data:{ message:‘Hello,World!’}});(1)vm:Vue实例,利用Vue构造函数/构造器创建...原创 2019-11-01 15:39:18 · 851 阅读 · 0 评论 -
Vue分类筛选器
Vue分类筛选器原创 2019-11-01 15:05:55 · 1414 阅读 · 0 评论 -
Vue四则运算计算器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></scri...原创 2019-11-01 14:02:55 · 1993 阅读 · 0 评论 -
Vue精品购物车
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <script sr...原创 2019-11-01 11:40:52 · 126 阅读 · 0 评论 -
Vue利用计算属性get和set拆分姓名
直接复制代码,改Vue链接就好。都有注释,简单易懂<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.6.9.min.js" type="text/javascript" c...原创 2019-10-31 21:36:37 · 416 阅读 · 0 评论 -
Vue之过渡动画钩子函数+Velocity.js动画库
前言CSS实现方式目前为止已经介绍了Vue过渡与动画实现方式,包含transition过渡类型动画和@keyframes类型动画。JS钩子函数方式+第三方库除了用CSS来实现vue的组件过渡与动画,还可以用JavaScript的钩子函数来实现,在钩子函数中直接操作DOM即可。正如之前所说,可以配合使用第三方 JavaScript 动画库,如 Velocity.jsVelocity.j...原创 2019-10-31 15:13:57 · 538 阅读 · 2 评论 -
Vue之过渡+动画
课程大纲(1)页面初始化渲染动画(2)transition过渡+@keyframes动画(3)过渡&&动画时长控制—type属性(4)自定义时长页面初始化渲染动画目前为止,已经结合animated.css动画库实现了@keyframes类型动画切换效果。【前言】如果想在页面初始化时渲染动画效果,此时需要用到appear呈现属性和appear-active-cl...原创 2019-10-31 14:50:26 · 353 阅读 · 0 评论 -
Vue之动画与animate.css动画库
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库,如 Velocity.js过渡动画原理在进入/离开的过渡中,会有 6 ...原创 2019-10-31 14:35:43 · 2098 阅读 · 0 评论 -
Vue之过渡transition
前言Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:在 CSS 过渡和动画中自动应用 class–基础动画可以配合使用第三方 CSS 动画库,如 Animate.css–CSS动画在过渡动画钩子函数中使用 JavaScript 直接操作 DOM—JS动画可以配合使用第三方 JavaScript 动画库,如 Velocity.js—JS动画库...原创 2019-10-31 14:19:43 · 392 阅读 · 0 评论 -
Vue之组件(插槽slot与可复用组件)
课程大纲(1)插槽基础案例(2)插槽分类1、单个默认插槽2、具名插槽3、作用域插槽4、解构插槽(3)v-slot新语法(4)编写可复用组件前言前言及场景:插槽概念在Vue中十分重要在很多第三方的Vue模块或插件中都会大量使用插槽作用:通过插槽slot可以更加方便的向子组件传递DOM元素,同时子组件使用插槽内容也十分简单,大大简化了代码,增加了代码可读性。插...原创 2019-10-30 20:09:20 · 2374 阅读 · 0 评论 -
Vue之组件(父子与非父子通信)
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。日常开发里,我们可以按照功能将一个网页拆分成很多个部分,每个部分就是一个组件。例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的子组件。前言有人可能会问:为什么要学习组件通信原因:在实际开发中我们经常会遇到在一个自定义组件中要使用其他自定义组件,这就需要一个父子组件关系,进而引出互相通信的问题...原创 2019-10-30 19:40:20 · 191 阅读 · 0 评论 -
Vue添加书籍
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>图书管理系统</title> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></scrip...原创 2019-10-29 18:54:24 · 938 阅读 · 0 评论 -
Vue自适应完美购物车
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>购物车</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script ...原创 2019-10-29 18:50:03 · 222 阅读 · 0 评论 -
Vue工程化---脚手架搭建与工程化
步骤1、卸载旧版node—uninstall nodejs2、安装新版,测试node版本和npm版本3、安装cnpm淘宝镜像4、安装vue-cli脚手架工具5、创建vue项目—一系类的配置6、项目下载完毕后,进入cd项目文件,启动项目npm run dev淘宝镜像遗留问题上节安装了淘宝镜像cnpm,安装成功后检测cnpm版本此时cmd输出cnpm版本,表示安装成功。node_...原创 2019-10-29 18:25:43 · 447 阅读 · 0 评论 -
Vue之组件(绑定原生事件、$listeners、$ref)
课程大纲(1)组件绑定原生事件(2)监听器属性$listeners(3)ref与ref与ref与refs注册引用信息属性和对象组件绑定原生事件有时,我们想要在一个组件的根元素上直接监听一个原生事件,一般操作步骤如下1、首先定义一个 child 组件,什么事件都不绑定,代码如下:2、接下来,给 child 组件增加一个 @click 事件,如下所示3、这个 han...原创 2019-10-28 20:43:43 · 2629 阅读 · 0 评论 -
Vue之组件(组件细节、模块系统、v-model语法糖)
前言本节针对组件应用相关细节做下补充,以便查漏补缺,大纲如下(1)H5编码规范与template模板的3种写法(2)组件data(3)组件名(4)组件注册(5)模块系统(需结合后续工程化使用,这里简单了解即可)(6)自定义事件(父子组件通信)(7).sync修饰符(8)自定义组件之v-model语法糖H5编码规范分析如下代码中的组件解析结果H5规范中要求,t...原创 2019-10-28 20:18:30 · 474 阅读 · 0 评论 -
Vue之组件(Props特性深析)
前言本节总结罗列下组件传参props的相关细节点,大纲如下1、Props命名风格2、Props动态和静态3、组件参数Props校验4、非Props特性与Props特性5、$attrs和inheritAttrs继承属性Prop命名风格【前言】创建一个博文组件,如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话,它是没有办法使用的,这也正是 prop 的由...原创 2019-10-28 19:40:00 · 859 阅读 · 0 评论 -
Vue之组件(动态组件及keep-alive)
动态组件首先看下效果图选项卡效果可以通过 Vue 的 元素加一个特殊的 is 特性实现,下图:Vue可以在不同组件之间进行动态切换,这种方法称为动态组件,下图:①绑定is特性②绑定计算属性此时,切换activeTab便可以切换展示信息。,下图:接下来给按钮添加点击事件,点击切换,下图:给按钮添加激活样式,下图:动态组件嵌套组件同样可以实现选项卡嵌套上...原创 2019-10-23 19:49:30 · 847 阅读 · 3 评论 -
Vue之组件(组件通信、单向数据流)
组件通信我们已经知道,从父组件向子组件通信,通过 props 传递数据就可以了,但 Vue 组件通信的场景不止有这一种,归纳起来,组件之间通信可以用下图表示。组件关系可分为父子组件通信、兄弟组件通信、跨级组件通信。本节主要介绍下常见父子通信的方法。单向数据流单向数据流是父子组件的核心概念,props是单向绑定的。当父组件的属性发生变化的时候,会传导到子组件。但是反之,为了防止子...原创 2019-10-23 19:36:23 · 166 阅读 · 0 评论 -
Vue之组件(复用性、props、单向数据流)
组件组织通常一个应用会以一棵嵌套的组件树的形式来组织。–VUE:组件化、数据驱动例如,可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、标题之类的组件。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。组件复用性可以将组件进行任意次数的复用,例如,利用组件定义一个超级链接,在项目中多次...原创 2019-10-22 20:06:54 · 481 阅读 · 0 评论 -
Vue之组件(基础、分类、命名)
前言组件( Component )是 Vue.js 最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的。接下来会由浅入深地学习组件的全部内容,并通过几个案例练习熟练使用 Vue 组件。正式讲解组件前,先看个场景,了解下为什么学习组件?场景举例有人会问:为什么学习组件,作用是什么?接下来看个场景 下面图中是个很常见的聊天界面,有些标准的控件,比如右上角的关闭按钮、...原创 2019-10-22 15:58:21 · 819 阅读 · 0 评论 -
JavaScript深拷贝和浅拷贝
首先我们看一下如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化①如果B也跟着变了,说明这是浅拷贝,功力不够②如果B没变,那就是深拷贝,自食其力,修成正果接下来会分别阐述栈堆,基本数据类型与引用数据类型,这些概念能帮助理解深拷贝与浅拷贝。浅拷贝案例首先举个浅拷贝例子:有人可能会问:明明b复制了a,为啥修改数组a,数组b也跟着变了。这里就...原创 2019-10-21 19:19:09 · 123 阅读 · 0 评论 -
Vue之表单与v-model
Vue之表单与v-model小编分为五个部分:如下(1)v-model基本用法(2)单选框/按钮(3)复选框/多选按钮(4)下拉选择列表(5)表单输入绑定修饰符v-model基本用法表单控件在实际业务较为常见,比如单选、多选、下拉选择、输入框等,用它们可以完成数据的录入、校0验、提交等。 Vue 提供了 v-model指令,用于在表单类元素上双向绑定数据。例如在输入框上使用时,输...原创 2019-10-15 20:19:08 · 3386 阅读 · 0 评论 -
Vue Array数组操作(变异更新、替换)
今天小编写一下Array数组操作(变异更新、替换)来个v-for和key小补充,方便了解接下来的课程循环指令v-for补充:使用v-for更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;我们在使用的使用经常会使用index(即数组的下标)来作为key,但其实这是不推荐的一种使用方法;最...原创 2019-10-15 19:51:31 · 39937 阅读 · 4 评论 -
Vue之v-bind类名与样式绑定
今天的课程分为五个小部分(1)v-bind回顾(2)class-对象语法(3)class-数组语法(4)内联样式style-对象语法(5)内联样式style-计算属性语法前言DOM元素经常动态绑定一些类名或者style样式,本节讲解下使用 v-bind指令绑定class与style的多种方法。之前介绍过v-bind基本用法及语法糖,主要用于动态更新HTML 元素属...原创 2019-10-15 09:27:53 · 629 阅读 · 0 评论 -
Vue之内置指令(基本、条件、列表渲染)
今天咱们分为七个部分,如下(1)JS迭代器(2)遮罩指令v-cloak(3)多条件渲染指令v-if、v-else-if、v-else(4)列表渲染指令v-for(5)列表渲染指令标识符key属性(6)key属性由来与虚拟DOM(7)diff微分算法第一:JS迭代器**迭代器模式是一种相对简单的模式,迭代器的使用可以极大地简化数据操作,目前的绝大部分语言都内置了迭代器**...原创 2019-10-14 20:58:57 · 855 阅读 · 0 评论