zem

最近闲下来后开始整理之前的知识了，早在vue3.0正式出来之前，尤大就已经提到了做了一个新的web应用开发工具vite解下来的几篇文章我会对vite的使用，到与webpack（其实应该是webpack-dev-server，后面会解释为什么）的比较，以及源码解析，简单地实现vite部分功能来写，欢迎大家在评论区提出各种建议问题那么话不多说，开始vite学习之路vite是什么首先，vite为什么叫做vite，vite实际上是法语中快的意思，所以顾名思义，这个工具给我们带来的就是更快的开发体验，它实际上

改变数组长度无法触发视图更新在vue中，我们可能会有这种情况，修改了数组的长度，但是视图没有发生更新<template> <div id="app"> <div v-for="(item,index) in arr" :key="index"> {{index}}:{{item}} </div> <button @click="click">btn</button> &lt

现在常用的三大框架中，常常会拿Vue和React来做比较，上周尤大又开了个Vue3.0beta的直播，所以就想着写篇两者比较的博客，拖着拖着拖到五一，总算整出来了。实际上之所以会想去写这篇文章，也是尤大在直播里提到了好几次React的内容，在更新Vue3.0上参考了很多React的功能，而之前虽然学过React，但也就只是做个todo-list玩玩而已，没做过实际的项目，所以也借此来熟悉一下Re...

在vue3.0 beta直播过后一天，掘金就有了别人家的笔记，确实笔记做的很好，但是我想在这份笔记上，加上我看直播时的一些感受，去做自己的笔记（我还是推崇多做自己的笔记，而不是单单只看别人的笔记，写笔记会让自己对知识点更加深刻，即使会花比较多的时间，但一些知识做笔记是很有必要的）因为直播过后那两天有事，所以今天才把这份笔记整理出来事实上一个月前我才重新看了去年和前年的vue conf并整理了...

从去年就一直说的沸沸扬扬的vue3.0发布，虽然到现在还没有正式发布的事件，但做为前端开发，我们还是要去了解的，那么vue3.0会更新什么内容呢，早在2018年11月尤大就在远程演讲中说到了，vue3.0会带来更快更小更易于维护更好的多端渲染支持新功能（新的API）下面就这些内容来说一下vue3.0的更新，这些内容基本上都是我在看了2018年和2019年的中国Vue conf视频后...

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model在vue中，MVVM的体现就是双向数据绑定，而双向的数据绑定又是我们面试中...

在网上查找资料的时候，看到很多关于Vue双向绑定的文章都直接说是通过Object.defineProperty实现的，但我隐约记得去年看过尤大的视频，记得好像是用proxy实现的，所以又好好找了一下，果然，在vue3.0中，已经改用proxy实现了双向绑定的简单思路在谈论vue2和vue3中各自的双向绑定形式前，我们先了解一下基本的思路要做到双向绑定，即是在我们修改数据时，视图发生变化，而...

通常情况下，我们会使用vue cli直接创建一个项目的脚手架，如果我们要自己用webpack来配置vue项目的话，就要用到vue loadervue loader的配置处理资源路径使用预处理器...

