qq_44383759的博客

原创 React的脚手架卸载、安装、降低React版本

1.安装命令：npm i -g create-react-app2.卸载命令：npm uninstall -g create-react-app3.给React降低版本：npm install react@17.0.2 react-dom@17.0.2 --save或者yarn add react@17.0.2 react-dom@17.0.2 --save

原创 router和route的区别

在组件的实例化对象里面，有$router和$route两个属性，this.$router就是路由的实例化对象，this.$route是该组件对应的活跃路由，里面的有组件具体的路径之类的配置信息

原创 嵌套路由、导航路由、动态路由

1.嵌套路由在里面嵌套children数组配置项，里面就是路由里面的子路由VueRouter new出来的router实例化对象的截图 1.const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}获取VueRouter原型对象的push

原创 React生命周期

挂载前的钩子和挂载完毕后的钩子，挂载前的钩子往下排的顺序是：constructor构造方法，初始化数据，constructor钩子、如果想要把props映射到状态里，使用getDerivedStateFromProps钩子、创建虚拟DOM，渲染组件ReactDOM.render(,document.getElementById('root'))，render渲染组件钩子、ReactDOM.render(,document...

原创 原生js写todolist

todolist原生写法

原创 以多种形式创建的React组件的属性props的用法

以类形式创建的React组件的属性props的用法以构造函数形式创建React组件的props的用法总结，props就是React.Component里面的参数对象,React.Component是抽象基类，至少要调用render函数才能使用它，类里面的render返回虚拟Dom,拓展库里面的render将虚拟DOM渲染到页面。...

原创 定义全局过滤器和全局自定义指令

1.全局过滤器 <div id="root"> <h3>现在是：{{time|timeFormater('YYYY_MM_DD')|mySlice}}</h3> </div> <script src="vue.js"></script> <script> Vue.filter('myslice',function(value){ retur

原创 Vue中的自定义指令

<div id="app"> <h3>{{name}}</h3> <h2>当前n的值是:<span v-text="n"></span></h2> <h2>放大10倍后n的值:<span v-big="n"></span></h2> <button @click="n++">+</button&.

原创 V-pre

Dom节点的解析过程直接跳过，没有使用插值语法的加快呈现

原创 v-once

v-once动态渲染一次

原创 v-cloak

v-cloak指令可以阻止没有被Vue解析的页面的呈现

原创 cookie

什么是cookie？当你输入你的用户名，密码，登录，请求访问服务器访问成功的时候，服务器会返回一些cookie给你的浏览器，cookie类似于字符串，浏览器存储这返回的cookie.然后你在服务器里面请求访问所有仓库，同时自身携带之前的cookie,服务器会重新返回新的cookie值，因为你访问的信息发生了改变。图如下注意它返回的cookie值是适用于当前浏览器的，如果你换个浏览器，另个浏览器不能打开你想要访问的服务器...

原创 V-html

v-html可以解析绑定内容的标签，可以获取cookies <div id="root"> <h1>{{msg}}</h1> <h1 v-text="msg">6666666</h1> <h3 v-html="msgT"></h3> </div> <script src="vue.js"></script> &l

原创 V-text

<div id="root"> <h1>{{msg}}</h1> <h1 v-text="msg">6666666</h1> </div> <script src="vue.js"></script> <script> const vm=new Vue({ el:"#root", .

原创 Vue检测数据总结

若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value，用户输入的就是value值。若：<input type="radio"/>,则v-model收集的是 value值，且要给标签配置value值若：<input type="checkbox"/>1.没有配置input的属性，那么搜集的就是checked(勾选就是checked=true,不勾选就是checked=false)2.配置input的va

原创 数组里面的方法总结

1.pusharr.push()在原数组最后一个值后面添加元素 let arr=[1,2,3,4]; arr.push(1) console.log(arr);//[1, 2, 3, 4, 1]2.poparr.pop()删除数组的最后一个元素3.shiftarr.shift()删除数组的第一个元素4.unshiftarr.unshift()在数组第一个元素前面添加新的元素5.splicearr.splice(a,b)从索引值为a的.

原创 在外面给创建好的Vue对象里面的数据添加新的属性

我们用到Vue.set(),代码如下<div id="app">{{obj}}</div> <script src="vue.js"></script> <script> //给student对象添加属性，并添加属性值 const vm=new Vue({ data(){ return { obj:{

原创 Object.defineProperty的配置项

原创 Object.defineProperty

1.基本理解Object.definePropertyObject.defineProperty（）可以给对象添加新的属性，也可以修改本身的属性2.深入理解Object.defineProperty当Object.defineProperty（）这个方法改变自身属性时，比如给自身name属性添加get(),和set()方法时，就会出现错误，虽然表面上方法添加上了，但实质上是一种错误的表现形式代码如下let data={ name:"一元教育" }

原创 数组的排序

1.数组的升序let arr=[1,99,66,20]; arr.sort((a,b)=>{ return a-b; }) console.log(arr);2.数组的降序 let arr=[1,99,66,20]; arr.sort((a,b)=>{ return b-a; }) console.log(arr);...

原创 Vue - 脚手架的安装与卸载

安装在命令行窗口 输入npm install -g @vue/cli卸载安装新版本需要卸载之前安装的旧版本在命令行窗口 输入npm uninstall -g vue-cli

原创 Vue里面的key

1.虚拟DOM中key的作用key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成的【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：2.对比规则：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:1.若虚拟DOM中的内容没改变，直接使用之前的真实DOM,复用！2..若虚拟DOM的内容改变或着叫DOM元素的节点发生改变，则生成新的真实DOM把旧的DOM给替...

原创 Vue的虚拟Dom

一、什么是虚拟Dom?虚拟Dom其实就是一个普通的JavaScript对象，创建虚拟Dom的好处在于，dom元素不能直接渲染到页面，有一个过程，那就是初始化数据=》生成虚拟Dom=>解析Dom,并渲染页面，当初始化数据发生改变时，又生成了一个新的虚拟Dom,Vue对象里面有一个diff算法，这个算法就是比较前后两个虚拟Dom,若每个对应的子节点元素一样，则复用，复用就是指把之前渲染到页面的数据，继续留着，不需要重新渲染，提升了页面的效率。具体见下面的两张图，来对虚拟Dom进一步的理解..

原创 Vue的第四天学习

1、v-on的基本使用与函数传参、文本框切换Demo文本框切换2、v-on的事件修饰符3.v-on的按键修饰符（键盘事件）4.如何当input框失去焦点时，点击enter键登录成功created()方法里面实现对整个document(dom)的传统注册方式，给一个判断，如果你按了enter键，那e.code是“Ente...

原创 Vue的第三天学习

1.计算属性的使用,如下行代码const vm = new Vue({ el: "#app", computed: { fullname: { get() { }, set() { } } ...

原创 Vue第二天学习

## *Class与Style的绑定** 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。1.我们给v-bind:class传一个对象，以动态的形式切换class，代码如下，**<div ：c.

原创 Vue第二天学习

Class与Style的绑定*操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。1.我们给v-bind:class传一个对象，以动态的形式切换class，代码如下，<div ：class=“{a...

原创 Vue的第一天学习

1.什么是Vue？Vue是构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。Vue与传统的渲染方式不一样，Vue是声明式渲染，组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案，Vue做了大量的工作，数据与DOM建立了联系，因此Vue上的所有东西是响应式的！有了Vue我们可以不用再直接与HTML交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这