- 博客(19)
- 收藏
- 关注
RSS订阅原创 UniApp 基础（条件编译）
一、跨端兼容uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。大量写 if else，会造成代码执行性能低下和管理混乱。 编译到不同的工程后二次修改，会让后续升级变的很麻烦。在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。uni-app参考这个思路，为uni-app提...
2021-09-10 16:53:15
999
原创 UniApp 基础（生命周期）
一、应用生命周期uni-app支持如下应用生命周期函数：注意应用生命周期仅可在App.vue中监听，在其它页面监听无效。 onlaunch里进行页面跳转，如遇白屏报错，请参考https://ask.dcloud.net.cn/article/35942 onPageNotFound 页面实际上已经打开了（比如通过分享卡片、小程序码）且发现页面不存在，才会触发，api 跳转不存在的页面不会触发（如 uni.navigateTo）...
2021-09-06 17:18:58
660
原创 UniApp 基础（路由）
一、路由uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。所以uni-app的路由用法与Vue Router不同，如仍希望采用Vue Router方式管理路由，可在插件市场搜索Vue-Router。二、路由跳转uni-app有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。三、页面栈框架以栈的形式管理当前所有页面， 当发生路由切换的时候，页面栈的表...
2021-09-02 13:50:04
5190
原创 UniApp 基础（快速上手）
一、环境配置1、下载HBuilderX可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX：官方IDE下载地址HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。2、创建uni-app在点击工具
2021-09-02 13:44:11
3723
原创 UniApp 基础（框架简介）
一、简介uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。 uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。二、开发规范为了实现...
2021-08-31 12:23:14
7926
原创 Vuex入门
一、Vuex概述1、组价之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间数据共享：EventBus$on 接收数据的那个组件 $emit 发送数据的那个组件2、Vuex概念Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。3、使用Vuex的好处1、能够在 vuex 中集中管理共享的数据，易于开发和后期维护2、能够高效地实现组件之间的数据共享，提高开发效率3、储存在vuex中的数据都.
2021-08-29 00:20:20
85
原创 CSS3——鼠标变小手
鼠标移上去变小手样式 第一种方式：为该元素添加a标签<a href="javascript:video(0);"> </a> 第二种方式: 为该元素添加css样式：cursor:pointer;div{ cursor:pointer;}...
2021-08-27 17:45:20
411
原创 Vue $router与$route
1、$router$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vu构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。2、$route$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等等。$route.path 字符串，等于当前路由对象的路径，会被解析为...
2021-08-26 00:21:07
97
原创 ES6 模块化
1、为什么要使用模块化当我们是以一个开发小组的形式开发项目，每个人负责项目的某个模块，若没有模块化思想，各模块之间定义的变量，方法很容易交杂在一起导致错误。 2、常见的模块化规范 CommonJS AMD CMD ES6的Modules 3、export/import导出和导入，一旦你通过导出的方式给别人暴露出来，任何人只需要通过导入的方式就可以调用。实例：index.html<!DOCTYPE html>...
2021-08-25 00:22:42
1370
原创 Vue Axios
一、什么是Axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Axios 常用于Vue全家桶中请求后端数据。二、安装1、用 npm$ npm install axios2、用bower:$ bower install axios3、用 cdn<script src="https://unpkg.com/axios/dist/axios.min.js"></...
2021-08-23 21:18:44
91
原创 Vue 过渡&动画
一、概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js二、单元素、组件的过渡Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用v...
2021-08-22 21:57:41
131
原创 Vue 组件(二)——Prop
四、Prop 在组件的使用过程中，经常会遇到需要向子组件传递数据的情况，这个时候就需要用到 prop来自定义属性传值了。 prop概念：prop属性其实是一个对象，在这个对象里可以定义一些数据，而这些数据可以通过父组件传递给子组件。在Vue组件中，props选项的类型可以是一个字符串数组，也可以是一个对象。Vue.component('PostItem', { props: ['title'], template: '&...
2021-08-21 21:38:07
840
原创 Vue 实例集(跑马灯)
1.实现效果2.实现代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.
2021-08-20 14:49:39
84
原创 Vue 组件(一)
一、概念 首先我们先看一个Vue组件的实例<div id="app"> <counter></counter></div><script>// 定义一个名为 counter 的新组件Vue.component('counter', { data: function () { return { count: 0 } }, template: '<button @c...
2021-08-19 23:54:23
154
原创 Vue 案例(简易购物车)
今天给大家看一个简单的Vue小案例 文件目录:css bootstrap.min.css js jquery-3.5.1.min.js vue-2.6.12-min.js bootstrap.min.js data list.json 代码:<!DOCTYPE html><html lang="zh-CN"><head> ...
2021-08-18 21:32:00
200
原创 Vue CLI(Vue 脚手架)
一、介绍vue CLIVue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过@vue/cli实现的交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行扩展。 一个丰富的官方插件集合，集成了前端生态中最...
2021-08-17 20:10:41
111
原创 Vue常见指令
Vue常见指令 一、v-if和v-show及其区别 v-if 和 v-show 都是条件渲染指令。 区别：1、v-if 是根据表达式的真假来删除和插入元素，通俗来讲就是表达式为false则元素不渲染，为true则渲染。 2、v-show不管条件是否成立，都会渲染元素，条件为true则渲染元素，为false则为该元素添加display：none。<div id="app"> <div v-if="is...
2021-08-16 22:49:54
118
原创 Vue常用的几个修饰符
事件修饰符vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，常用的事件修饰符有以下几个： 1、.stop 阻止事件继续传播2、.prevent 阻止标签默认行为3、.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理4、.self 只当在 event.target 是当前元素自身时触发处理函数5、.once 事件将只会触...
2021-08-15 13:28:57
994
原创 VUE学习笔记-入门
一、初识Vue Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。Vue 只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。二、安装1、兼容性Vue不支持IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 2、直接在官网下载 https://cn.vuejs.org (下载完成...
2021-08-14 14:58:21
124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人