.vue文件用于表示一个单一组件，其内使用类html语法，顶级标签有template,script,style和自定义的标签，一个完整简单的vue单文件如下<template> <div class="example">{{msg}}</div></template><script>export default { ...

Scoped CSS和CSS Modules都是对vue单文件组件中的style标签的一种修饰，使我们能更好地处理不同情况下的样式使用Scoped CSS使用Scoped CSS的使用只需要在style标签上添加scoped即可<template> <div class="example">hello world</div></templat...

文件目录主要文件配置文件代码package.json{ "name": "webpack_vue", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exi...

axios跨域在自己写的一个项目中，想要直接将学号和密码发到学校的教务系统，结果跨域了。。。。。。原代码// url为要访问的域名axios.get(`${url}?method=authUser&xh=${this.sNo}&pwd=${this.password}`).then((res) => { // ...}).catch((err) =&gt...

在vue中，DOM被抽象为一个以JavaScript对象为节点的virtual DOM(虚拟DOM)树，当数据发生改变时，会通过修改virtual DOM，使用diff算法，修改局部的内容，然后将这部分内容以打补丁的方式来修改真实的DOM，来达到视图修改的作用。因为通过diff算法，能得出需要修改的最小单位，所以我们在更新视图的时候，只需要修改这些最小单位，这么做减小了更新的消耗。diff算法...

在使用vue的时候，在对整个页面的数据进行修改的时候，往往要从触发事件的子组件，用emit向上传递到值所在的父组件，如果组件繁多的话，中间的组件只是起到传递方法的作用，代码会显得很琐碎，所以对于这种情况，我们可以考虑将需要进行更新的数据放在一个全局的地方，将对数据的更新操作也放在全局，在组件中只要去调用这个全局的内容就可以了，Vuex实现了这一功能。根据官方文档说的：Vuex 是一个专为 Vu...

vue-cli构建项目初步目录在test项目根目录下创建vue.config.js来修改配置vue.config.js内容module.exports = { pages: { index: { // page 的入口 entry: 'src/page/index/main.js', ...

计算属性计算属性是通过逻辑业务的处理，返回一个逻辑处理后的属性。计算属性通过computed来使用computed在处理上和methods相似，但不同的是，methods在使用时要执行里面的操作再返回值，而computed在执行前会检查用于计算的属性是否发生改变，如果没有改变，则使用上次缓存下来的值，而一旦里面的属性发生改变，computed会自动重新计算当前值<div id=...

Vue实例构造器Vue实例通过构造函数Vue来构建，传入一个对象作为参数let vm=new Vue({ //...})Vue实例的属性和方法在Vue中不提倡使用DOM来操作元素，更多的是通过Vue实例来进行各种操作，每个Vue实例都会代理data对象中的属性，在实例创建时其上的属性是响应的，其后添加的属性不是响应的，我们可以通过Vue实例中的data对象中的属性值来设...

对于大多数单页面应用，都推荐使用官方支持的vue-router 库。下面的代码默认导入了vue-router 库路由的基本使用在Vue中，使用new VueRouter来创建一个路由，在Vue实例中将该路由放入Vue实例中的myRouter，即在某个实例上创建了一个路由。let login = { template: '<h1>this is login<...

纯文本通过使用{{}}可以绑定Vue实例中的data对象中的属性，这种绑定得到的是纯文本<div id="app"> <p>{{msg}}</p></div><script> let vm = new Vue({ el: '#app', data: { ...

Vue中的指令是指带有v-前缀的特殊属性，Vue中通过指令实现一系列功能条件渲染通过使用和条件渲染相关的指令，可以控制元素是否渲染到页面上v-ifv-if指令后值为true时显示（会隐式转为true的值也一样），为false时不显示，下面这段代码中，最后页面只有span1<div id="app"> <span v-if="flag">span...

Vue中使用v-on来监听DOM事件执行JavaScript代码直接监听事件使用Vue时在v-on后写上监听的事件，其后可以跟着JavaScript代码，当监听的事件被触发时，就会执行其后的JavaScript代码<div id="app"> <button v-on:click="count++">增加</button> <...

在使用组件时，组件开始标签和结束标签的内容会被忽视，如下代码<div id="app"> <my-com>I want to be shown</my-com></div><script> Vue.component("myCom", { template: "<h1>this is...

在搭建项目时，需要编译babel，ts，less/sass，es6，使用webpack来配置项目虽然可以达到想要的效果，但是每次搭建项目时重复地搭建会浪费很多时间，在搭建vue项目时，使用vue-cli脚手架可以快速搭建响应式开发的demo。使用vue-ui创建输入vue ui自动跳出一个图形化界面，点击左上角下箭头，然后点击项目管理器会出现已经创建过的项目，点击创建创建新...

在使用vue-cli命令行创建后使用npm run serve时出现下面的错误在网上找的时候大部分都是说把build文件夹下的一部分内容注释掉，但我这里并没有build文件夹最后在下面这个文件将部分内容注释掉就可以了然后就可以使用npm run serve了...

在vue中不建议操作DOM，但是如果我们在没办法的情况下，可以通过ref来进行DOM操作，而在使用DOM时，可能会有获取不到ref对应DOM节点的问题像下面这种情况，这是执行了console.log(this.$refs)的情况在用console打印出来的时候明明看到可以按下箭头显示我们要的组件内容，但是在花括号里面却写的是undefined，此时如果要获取这个节点的属性值，会报无法从...

在使用vue-router时，我们可以很方便地实现单页面应用，当我们想要跳转到“另一个页面”的时候，只要调用vue-routerAPI中的方法，传入相应的路由作为参数即可。单页面应用的一个特点是，如果某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。简单来说，有两个页面A和B，我们使用单页面的...

要熟悉一个框架，需要弄清楚怎么做到组件间的相互通信，而todolist是一个用来练习组件间相互通信的很好的小demo首先使用vue-cli搭建一个项目，具体参考我的另一篇博客vue-cli搭建vue项目文件结构todolist功能记录todo内容，可增加和删除todo内容，并标记是否已完成todolist小tip在搭建todolist时，使用了下面的一些内容1.$e...

组件是Vue实例的重复使用，可以通过使用自定义标签在html中使用Vue实例组件的创建全局组件的创建在全局中通过使用Vue.component()来创建组件，第一个参数传入一个字符串，表示该组件的名称，在html使用该名称作为自定义标签的标签名，第二个参数为一个对象，包括了组件的信息，模板，数据，方法等。Vue.component("myCom", { template:...