是你来晚了.-CSDN博客

原创 vue基础

什么是vue？Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。起步...

2021-03-23 20:21:41 110

嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成添加路由与子路由...import User from './views/User.vue'import Profile from './views/User/Profile'import Cart from './views/User/Cart.vue'......{ path: '/user', component: User, children: [ { path: '', name: 'user',

2021-03-17 10:03:50 105

原创组件

组件的注册在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件Vue.component()Vue.component('组件名称', {组件选项})组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题）组件选项与 new Vue 选项配置基本一致（也有一些细节的不同）全局组件与局部组件通过 Vue.component 注册的组件，我们称为全局组件，因为它可以在任意范围

2021-03-16 17:11:22 119

原创 mpvue构建项目

mpvue构建项目mpvue简介是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验mpvue的使用# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-

2021-03-16 16:05:28 62

原创云开发

云开发云存储数据库curd增加 db.collection('news').add({ data:{ title: this.data.title, content: this.data.content } })修改db.collection('news').doc("0ec685215e369f22094d528257476fcb").update({ data:{content: "修改的内容"}}

2021-03-16 15:55:36 80

原创 react安装与使用

安装与使用通过 npm、yarn、npx 都可以安装npmnpm i -g create-react-appyarnyarn global add create-react-app使用安装完成以后，即可使用 create-react-app 命令create-react-app <项目名称>或者通过 npx 的方式npxnpx create-react-app <项目名称>...

2021-03-16 15:07:11 58

原创路由动效

路由动效利用 transition 组件，我们还可以给路由导航加上动效// App.vue<template>...<transition name="fade"> <router-view/></transition>...</template><style>.fade-enter-active { transition: opacity .5s;}.fade-leave-active { tran

2021-03-16 14:54:33 93

原创 vue-router

路由当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由路由：把 url 与应用中的对应的组件进行关联，通过不同的 url 访问不同的组件vue-router 的安装npm i vue-router// ORyarn add vue-routerVue.use()通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中import Vue from 'vue'import VueRouter from 'vue-r

2021-03-16 14:54:11 51

原创异步请求

异步请求在实际的应用开发中，与后端交互，进行异步请求是很常见的需求axiosnpm i axios请求// home.vue<template> <div class="home"> Home </div></template><script>import axios from 'axios';export default { name: 'home', data() { return {

2021-03-16 14:11:09 78

原创 computed与watch

在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v-model="gender" va

2021-03-16 13:34:26 64

原创 class类简单解说

类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。如果A类继承了B类，且A类中写了构造器，那么A类构造器中super是必须要调用的类中所定义的方法，都是放在了类的原型对象上，供实例去使用<body> <div id="app"> </div> <script type="text/babel"> // 创建一个Person 类 class Person { .

2021-03-11 11:01:18 231

原创扩展运算符(... )函数，对象，数组方法等。。。

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值数组 let arr1 = [1,2,3,4] let arr2 = [2,3,4,5] console.log(...arr1) console.log(...arr1,...arr2) //使用扩展运算符将arr1和arr2放入同一个数组中函数 function sum(...num) { // 使用扩展运算符将实参传进来 return num.redu

2021-03-11 10:56:38 560

原创 Vue 组件传参

1.props 2. $emit 3. $root.eventHub 4.vuex 5. refs 6. $children1：父传子 props父发送参数：<template><div> <div id="app">  <helloWorld msg='hello world'></helloWorld> </div></div>&

2021-03-08 14:52:26 356

原创微信小程序上拉加载

wxml <view> // 循环获取到的数据 <view wx:for="{{list}}" wx:key="id"> {{item.id}} </view> </view>js data: { list:[], num: 1 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wx.request({.

2021-03-06 14:36:56 200

原创 vue3.0

安装1.yarn global add @vue/cli2.vue --version 查看是否安装成功3. vue create . 安装此文件夹下vue2的methods方法转换：reactive什么是reactive？reactive是vue3中提供的实现响应式数据的方法在vue2中响应式数据是通过defineproperty来实现的在vue3中响应式数据是ES6Proxy来实现的reactive注意点：reactive参数必须是对象（json/arr）如果reactiv

2021-03-06 12:36:40 275

原创入门到开发微信小程序

什么是小程序？小程序就是寄生于微信内的各种手机APP，它们不需要下载，不占用更多的手机内存，用完了后关闭即可，不需要删除。小程序的优点平台封闭，上手简单跨平台运行使用方便小程序页面js 页面逻辑json：页面配置wxml：页面结构 == HTMLwxss：页面样式 == CSS小程序单位相关单位pt逻辑分辨率（视觉单位，和屏幕尺寸有关系）；px物理分辨率（像素点）ppi：每英寸包含的像素点小程序单位换算关系iphone6下1px=1rpx=0.5pt（

2021-03-03 15:31:58 492 2

原创微信小程序注册，登录，安装包步骤及获取appid文档

微信小程序注册，登录，安装包步骤注册小程序：请点击注册添加链接描述登录小程序：请点击登录小程序开发者工具：请点击下载小程序如何注册及获取appid文档：请点击打开小程序文档...

2021-02-27 18:57:58 374

LzhiZ的博客