- 博客(34)
- 收藏
- 关注
RSS订阅原创 组件的注册 传参 双向数据绑定
组件根组件：通过new Vue()来创建的，通常应用只有一个可复用组件：通过Vue.component()来创建 分为全局组件和局部组件组件的注册vue.componentVue.componrnt(‘组件名称’，{组件选项})组件名称遵循自定义组件命名规范：全小写、连字符组件选项与new Vue选项配置基本一致<div id="app"> <k-div></k-div> </div>//可复用组件的全
2021-03-29 19:23:10
189
原创 watch与computed
computedcomputed是一个计算属性(多个值变化，影响到一个结果) 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。他是函数主要当作 属性来使用，逻辑简单。只执行一次就拿出来调用下一次获取computed的值时才会重新计算。<div id="app"> <div> <button :class="{active: gender === ""}" @click="getUsers('')">全部</but
2021-03-26 17:36:21
175
原创 Vue指令
指令表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用{{}}语法，而是需要指令。指令是一些带有v-前缀的属性v-指令名称 = 表达式 （不是普通的字符串）v-text...
2021-03-25 20:11:35
114
原创 vue入门基础---组件---render----挂载----数据劫持--视图更新
vue.js是一套用于构建用户界面的渐进式框架vue核心：声明式渲染组件引入直接用script进行引入把vue.js保存到本地进行引入组件在script中创建vue组件el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例template组件的模板结构（HTML），模板内容会被 vue进行渲染，生成最终的html内容，并替换占位（挂载）元素Mustache（双大括号，大胡子） 语法
2021-03-24 19:05:31
312
原创 路由参数
路由参数history : 历史记录以及路由给我们的一些操作< button onClick = { () => { //history.go(-1) // ****goBack 返回上一步 //goForward 前进一步 // *****push : 修改当前的url //
2021-03-14 22:37:30
122
原创 hook 简单的小案例
React hooks(钩子)React hooks 是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能React Hooks 优势简化组件逻辑复用状态逻辑无需使用类组件编写Hook 使用规则只在 React 函数中调用 HookReact 函数组件中React Hook 中只在最顶层使用 Hook//开通必须是 useSizefunction useSize() { return { w: window.i
2021-03-13 21:27:03
190
1
原创 标题函数式组件
函数式组件函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当前纯渲染组件来用//函数式组件/*特别注意：函数组件：1. 组件的第0个参数是props - 接收父级传递过来的信息2. 组件中return （必须写） 定义该组件要渲染的内容3. 没有生命周期，没有this，没有state*/在16.7(beta)之前 ，函数组件 一直当作纯渲染组件来使用16.8正式上线function Child(props) { re
2021-03-13 10:04:26
74
原创 children dangerouslySetInnerHTML
children组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容可以自定义结构的组件的常用形式children传递函数传递子组件代码演示import React, { PureComponent, } from 'react';class Popwindows extends PureComponent { state = { close: false //不关 } render() {
2021-03-12 22:03:55
125
原创 PureComponent的详解
PureComponentPureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直PureComponent缺点可能会因深层的数据不一致而产生错误的否定判断，从而shouldComponentUpdate结果返回false，界面得不到更新。PureComponent优势不需要开发者自己实现shouldComponentUpdate，就可以进行简单的判断来提升性能。代码演示class App extends
2021-03-12 18:46:18
1707
原创 生命周期函数详解
React生命周期细constructor(props)类的构造函数，也是组件初始化函数，一般情况下，我们会在这个阶段做一些初始化的工作初始化 state处理事件绑定函数的 thisrender()render 方法是 Class 组件必须实现的方法static getDerivedStateFromProps(props, state)该方法会在 render 方法之前调用，无论是挂载阶段还是更新阶段，它的存在只有一个目的：让组件在 props 变化时更新 stateco
2021-03-11 20:07:39
748
原创 跨组件通信
跨组件通信 context - 扩展React.createContext(defaultValue); { Consumer, Provider } = createContext(defaultValue)Context.Provider 在父组件调用 Provider 传递数据value 要传递的数据接收数据class.contextType = Context; static contextType = Context;this.context;Context.Consumer
2021-03-09 20:13:41
208
原创 setState异步原理 和 react组件通信
setState异步原理state 和 setStatesetState(updater,[callback])updater: 更新数据FUNCTION/OBJECTcallback: 更新成功后的回调FUNCTION异步：react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能浅合并 Objecr.assign()setAge = () => { this.setState({ nub: this.state.nub
2021-03-08 21:46:10
120
原创 React初期的事件
// 类式组件中 定义constructor, 一定要接受props，调用super（）----为了继承 里面内容为构造函数 // constructor(props) { // super(props); // this.state = { // nub: 0 // } // }// 数字的增加 Fn = () => { // console.log(this);
2021-03-08 10:12:46
115
原创 React的循环数据渲染到页面
Object.values()Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for…in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组循环数据渲染一种export default class friendList
2021-03-07 22:11:05
1099
原创 react 自定义构建初期
npm start启动一个内置的本地 WebServer，根目录映射到 ‘./public’ 目录，默认端口：3000命令输入完毕自动弹出浏览器端口特殊 ：3000或者3001自定义项目类式组件组件类必须继承 React.Component组件类必须有 render 方法import React,{Component} from 'react';app.jsimport React, { Component } from 'react';/*类名*/class App
2021-03-06 21:37:19
101
原创 React注意事项
// JSX 基于 javaScript 和 xml 的拓展语法// - 它可以作为值使用// - 它并不是字符串// - 他也不是html// - 它可以配合js 表达式一起使用// - 它不可以和js 语句一起使用// - 所有的标签名必须是小写// - 所有的标签必须闭合，哪怕单标签//// - class 要写做className// - style 接受的是一个对象，并不是字符串// - 每次只.
2021-03-02 20:33:27
101
1
原创 React代码联系
React试图这里因为没有js代码 用的官方的<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <!-- 相当于react.js --> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"&g
2021-02-28 21:16:50
112
原创 React初步认识组件
React 组件对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。函数式组件函数的名称就是组件的名称函数的返回值就是组件要渲染的内容类式组件组件类必须继承 React.Component组件类必须有 render 方法样式.friend-list { border: 1px solid #000000; width: 200px;}.friend-group dt { padding: 10px; ba
2021-02-27 21:58:53
100
原创 plugins的介绍使用
Plugins扩张webpack本身的一些功能，他们会允许在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等。HtmlwebpackPlugin在打包结束后，自动生成一个html文件，并把打包生成的js抹开引入到该html中npm install --save-dev html -webpack-plugin// webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");module
2021-02-26 21:30:34
4336
1
原创 获取用户当前地址
获取用户当前地址申请开发者密钥（key）：申请密钥开通webserviceAPI服务：控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI -> 保存(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2安全域名设置，在小程序管理后台 -
2021-02-11 00:02:54
746
2
原创 小程序框架初识和mpvue的安装步骤
微信小程序框架WeUI 小程序–使用教程小程序框架mpvue组件化开发框架wepy官方框架MINATina.js前端框架weweb微信UI组件库 iView WeappZanUI-WeApp – 一个颜值高、好用、易扩展的微信小程序 UI 库Tarompvue全局安装 vue-clinpm install --global vue-cli创建一个基于 mpvue-quickstart 模板的新项目vue init mpvue/mpvue-quickstart my-p
2021-02-07 22:39:48
177
原创 2021-02-06
右键点击cloudfunctions文件，选择新建node.js云函数（我这里是updaData）右键单击该文件，点击上传并部署：云端安装依赖点击云开发里面查看 如下图点击获取云函数中云端数据//云函数的云端数据 updataiCoudData(){ wx.cloud.callFunction({ // 需调用的云函数名 name: 'updaData', // 传给云函数的参数 data: { a: 100,
2021-02-06 21:37:20
93
原创 云开发增删改
云开发增删改添加数据写一个点击按钮，方便操作<view><button type="primary" bindtap="addData">点击添加数据</button></view>初始化在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。以下调用获取默认环境的数据库的引用：const db = wx.cloud.database()写在代码的最上端 用于接下来的一些列操作添加数据的操作//添加数据 //
2021-02-05 22:47:58
157
1
原创 小程序登录
小程序游戏登录请求先搭建静态<view wx:if="{{!isLogin}}"> <button type="primary" open-type="getUserInfo" bindgetuserinfo="getInfo">点击登录</button></view>写初始的登陆状态data: { isLogin:false //true 为登陆状态 //默认值false 状态为没登录 },登陆需要ope
2021-02-04 21:39:30
82
原创 小程序游戏请求
小程序游戏登录请求先搭建静态<view wx:if="{{!isLogin}}"> <button type="primary" open-type="getUserInfo" bindgetuserinfo="getInfo">点击登录</button></view>写初始的登陆状态data: { isLogin:false //true 为登陆状态 //默认值false 状态为没登录 },登陆需要ope
2021-02-01 23:29:12
94
1
原创 组建的引入与传参
引入组件 父传子 组件内修改值 监听值 子传父子组件向父组件子<button style="margin-top:20px" type="primary" bindtap="changValue">点击修改父级的值</button>父 <my-components bind:myevent="myevent"></my-components>监听点击修改父级的值 的按钮最后出来结果插槽组件 wxml 的 slot在组件
2021-01-31 22:53:04
94
1
原创 组件与组件通信
props 与 state 的区别state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改 state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state组件通信与数据流在 React.js 中，数据
2021-01-30 23:00:30
138
原创 上拉加载
<view class="newsContainer"> <view class="newsItem"> wx:for="{{newsData}}" wx:key="key" bindtap="title" data-id="{{item.id}}" </view></view>页面相关事件处理函数–监听用户下拉动作getData(p){ wx.request({ url: 'https://j
2021-01-28 22:23:48
98
原创 template标签与小程序数据加载报错问题
name:给当前模板添加标记 *<template name="a"><view>我的模板</view></template><view> <text>我是模板之外的内容</text></view>我的模板 我是模板之外的内容这个是获取路径的方法*<import src="/pages/templates/a.wxml"></import>.
2021-01-24 22:14:55
184
原创 模板引用
模板引用提高模板复用性；定义模板<template name="A"> <text> A template </text> </template>引入模板Import 可以在该文件中使用目标文件定义的template<import src="/pages/templates/a.wxml" /> <template is="a"></template>include 可以将目标文件除了 template
2021-01-23 21:25:44
166
原创 初识微信小程序
微信小程序下载 ：点击进入下载任意一个都可以：我个人是稳定版下载完打开 工具显示：由于第一次使用 推荐大家使用测试号进去先熟悉一下。
2021-01-22 00:05:13
66
原创 GIT安装与使用
GIT人工版本控制器通过人工的复制行为来保存项目的不同阶段的内容，添加适当的一些描述文字加以区分繁琐、容易出错产生大量重复（冗余）数据常见版本控制工具CVSSVNGit# git三个区域工作区暂存区git仓库git课程安装config配置姓名和邮箱查看. git隐藏目录检查当前目录是否被git管理（有无.git）初始仓库 git init增加内容删（删除分级别，删完需要提交）改（改完需要重新添加）在本分支修改代码后 使用 git statue 查看自己修改
2021-01-20 21:38:13
70
原创 响应式布局
/*@media: 声明关键字screen：设备的类型and : 关键字 (连接，指定)() : 媒体特性(就是屏幕尺寸){} ： 指定的样式当 screen的屏幕尺寸 符合 指定的尺寸时， 执行指定的样式max-width: 屏幕小于等于指定尺寸时 触发 (最多)min-width: 屏幕大于等于指定尺寸时 触发 (最少)*/移动端开发的两种主流方案之一： 响应式布局兼容 1. 内容没有受到明显影响时，自适应宽高即可 2. 内容受到明显的影响时，改变布局
2021-01-19 20:26:48
84
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人