2020年01月_star@星空

原创 mvvm和mvc

mvvm概念：MVVM是 Model-View-ViewModel 的缩写，分别对应着：数据，视图，视图模型。Model是我们应用中的数据模型，View是我们的UI视图层，通过ViewModle，可以把我们Modle中的数据映射到View视图上，同时，在View层修改了一些数据，也会反应更新我们的Modle。简单理解就是双向数据绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候...

2020-01-14 15:13:05 5024 1

原创 vue中的slot（插槽）

1 、基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 ...

2020-01-10 14:34:19 2022

原创 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，场景如下：<template v-for="item in tableData"> <div :class="{'redBorder':item.red}"> <div>{{ item.name}}</div> ...

2020-01-09 16:07:33 13404 2

原创 vuex数据持久化

vuex状态持久化1 . 安装npm install vuex-persistedstate2 . 在store.js里import createPersistedState from 'vuex-persistedstate'const state = { user:{},}export default new Vuex.Store({ state, ge...

2020-01-08 17:39:52 2425

原创根据对象的属性值对数组排序

数组对象排序定义数组对象的排序函数数组对象例子:students:[ {name:'baibai',age:32}, {name:'xiaobai',age:30}, {name:'gufan',age:21}, {name:'King',age:45}]排序函数://数组对象方法排序:function sortByKey(array, key) {return...

2020-01-08 15:31:24 262

原创 vue better-scroll插件完成上拉加载更多

better-scroll 来做下拉刷新和上拉加载特别方便。可直接复制在vue-cli中使用步骤：### 一、下载 better-scroll```npm install better-scroll -S```二、组件中引入<template> <div class="rules"> <p class="drop-down"...

2020-01-07 15:29:53 868

原创 vue中使用scss

1、安装npm install node-sass --save-devnpm install sass-loader --save-dev2、配置在build中的 webpack.base.conf.js 文件中，找到rules，添加// 在 rules中添加{ test: /\.scss$/, loaders: ['style', 'css', 'sass']}3...

2020-01-07 08:41:29 634

原创 Vue的双向数据绑定原理（极简版）

答： vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么...

2020-01-03 16:50:34 15058 4

转载从输入url到页面加载完成发生了什么

从输入url到页面加载完成发生了什么详解这是一道经典的面试题，这道题没有一个标准的答案，它涉及很多的知识点，面试官会通过这道题了解你对哪一方面的知识比较擅长，然后继续追问看看你的掌握程度。当然我写的这些也只是我的一些简单的理解，从前端的角度出发，我觉得首先回答必须包括几个基本的点，然后在根据你的理解深入回答。1、浏览器的地址栏输入URL并按下回车。2、浏览器查找当前URL是否存在缓存，并比较...

2020-01-03 09:44:06 3662

原创 vue中如何使用Element-UI

element-ui组件库官网:[http://element-cn.eleme.io/#/zh-CN](http://element-cn.eleme.io/#/zh-CN)官网中有各种组件的使用教程，demo代码，方法，函数等。下面介绍vue-cli项目中如何使用element-ui1 .第一步是下载：npm i element-ui –S2 .引入 Element完整引入在...

2020-01-02 17:34:01 6382 3

原创 Vue axios接口封装和api管理

创建 until,api文件夹，分别创建reques.js,index.jsreques.js如下：import axios from 'axios' export function request(config){ // 创建axios对象 const service=axios.create({ baseURL:'https://elm.cangdu.org'...

2020-01-02 10:59:18 994

田兴的博客