![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
L_squan
这个作者很懒,什么都没留下…
展开
-
vue双向数据绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调来渲染视图。具体步骤:第一步: 需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化第二步: compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每原创 2021-06-17 10:32:47 · 93 阅读 · 0 评论 -
项目中如何修改element-ui的默认样式
1、可以去除scoped样式来更改如果还更改不了可以加 !import 即权重2、也可以穿透这样就不需要去除scoped属性直接 用 >>><style scoped > .a >>> b.{ width:50px }</style>3、如果使用的是sass、less可以 用 /deep/<style scoped > .a /deep/ b.{ width:50px }</styl原创 2021-06-11 11:49:33 · 113 阅读 · 1 评论 -
elemeng-ui 中el-form 表单如何校验
<el-form :model="form" ref="addUserFormRef" :rules="userfrom"> <el-form-item prop="username" label="用户名" label-width="80px"> <el-input v-model="form.username" autocomplete="off"></el-input> <...原创 2021-06-11 11:42:57 · 249 阅读 · 1 评论 -
element-ui 按需引入
在src目录下创建一个plugins/element.js import Vue from 'vue' import { Button,Message} from 'element-ui' Vue.use(Button) // 将弹框组件全局挂在到VUe原形实例 Vue.prototype.$message = Message还需要下载npm install babel-plugin-component -D插件在main.js引入 import './plugins/原创 2021-06-11 11:26:39 · 102 阅读 · 1 评论 -
axios封装 (axios拦截,api统一管理)
首先在 src下新建 文件夹如 http 里面有request.js 用来封装api.js 用来放置我们的接口请求然后就可以开始操作了现在request.js里操作先安装axios npm i axios --save import axios from "axios" // 引入axiosimport store from "@/store/index" //引入vueximport { Toast } from "vant" // 引入vant创建axios实例 con原创 2021-06-06 20:40:22 · 208 阅读 · 2 评论 -
项目开发流程(简述 +webpack打包)
项目开发流程(简述)确定项目技术栈vue vue.js 2.0vue-cli vue脚手架 3/4vue-router vue路由 vuex vue状态管理工具 axios 异步请求数据 vant 移动端框架 rem 自适应布局 scss CSS 扩展语言 webpack 打包工具搭建项目可以用npm下载axios等插件 npm axios --save或者是yard yard add axios --save (add是下载单个 install可以下载多个文件)并且原创 2021-06-04 16:28:39 · 122 阅读 · 0 评论 -
多环境变量配置
多环境变量配置首先我们需要在package.json里操作默认只有serve和build 我们需要再添加一个test测试环境"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build ", "test":"vue-cli-service --mode testing" },通过 npm run serve 启动本地 , 执行 development通过 n原创 2021-06-02 14:57:57 · 55 阅读 · 0 评论 -
transition转场动画
transition转场动画可以分为这几个状态v-enter: 进入之前v-enter-to:进入后v-enter-active:这里包含了上面的v-enter、v-enter-to两个时间段,在这里可以对上半场过渡定义过渡时间、曲线等v-leave:离开前v-leave-to:离开后v-leave-active:这里包含了上面的v-leave、v-leave-to两个时间段,在这里可以对下半场过渡定义过渡时间、曲线等项目实战 <template> <div id="原创 2021-06-02 08:10:54 · 97 阅读 · 0 评论 -
keep-alive
keep-alivekeep-alive 标签 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执 行。<keep-alive :include="whiteList" :exclude="blackList" :max="amount"> <router-view></router-view></keep-alive>inc原创 2021-06-02 07:54:27 · 208 阅读 · 0 评论 -
数组常用方法 (es4,es5,es6)
push() :在数组尾部添加元素,可以添加多个元素,返回值是修改后数组的长度; let arr = [1,2,3,4] newarr=arr.push(9,'aa') console.log(arr); //[1,2,3,4,9,'aa'] console.log(newarr); // 6pop() :在数组末尾删除一个元素,一次加粗样式只能删除一个,返回值删除的元素; let arr = [1,2,3,4] newarr=arr.pop() .原创 2021-05-26 07:51:08 · 128 阅读 · 0 评论 -
为数组arguments
伪数组有 arguments 、NodeList、argument 不具有数组的方法但是 有长度和下标那我们要使用它时可以把它转换成真数组在操作1、最简单的转换方法…展开newarr=[…arguments]2、使用Array.from()方法let arr = Array.from(arguments)3、借用数组的方法var arr1 = Array.prototype.slice.call(arguments);var arr2 = Array.prototype.push.cal原创 2021-05-25 20:38:11 · 48 阅读 · 0 评论 -
数据类型判断
数据类型判断typeoftypeof 666 // Numbertypeof abc // Stringtypeof { } // objecttypeof [ ] // objecttypeof true // Bolearntypeof null // object typeof null // object typeof /^[a-zA-Z]{5,20}$/ // object基本数据类型中:null 。引用数据类型中的:Array,Object,Date原创 2021-05-25 08:16:06 · 49 阅读 · 0 评论 -
js数据类型
js数据类型分为基本数据类型和引用数据类型基本数据类型Number、undefined、Bollean、String、Null、Symbol(es6新增独一无二的值) 和 BigInt(es10新增)引用数据类型Object(Array、Objecct、function、Date、RegExp)...原创 2021-05-25 07:43:36 · 37 阅读 · 0 评论 -
深拷贝
深拷贝(什么是深拷贝,为什么要进行深拷贝,如何进行深拷贝(至少写三种方法,手写深拷贝))所谓拷贝,就是赋值。把一个变量赋给另外一个变量,就是把变量的内容进行拷贝。把一个对象的值赋给另外一个对象,就是把一个对象拷贝一份。分为基本数据类型拷贝和引用数据类型拷贝基本数据类型:let a= 5let b=ab=4console.log(a) // 5console.log(b) // 4我们会发现a的值是5 b的值是4 也就是a没有随着b改变而改变引用数据类型(一般是数组,对象)var原创 2021-05-24 08:17:24 · 109 阅读 · 0 评论 -
vue-router (两种路由模式、编程式/组件式、如何传参(优缺点)、)
vue-router (两种路由模式、编程式/组件式、如何传参(优缺点)、)vue-router 路由跳转分为两种模式hash模式:在浏览器中符号的“#”,以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由原创 2021-05-23 20:36:28 · 415 阅读 · 0 评论 -
vuex (概念、几部分组成、map高级语法、数据持久化)
vuex (概念、几部分组成、map高级语法、数据持久化)vue是一个专门为vue.js应用程序开发的状态管理模式,可以分为 这5大部分state:数据存放mutations:唯一可操作 state 里的数据地方actions:异步操作stategetters:计算属性 (可缓存)modules:模块化开发,每个模块拥有自己的 state、mutation、action、getter创建:首先在根目录下创建一个文件夹 store里面创建index.jsimport Vue from原创 2021-05-23 19:24:17 · 108 阅读 · 0 评论 -
vue生命周期函数
vue生命周期函数分为8个阶段beforeCreate阶段 数据和元素都为undefindcreated vue的实例对象数据有了 但是还没有元素brforeMount vue的数据和元素都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换mounted vue实例挂载完成,data.message成功渲染beforeUpdate、updated 数据更新时会触发beforeDestory对data的改变不会再触发周期函数 此时vue实例已经解除了事件监听 以及和d原创 2021-05-21 09:22:19 · 106 阅读 · 0 评论 -
vue的组件通信
vue的组件通信 (分为三种:父传子、子传父、兄弟组件通信)父传子://在父页面<template> <div class=""> <child1 :sendData="brand" ></child1> </div></template><script>import child1 from '../components/sona'export default { data() {原创 2021-05-20 08:12:12 · 70 阅读 · 0 评论