![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
框架vue的学习分享
林柏川
这个作者很懒,什么都没留下…
展开
-
10.vue和react一起学 (*^_^*)
静态类型校验reactreact 中自带了校验的库 PropTypes原创 2020-06-11 23:59:34 · 202 阅读 · 0 评论 -
9.vue和react一起学 (*^_^*)
高阶组件(hoc)高阶组件: 高阶组件是参数为组件,返回值为新组件的函数。react里面有高阶组件的概率。vue虽然没有显式提出高阶组件大,但它也有高阶的影子。reactimport React from "react"; class Plan { subs; constructor(plans) { this.plans = plans; } addSubs(target) { this.subs.push(target);原创 2020-06-09 23:54:46 · 264 阅读 · 0 评论 -
8.vue和react一起学 (*^_^*)
嵌套逐级传递props的场景&refs嵌套逐级传递props的场景以组件为单元开发的react和vue都存在嵌套逐级传递props的场景。但它们在简化这种复杂场景的方法有不同。refsreact与vue都有引用的概念,其用法有不同。react嵌套逐级传递props的场景react解决嵌套逐级传递props的场景采用最外层创建context的方法结合发布订阅的设计模式。所有包含在发布者(provider)内的订阅者(consumer)在发布的数据源变化时,都能够重新渲染ui界面。原创 2020-06-07 23:56:01 · 255 阅读 · 0 评论 -
7.vue和react一起学 (*^_^*)
代码分割前面都是使用直接通过script引入的方式使用react或者vue框架,然而这种方式,我们得要考虑全局污染、兼容性、代码优化、依赖关系等众多问题。为了让我们的精力更多地放在框架学习上面,从这里开始我们使用构建工具管理我们的程序,当然不是自己去搭建配置。我们使用的是create-react-app或者vue-cli去使用通用的构建配置。全局安装:npm install -g @vue/clireact创建通用构建配置的react-appnpx create-react-app my-ap原创 2020-06-06 21:46:30 · 342 阅读 · 0 评论 -
6.vue和react一起学 (*^_^*)
继承&组合react 组件复用主要通过组合,继承也是可以的,只是组件之间关系的维护比较困难,官方推荐组合。reactclass Father extends React.Component { constructor() { super() this.state = { fatherName:"大头爸爸" } } get fatherName(){ return this.state.fath原创 2020-06-05 23:57:33 · 193 阅读 · 0 评论 -
5.vue和react一起学 (*^_^*)
条件渲染&循环渲染&表单&状态提升reactclass Demo extends React.Component { constructor(prop) { super(); this.state = {content:[], inputVal:"", demo1prop:1} } componentDidMount(){ // 模拟请求 setTimeout(() => { this.setState({原创 2020-06-03 23:50:23 · 152 阅读 · 0 评论 -
4.vue和react一起学 (*^_^*)
lifecycle生命周期&event事件vueconst Comp = Vue.component("comp",{ render(){ return( <div>组件 <slot name="title"></slot> </div> ) }, activated (){ console.lo原创 2020-06-01 23:57:01 · 228 阅读 · 0 评论 -
3.vue和react一起学 (*^_^*)
对比以下react和vue组件的属性和状态react// 类组件class Son extends React.Component { constructor(){ super() this.state = { knowledge: 0, experience: 0 }; this.advance.bind(this) } advance({type, payload}){ const { knowledge, experi原创 2020-05-31 23:51:32 · 345 阅读 · 0 评论 -
2.vue和react一起学 (*^_^*)
是不是觉得写createElement很抽象?vue和react官方都是提供了相应的转化jsx的支持,这些支持靠的的强大的转换器babel。react1.安装依赖以及相关配置首先我们cd 到 react-jsx目录下,npm init -y初始化项目。cd react-jsx && npm init -y安装babel相关依赖npm i --save-dev @babel/core @babel/cli @babel/preset-react 对babel相关配置,预设@b原创 2020-05-30 14:35:51 · 427 阅读 · 0 评论 -
1.vue和react一起学 (*^_^*)
先对比一下vue与react各自的creatElement函数。vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2020-05-28 01:47:43 · 354 阅读 · 0 评论 -
利用vue-property-decorator以及vue-tsx-support实现vue的es6类写法(类似react)
首先咋们先看一下react的相关写法:import React,{Component} from 'react'// 导入样式react-cli,应该是默认支持css module,可以防止全局污染import './index.scss'class Home extends Component{ constructor(props){ //调用父类构造函数,实现继承 ...原创 2020-04-13 23:53:43 · 1751 阅读 · 0 评论 -
记录vue+tsx写法中使用css module的一点小坑
问题背景1.背景:如果以tsx的形式写render:Vnode以渲染出html,tsx文件中应该是不能用vue文件中的template写html结构,以及style写样式的。就要使用css module。2.问题:使用css module设置requireModuleExtension: false,省略xxx.module.css中的module后缀,第三方组件库的样式加载不出来。1.cs...原创 2020-04-12 23:54:44 · 5015 阅读 · 0 评论 -
9.vue2.x之vue2.x的实例属性
重学vue2.x之vue2.x的实例属性vm.$dataVue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。console.log(this.attrs)console.log(this.$data.attrs)//两种方式均可访问到数据vm.$props当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。...pro...原创 2019-11-18 23:47:41 · 378 阅读 · 0 评论 -
8.vue2.x之vue2.x的选项 / 其它(二)
重学vue2.x之vue2.x的选项 / 其它(二)name组件名,只有作为组件选项时起作用。Vue.component() 注册时,全局 ID 自动作为组件的 name。//ID即作为组件的nameVue.component('ID',{...}) 有利于vue-devtools组件树的构建,未命名组件显示为 < AnonymousComponent >delimit...原创 2019-11-17 15:18:56 · 182 阅读 · 0 评论 -
11.vue2.x之vue2.x的实例方法 / 事件
重学vue2.x之vue2.x的实例方法 / 事件vm.$onvm.$on( event, callback )event:当前示例上的自定义事件。str或者array。callback :回调函数会接收所有传入事件触发函数的额外参数。vm.$on(['testone','testtwo'], function (msg) { console.log(msg)})vm.$emit...原创 2019-11-21 13:58:59 · 104 阅读 · 0 评论 -
10.vue2.x之vue2.x的实例方法 / 数据
重学vue2.x之vue2.x的实例方法 / 数据vm.$watchvm.$watch( expOrFn, callback, [options] )返回值:{fn} unwatchexpOrFn:字符串或者函数类似。为字符串时,表示侦听的对象。为函数时,函数返回依赖的data或者computed组成的表达式。callback:回调函数,当expOrFn变化时,其都会重新执行。opti...原创 2019-11-21 11:39:21 · 122 阅读 · 0 评论 -
6.vue2.x之vue2.x的选项 / 生命周期钩子
重学vue2.x之vue2.x的选项 / 生命周期钩子beforeCreate此阶段,实例已开始初始化,VDOM和数据都还没有初始化。一般不会在这个周期里面进行操作。created数据已经初始化完成,数据观测能够进行 ,watch/method方法能够调用,但vdom未在页面渲染。beforeMount数据已经初始化完成,VDOM未挂载到页面,插值表达式{{}}此时能够看到显示在页面中...原创 2019-11-08 21:21:46 · 125 阅读 · 0 评论 -
7.vue2.x之vue2.x的选项 / 其它(一)
重学vue2.x之vue2.x的选项 / 其它directives自定义指令,用法同全局指令。filters自定义过滤器,用法同全局过滤器。components自定义组件,用法同全局组件。parent指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。...原创 2019-11-08 23:12:47 · 151 阅读 · 0 评论 -
5.vue2.x之vue2.x的选项 / DOM
重学vue2.x之vue2.x的选项 / DOMel提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。直接挂载//挂载到页面中id为#app的dom上new Vue({ el: '#app', .... })延迟挂载new Vue({//延迟挂载,效果同上 ....原创 2019-11-05 22:34:30 · 131 阅读 · 0 评论 -
4.vue2.x之vue2.x的选项 / 数据
重学vue之vue的选项 / 数据data类型: Function | Object直接创建一个实例,data可以是一个对象:var vm = new Vue({ data: data})构造器或者说子组件中的data必须是一个函数,因为这类组件可能被多次复用,如果每次都共用一个对象里的数据会产生冲突混乱,而通过闭包,每次共享援引的对象为全新副本数据对象。var Compone...原创 2019-11-04 21:15:12 · 184 阅读 · 0 评论 -
3.vue2.x之vue2.x的全局api(二)
重学vue之vue的全局api(二)Vue.useVue.use(plugin)用来全局注册插件.Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = ...原创 2019-11-03 15:45:15 · 157 阅读 · 0 评论 -
2.vue2.x之vue2.x的全局api(一)
重学vue之vue的全局apiVue.extendhttps://www.jb51.net/article/159958.htm原创 2019-11-03 12:08:40 · 414 阅读 · 0 评论 -
1.vue2.x之vue2.x的全局配置
重学vue之vue的全局配置silent取消 Vue 所有的日志与警告。Vue.config.silent = falseVue.config.silent = trueoptionMergeStrategies自定义选项的混入策略import Vue from 'vue' Vue.config.optionMergeStrategies.name = functio...原创 2019-10-31 21:16:49 · 347 阅读 · 0 评论