北辰.two-CSDN博客

原创 Vue - 侦听器

1. vue侦听器-watch可以侦听data/computed属性值改变使用场景(作用):主动侦听data/computed变量"值"的变化语法:watch: { 变量名 (newVal, oldVal){ // 变量名对应值改变这里自动触发 } }例子:<template> <div> <input type="text" v-model="name"> </div>&lt

2021-11-01 18:16:08 237

1.vue计算属性-computed一个数据, 依赖另外一些数据计算而来的结果场景: 一个变量的值, 需要用另外变量计算而得来语法:computed: { "计算属性名" () { return "值" }}注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同注意2: 函数内变量变化, 会自动重新计算结果返回例子:需求:需求1: 求2个数的和显示到页面上需求2: 字符串翻转<template> &l

2021-11-01 18:08:23 52312

原创 Vue - 过滤器

vue过滤器-定义使用转换格式, 过滤器就是一个函数, 传入值返回处理后的值过滤器只能用在, 插值表达式和v-bind表达式Vue中的过滤器场景 :传入一个值,得到处理后的值字母转大写, 输入"hello", 输出"HELLO"字符串翻转, “输入hello, world”, 输出"dlrow ,olleh"本质:函数 (Vue3.0 - 过滤器移除了)语法:在项目入口main.js文件中定义全局过滤器:Vue.filter("过滤器名", (值) => {return

2021-11-01 17:33:20 224

原创 Vue - 动态

动态class用v-bind给标签class设置动态的值如何给标签class属性动态:语法::class="{类名: 布尔值}" 布尔值为true表示使用类名,false表示不用正常的class也可以用 ,也可以同时使用:class="[类名, 类名]"<template> <div> <p :class="{redStr: bool}">值为true, key作为类名生效</p> <p class=

2021-11-01 17:07:55 260

原创有key - 值为索引 - 就地更新

口诀: key的值有id用id, 没id用索引<template> <div> <ul id="myUL"> <li v-for="(obj, index) in arr" :key="index">{{ obj.name }} <input type="text"></li> </ul> <button @click="addFn">下标为1的位置新增一个</

2021-10-26 20:57:48 87

原创虚拟dom 和 diff算法

虚拟dom.vue文件中的template里写的标签, 都是模板, 都要被vue处理后成虚拟DOM对象, 才会渲染显示到真实DOM页面上1.内存中生成一样的虚拟DOM结构(本质是个JS对象=)因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了比如template里标签结构<div id="box"> <p class="my_p">123</p></div>对应的虚拟DOM结构const dom = {

2021-10-26 20:49:54 284

原创 v-for更新监测

v-for更新监测当v-for遍历的目标结构改变, Vue触发v-for的更新这些方法会触发数组改变, v-for会监测到并更新页面push()pop()shift()unshift()splice()sort()reverse()这些方法不会触发v-for更新slice()filter()concat()注意: vue不能监测到数组里基础类型值的变化而更新, 如果需要请使用Vue.set(), 或者覆盖整个数组<template> <div&

2021-10-26 20:30:10 157

原创 Vue常用指令

Vue常用指令插值表达式在dom标签中, 直接插入内容又叫:声明式渲染/文本插值语法: {{ 表达式 }}<template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div></templa

2021-10-26 19:28:13 374

原创 Vuex

vuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex解决了什么问题如何确保在不同组件中的数据保持同步如何确保每次对于数据的修改都是可追踪的举个例子一个户外商店有两名员工，张三和李四，在一天的早上，他们分别对帐篷的数量做了一次盘点，发现一共有三个帐篷可供出售，俩个人在商店里度过了一天，张三卖出去俩个，他以为库存里还有一个，李四卖出去一个，他以为库存里还有俩个，而

2021-10-25 17:22:43 99

原创 Vue - MVVM设计模式

MVVM转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。MVVM，一种软件架构模式，决定了写代码的思想和层次M： model数据模型 (data里定义)V： view视图（html页面）VM： ViewModel视图模型 (vue.js源码)MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DO

2021-06-24 16:14:22 518

原创 ESLint

什么是ESLinteslint的目标是提供一个插件化的 JavaScript代码规范检测工具。目标：全部开发人员编写javascript代码的时候保持一种统一风格。好处：提升项目开发速度、增强代码可维护性。见到这样子的错误, 证明你的代码不严谨应用官方文档开启eslint规范检测，具体在vue.config.js中配置lintOnSave: true, // 文件保存时(Ctrl+s)就做eslint规范检测//lintOnSave: false //关闭

2021-06-24 15:42:28 220

原创 Vue-cli脚手架

webpack自己配置环境很麻烦, 下载vue-cli包,用vue命令创建脚手架项目1. 什么是Vue-cli脚手架vue-cli是vue官方提供的一个全局模块包(带命令工具行的), 开箱即用, webpack零配置, 此包用于创建脚手架工程脚手架是为了保证各施工过程顺利进行而搭设的工作平台脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务在开发过程中，脚手架工具是有用的，开发完成（项目上线生产环境），它就没有用了2. vue-cli的好处和能力...

2021-06-24 15:08:21 1579

原创什么是Vue

1. 什么是Vuevue官网 (作者: 尤雨溪)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动自底向上, 增量开发, 组件集合, 便于复用2. 为什么学Vue来一个小例子 - 把一个数组里数据铺设到li标签内原生js做法<ul id="myUl"&gt

2021-06-23 21:07:42 356

原创 webpack

1. 什么是webpackwebpack就是一个打包工具。本身是 node的一个第三方模块包, 是一个用于现代 JavaScript 应用程序的静态模块打包工具webpack官网2. webpack能做什么把很多文件打包整合到一起, 缩小项目体积, 提高加载速度3. webpack的使用步骤默认入口: ./src/index.js默认出口: ./dist/main.js3.1 基础使用初始化包环境yarn init安装依赖包yarn add webpack we

2021-06-23 16:32:46 145

原创父子通信的语法进化

1.最原始的父子通信父传子: prop 1.在子组件身上绑定一个自定义属性 2.在子组件内部的props选项中接收传下来的数据 (类型默认值额外的校验) (书写规范 :get-name="name" getName) <son :name="name"/> name:是一个响应式的属性 <Son :num="1" /> 1: num是一个具备类型的数据 <Son :skills="['react','vu

2021-06-16 16:37:14 110

原创实现数据双向绑定

Vue实现MVVMMVVM，一种软件架构模式，决定了写代码的思想和层次M： model数据模型 (data里定义)V： view视图（html页面）VM： ViewModel视图模型 (vue.js源码)MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DOMV（修改视图） -> M（数据自动同步）M（修改数据） -> V（视图自动同步）在vue中，不推荐直接手动操作DOM！

2021-06-05 20:35:47 496

原创针对于axios做封装处理

// 针对于axios做封装处理// 引入axios// 1. 创建一个基于axios的实例对象 axios.create()// 1.1 baseURL 接口基地址// 1.2 timeout 接口的最大等待时间 5-10s 如果超时直接干掉// 1.3 大数处理 (处理数据超过js能表达的最大范围 + JSON.parse)// 2. 请求拦截器// 全局注入token request headers// 3. 响应拦截器// 1. token

2021-06-05 19:58:44 89

原创 Vue3 -- 组合式API

组合式API组合式api（Composition API）算是vue3对我们开发者来说非常有价值的一个api更新，我们先不关注具体语法，先对它有一个大的感知1. composition vs optionsoptions API开发出来的vue应用如左图所示，它的特点是理解容易，因为各个选项都有固定的书写位置，比如响应式数据就写到data选择中，操作方法就写到methods配置项中等，应用大了之后，相信大家都遇到过来回上下找代码的困境composition API开发的vue应用如右图所示

2021-06-02 21:01:04 5244 2

原创 Vue3

1.目前已支持 vue3 的UI组件库ant-design-vuehttps://antdv.com/docs/vue/introduce-cn/ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步目前支持 Vue 3.0 的 2.0.0 测试版已发布element-plushttps://element-plus.gitee.io/#/zh-CNElement Plus，一套为开发者、设计师和产品经理准

2021-06-02 20:15:44 146

原创前端 - excel导入 / 导出功能

1. 导入功能1.1 前端主导(工作大量在前端)上传excel文件，把excel文件的内容读出来，还原成最基本的行列结构，按后端的接口要求回传过去。前端读excel文件，调接口1.2 后端主导(工作大量在后端)前端上传excel文件1.3 实现1. 安装必要插件这个插件叫做xlsxnpm install xlsx -S//或者yarn add xlsx -S2. 引入UploadExcel组件并注册全局UploadExcel组件UploadE

2021-05-22 20:54:51 7601 4

原创 vue - 修饰符.native 与修饰符.sync

<my-com @click="hClick"></my-com>提问:对于自定义的组件，如果添加@click，在我们点击这个组件，这个回调会执行吗？答：不会！原因：自定义子内部并没有$emit这个click事件。对于内置dom元素（例如div, button,p,…） vue会自动绑定系统事件（click, mouseenter，…），而对于普通的自定义的组件要自己处理。...

2021-05-15 20:47:29 322

原创跨域问题常用的三种解决方式

一、什么是跨域?跨域是如何产生的?同源策略:浏览器内置的规则！是浏览器提供的一种安全机制，限制来自不同源的数据。如果当前页面的URL地址和Ajax的请求地址不同源，浏览器不允许得到服务器的数据；同源:协议 http||https、域名和 port端口都相同则同源，只要有一项不同就是不同源跨域:不同源就跨域文件资源-不受同源限制通过页面内标签、直接在地址栏输入 / 文件资源是通过link script标签访问 url 的二、如何解决跨域?1.JSONP注

2021-05-14 21:30:49 9142

原创 Vs Code 快捷键

常用↓Ctrl+F查找Ctrl+H替换Ctrl+X剪切当前行光标定位到一行某个位置 Ctrl+X删除一行代码Ctrl+D选中多项Ctrl+Shift+P / F1打开命令面板Ctrl+P快速打开文件Ctrl+N打开一个新文件Ctrl+F4, Ctrl+W关闭编辑的文件Ctrl+Shift+N打开新窗口Ctrl+W关闭文件,无打开文件时关闭窗口Ctrl+Shift+W关闭窗口Ctrl+\拆分编...

2021-05-09 21:02:02 57

小海的博客