日报
文章平均质量分 75
裴嘉靖
学而不思则罔 思而不学则殆
展开
-
微信小程序(路由及组件跳页传参)
课程大纲(1)API路由跳页传参(2)navigator导航组件跳页传参API路由跳页传参商品列表展示页商品展示页编写回到商城列表展示页,如果跳页时直接传参,会发现黄色警告,无法跳页小程序事件传递参数小程序事件传递参数在小程序中,给元素绑定事件不能直接传递参数,如果写成正解:①给元素绑定自定义属性data-item=”{{item}}”②在js中通过事...原创 2019-11-29 10:58:24 · 340 阅读 · 0 评论 -
微信小程序(页面用户行为)
课程大纲(1)页面构造/注册器Page()(2)页面注册器参数data初始化数据页面生命周期页面用户行为其他(3)页面用户行为前言注册页面:对于小程序中的每个页面,在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用:指定页面的初始数据、生命周期回调、事件处理函数等。页面的用户行为:小程序宿主环境提供了四个和页面相关的用户行为回调页面构造/注...原创 2019-11-27 19:48:12 · 528 阅读 · 0 评论 -
微信小程序(页面生命周期)
课程大纲(1)页面构造/注册器Page()(2)页面注册器参数data初始化数据页面生命周期页面用户行为(3)页面生命周期及顺序小结:①小程序注册App()②页面注册Page()前言注册页面:对于小程序中的每个页面,在页面对应的 page.js 文件中调用 Page 方法注册页面示例作用:指定页面的初始数据、生命周期回调、事件处理函数等。页面的生命周期:...原创 2019-11-27 19:30:43 · 1101 阅读 · 0 评论 -
微信小程序(逻辑层与程序注册构造器)
课程大纲(1)小程序逻辑层 App Service(APP服务)(2)ServiceWorker(3)web worker(4)程序构造/注册器App()前言逻辑层 App Service(APP服务)小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层,同时接...原创 2019-11-27 18:58:45 · 344 阅读 · 0 评论 -
git与码云,工作必备
前言目前国内开发人员普遍都开始使用 Git 进行项目的版本管理课程大纲(1)Git 介绍,Git 作用,Git 工作流程(2)Windows 环境和 Linux 环境下安装 Git(3)码云常用操作(4)Git 常用命令操作(5)Git 分支命令操作Git 简介Git 的创始人同时也是 Linux 的创始人 Linus。Linus 早期在维护 Liunx 代码一直是人肉合并...原创 2019-11-26 19:39:05 · 114 阅读 · 0 评论 -
微信小程序(跳页之tabBar导航跳转)
tabBar小程序导航简介:小程序是一个多tab标签应用(客户端窗口的底部或顶部有tab栏可以切换页面),可以通过Tabbar配置项指定tab栏的表现,以及tab切换时显示的对应页面。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置在小程序配置文件里面可以设置tabBar属性:先来个简单案例看下效果 "tabBar": { "list": [ ...原创 2019-11-25 16:21:17 · 500 阅读 · 0 评论 -
微信小程序(小程序模型与宿主环境)
课程大纲(1)小程序模型(2)模型基本工作方式(3)数据驱动(4)通信模式(5)WebView(承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。)(6)JsCore(7)宿主环境前言小程序可以调用宿主环境/微信提供的微信客户端的能力,这就使得小程序比普通网页拥有更多的能力(扫一扫、摇一摇)。小程序的运行环境分成渲染层和逻辑层, WXML 模板文件和 W...原创 2019-11-25 15:52:51 · 745 阅读 · 0 评论 -
微信小程序(JS逻辑文件)
课程大纲(1)业务逻辑案例(2)调用API案例(3)ECMAScript----(4)小程序执行环境(5)模块化(6)作用域与全局变量前言前言:一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,通过编写脚本文件来处理用户的操作。小程序的主要开发语言是 JavaScriptJS 作用:①开发者使用 JS来开发...原创 2019-11-22 18:51:32 · 2246 阅读 · 0 评论 -
微信小程序(WXML模板文件二)
课程大纲(1)循环指令key属性补充(2)wx:if条件变异指令(3)<block>标签(4)hidden隐藏元素(5)模板(6)引用(7)共同属性循环指令key属性补充Vue和React框架用遍历指令时的key值不建议用index(1)key值在没有删除插入操作时只要是唯一值也无所谓,即此时为index索引也可以(2)如果有删除或者插入的操作,后一位会继...原创 2019-11-21 16:54:05 · 129 阅读 · 0 评论 -
AJAX之jQuery操作&&全局处理程序
jQuery之AJAX日常开发里为了提高开发效率,一般会使用框架中的AJAX语法,例如经常使用的jQuery,也给我们封装好了AJAX的一些语法操作,而且jQuery也封装了JSONP跨域。几种常用的方式$.ajax,$.post, $.get, $.getJSONjQuery之$.ajax1、$.ajax$.ajax是JQuery对ajax封装的最基础,通过使用这个函数可以完成...原创 2019-11-20 20:14:41 · 566 阅读 · 0 评论 -
AJAX请求5步法
课程大纲(1)AJAX请求步骤(初版)(2)AJAX请求类型(3)跨域+CORS+Network(4)JSON序列化与反序列化/解析(5)AJAX请求步骤(微调)首先来一段五步法的全部完整代码,下面再对代码一一进行详细介绍,代码如下:这是naonao.text的代码: [ {"name":"佳佳","age":8}, {"name":"慧慧","age":5}, {"na...原创 2019-11-15 16:34:49 · 254 阅读 · 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(扩展实例构造器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分类筛选器原创 2019-11-01 15:05:55 · 1414 阅读 · 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之组件(绑定原生事件、$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 评论 -
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 · 39933 阅读 · 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 评论 -
Vue计算属性&侦听器&方法
字符串截取操作js中字符串方法操作有很多:concat、indexOf…. 等等,本节主要介绍两种经常混淆的字符串截取方法:substring和substr(1)substring - 作用:用于提取字符串中介于两个指定下标之间的字符 - 语法:substring(start,end) - 语法解析:start开始和end结束的位置,从零开始的索引,**包头不包尾**定义:...原创 2019-10-12 17:19:07 · 397 阅读 · 0 评论 -
Vue计算属性与侦听器
计算属性简介什么是计算属性?通过之前章节,已经可以搭建一个简单的Vue应用,在模板里双向绑定一些数据或者表达式。但是,表达式如果过长或者逻辑更为复杂时,就会变得臃肿甚至难以阅读和维护,比如这里的表达式包含3个操作,并不是很清晰,所以在遇到复杂逻辑时应该使用计算属性,使用计算属性对上例进行改写。所有的计算属性都以 函数的形式写在vue实例内的computed选项内,最终return返...原创 2019-10-12 16:19:29 · 281 阅读 · 0 评论 -
Vue生命周期钩子
生命周期钩子 也叫 生命周期函数 或者 生命周期事件**什么是生命周期?Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以用自己注册的js方法控制整个大...原创 2019-10-12 15:00:59 · 548 阅读 · 0 评论 -
深浅拷贝 多级深拷贝方法
就是假设B复制了A,当修改A时,看B是否会发生变化深拷贝:如果B没变,那就是深拷贝,自食其力,修成正果浅拷贝:如果B也跟着变了,说明这是浅拷贝,功力不够一级深拷贝方法:(1)slice()不带任何参数,默认返回一个长度和原数组相同的新数组(2)concat()不带任何参数,把返回数组和一个空数组合并后返回,即返回一个长度和原数组相同的新数组(3)直接遍历,添加到空数组(4)ES...原创 2019-07-29 19:20:59 · 226 阅读 · 0 评论 -
文字雨滴效果
如何使用canvas做出文字雨滴的效果<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>文字雨滴效果</title> <style type="text/css"> *{ margin: 0; padding...原创 2019-08-29 16:14:43 · 230 阅读 · 0 评论 -
纯css轮播图
代码简单明了。有问题留言小编在这里插入<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-08-31 15:12:16 · 588 阅读 · 0 评论