- 博客(147)
- 收藏
- 关注
RSS订阅原创 小程序跳转 navigator
1.navigator进行跳转<!-- 1.navigateor 进行跳转 --><navigator url="/pages/detail/detail">跳到详情页</navigator><!-- 1.navigateor 进行跳转 open-type属性--><navigator open-type="redirect" url="/pages/detail/detail">跳到详情页(redirect)</navigato
2020-11-27 09:57:04
373
原创 小程序弹窗
1.Toast handleShowToast(){ wx.showToast({ title: '你好啊', duration:3000, icon:'none', mask:true, success(){ console.log('展示弹窗成功'); }, fail(){ console.log('展示弹窗失败'); }, complete(){
2020-11-27 09:18:33
303
原创 小程序登录
1.登录流程解析2.演练//app.jsconst TOKEN = 'token'App({ globalData: { token: '' }, onLaunch: function () { //1.先从缓存中取出token const token = wx.getStorageSync(TOKEN) //2.判断token是否有值 if (token && token.length !== 0) { //3.验证
2020-11-27 09:09:11
224
原创 小程序网络请求
1.request get_data_oringin() { // 1.发送最简单的get请求 wx.request({ url: 'http://152.136.185.210:8000/api/w6/recommend', success(res) { console.log(res); } }) // 2.get请求携带参数 wx.request({ url: 'http://152.136.18
2020-11-27 08:57:30
208
原创 小程序 组件的使用
1.创建一个组件组件的代码注册组件2.注意事项3. 组件的样式细节尽量只使用class选择器 因为class设置的样式在各个组件之间不会互相影响3.1如何让class可以互相影响4.组件和页面的通信4.1 页面向组件传数据1.在组件的js中设置 properties2.在page中将值传过来 并且使用4.1 页面向组件传样式1.在组件的js中设置 externalClasses2.在页面中将class传过来3.在页面中定义响应的css5.自定义事件
2020-11-26 19:11:17
351
原创 小程序的事件处理
1.事件处理2.常见的事件3.currenttarget与target的区别currenttarget是这个事件所在的元素target是触发这个事件的元4.事件传递参数5.事件的捕获与冒泡catch会阻止事件的进一步传递bind会让事件接着往下传递...
2020-11-26 11:49:01
202
原创 wxml与wxss与wxs
1.wxss2.wxml1.mustache语法2.条件判断3.列表渲染4. block5.item和index 另起名字6.template7.wxs
2020-11-26 10:37:30
913
原创 小程序的基本知识
1.全局配置1. pages页面路径列表2.window3.tabBar至少要有两个路径2.局部配置局部配置就是每个页面中都会有个.json文件 里面也可以配置跟app.json一样的配置 但是如果配置一样的话 局部配置会把全局配置覆盖了3.页面渲染的整体流程4. 小程序的启动流程5.生命周期函数6.注册APP小程序打开场景...
2020-11-25 11:04:09
292
原创 小程序初学
1.数据绑定 采用胡须语法<view>Hello {{name}}</view><view>年龄 {{age}}</view>2.列表展示 for语句<view wx:for="{{students}}" >{{item.name}}-{{item.id}}-{{item.age}}</view>3.事件监听<!-- 事件监听改变data --><button size="mini" bindtap
2020-11-24 21:43:14
130
原创 redux初使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id="cartListC
2020-11-24 15:40:09
123
原创 vue的一些小点
想要在组件上使用原生事件 就必须在事件后面加上.native例子 <BackTop @click.native="backClick"></BackTop>
2020-11-20 14:29:45
182
原创 封装一个简单的axios
import axios from 'axios'// ES6 Promise的封装export function request(options) { return new Promise((resolve, reject) => { // 1.创建axios的实例对象 const instance = axios.create({ // baseURL: 'http://152.136.185.210:8000/api/w6', baseURL:
2020-11-19 20:42:01
295
原创 vue创建快速的path路径
module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/assets', 'common': '@/common', 'components': '@/components', 'network': '@/network', } } }}
2020-11-19 20:37:54
659
原创 react 路由
1. 先下载并引入import {HashRouter as Router, Route, Link, NavLink } from 'react-router-dom'// 注意：什么时候使用 BrowserRouter 和 HashRouter ?// 规范：本地调试的时候，一般使用 HashRouter。url地址有 # 方便。这种 url地址seo是不太喜欢的。// BrowserRouter 一般上线使用，利于 SEO。2.基本使用import React from "react";
2020-11-19 20:28:33
221
原创 react初学
1.遍历一个对象jsx 里面的 { } 提供js语境，可以执行js合法代码，也可以插值表达式在 react 的jsx里面，如果遇到 < 当成jsx语法，如果 { 当成变量 { userList.map((item) => { return ( <ul key={item.id}> <li>序号：{item.id}</li>
2020-11-19 20:24:29
223
原创 better-scroll的使用
1.首先在页面中要有一个固定高度的容器注：.wrapper就是这个容器 且这个容器只能有一个子容器 <div class="wrapper" ref="wrapper"> <ul class="moviebox"> <li v-for="(ele,index) in movieList" :key="index" class="movieContainer">
2020-11-18 20:44:58
1919
2
原创 vue之keep-alive
1. vue可以用is来加载组件<component :is="About"><component>2. 那么在被渲染的组件 用一个keep-alive套住 就可以解决每次切换组价都无法保存状态的问题<keep-alive> <router-view/> //或者 <component is="About"></component></keep-alive>...
2020-11-17 20:21:10
129
原创 vue之路由懒加载
其实路由懒加载就是在写路由表的时候 最最基本的写法是routes:[{ path:'/about', component:About //这是在之前引入的组件}]路由懒加载的写法routes:[{ path:'/about', component:()=>{import './component/About'}}]...
2020-11-17 20:10:58
141
原创 vue中tab栏的切换，保存状态，以及过渡
//当点击这个li的时候 将currentActive转换为hotting 然后在样式中比较 为true的话就可以显示样式<ul class="hotAndComing"> <li @click="currentActive='Hotting'" :class="{'activeClass' : currentActive ==='Hotting'}">正在热映</li> <li @click="currentAc
2020-11-10 11:38:58
1514
原创 Vue文档的一些没学到的知识
1.在v-if和v-for中使用template2.关于key3.计算属性vs方法总之就是计算属性只要依赖的属性没有变化，那么下次使用这个属性的时候只会从缓存中取值，而方法的话是不管有没有变化都会将这个值重新计算一次4. 计算属性的set和get5.事件修饰符6.事件修饰符7.按键修饰符8.全局组件可以认为是可复用的Vue实例9.解析DOM的注意事项10.单向数据流11.prop验证12.插槽的后备内容13.作用域插槽14.在
2020-11-08 17:01:05
162
原创 vue3.x的初使用
1.vue3.x的新特性1.Vue3.0六大亮点Performance：性能比Vue 2.x快1.2~2倍Tree shaking support：按需编译,体积比Vue2.x更小Composition API: 组合API(类似React Hooks)Better TypeScript support：更好的 Ts 支持Custom Renderer API：暴露了自定义渲染APIFragment, Teleport(Protal), Suspense：更先进的组件2.vue是怎么变快
2020-11-06 19:43:32
266
原创 nuxtjs的初使用
1.安装$ npx create-nuxt-app <项目名>//或者$ yarn create nuxt-app <项目名>2.路由只要在page目录下生成vue文件 nuxtjs就会自动将改组件添加到路由中去++ 在page文件中创建目录接下来就可以直接用http://localhost:3000/news访问了++动态路由动态路由只要在vue文件命名的时候加上下划线例如这样就可以直接访问了++路由嵌套在目录下创建一个vue文件 同时在同
2020-11-05 18:52:00
244
原创 Vue SSR的基本使用
1.安装npm install vue vue-server-renderer --save2.尝试在命令行中显示出来在服务器端渲染的元素// 第 1 步：创建一个 Vue 实例const Vue = require('vue')const app = new Vue({ template: `<div>Hello World</div>`})// 第 2 步：创建一个 rendererconst renderer = require('vue-server-
2020-11-05 17:45:07
1045
原创 Vue的render函数
其实render函数就跟template一样 是用来渲染模板的1.两种方式使用render函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl
2020-11-05 17:33:36
257
原创 Vuex的初使用
1.statestore的index.js文件在store文件中定义了这些数据然后要在组件文件中用计算属性取出这些数据export default new Vuex.Store({ strict: true, state: { count: 0, title: 'hi store!', UserList: [] }, })组件文件<template><h1>{{titleAlias}}</h1></templ
2020-11-04 19:25:09
305
原创 Vue换主题颜色和更换语言
1.换主题颜色在这个面板重新下载规定好颜色 按下载按钮 然后将下载得到的css文件跟原先引用的element-ui的css文件替换下2.更换语言
2020-11-04 13:02:05
565
原创 Vue自定义插件
1.第一步首先创建一个plugin文件夹 把响应的代码放到其中对应的文件夹中var MyPlugin = {}//第一个参数是vue 第二个参数就是引入这个包 Vue.use()的时候的第二个参数MyPlugin.install = function (Vue, options) { console.log(options); // 1. 添加全局方法或 property //一般自定义插件都会在名字前面加上$符号 Vue.prototype.$dialog = function
2020-11-04 11:47:24
295
原创 vue脚手架
1.命令行安装npm install -g @vue/cliORyarn global add @vue/cli2.创建项目vue create my-projectORvue ui3.局部安装需求：要是从别人那里取得项目要重新安装脚手架 获得的项目是2.x的 但是自己电脑里面的是3.x的，那么如果安装了2.x的，自己电脑原先的3.x的项目就用不了了，这时候就要进行局部安装2.x的脚手架了。yarn add @vue/clinpx vue create myapp4.安装2.x
2020-11-03 20:11:09
147
原创 自己生成数据
1.用mock生成数据var express = require('express');//引入mock模块const { Random } = require('mockjs');var Mock = require('mockjs')var router = express.Router();/* GET users listing. */router.get('/', function(req, res, next) { res.send('respond with a re
2020-10-28 19:09:43
483
原创 ES6模块化
1.导入成员用import导出模块成员该js文件名为m1let a=10;let c=10;export default{a,c}按需导出export let s1="aaa";export let s2="ccc";export let s3="bbb";直接导入并使用代码for(let i = 0; i < 3; i++) { console.log(i)}2.暴露模块成员用export导入模块成员import m1 from ‘./m1.js’按需导
2020-10-26 21:33:25
121
原创 Vue初学4 vue路由
1.vue-router的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&
2020-10-25 16:27:10
216
原创 axios的基本使用
1.axios的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body>
2020-10-21 08:55:57
227
原创 fetch的基本使用
服务器代码const express = require('express')const app = express()const bodyParser = require('body-parser') // 处理静态资源app.use(express.static('public')) // 处理参数app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));// 设置允许跨域
2020-10-21 08:44:42
571
原创 Vue初学3 组件的学习
1.组件注册<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <
2020-10-16 15:36:24
196
原创 初学vue2
初学vue21.表单基本操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px
2020-10-08 16:11:50
199
原创 初学vue
初学vue1.cloak解决页面闪动问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-10-05 20:13:26
341
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人