摘要：1、setup函数 vue3为了方便开发，实现数据，函数的统一管理，开放setup函数，setup函数的运行介于beforeCreated与created函数之间运行， 接收两个函数 props， context， 并且该方法返回一个object对象，导出的变量和函数就可以在template中进行使
阅读全文
随笔分类 - vue
摘要：在vue2的环境下封装自己的组件库 a、初始化项目 vue环境的安装 npm i @vue/cli -g vue create yutest-ui --也可以通过vue ui创建，创建一个默认的vue2库即可 因为需要开发组件库，那么就需要对原有的目录结构作些调整 将src目录变更为examples
阅读全文
摘要：1、异步组件 在vue3.0除了同步组件，还添加了异步组件的定义与使用， 使用关键字defineAsyncComponent进行定义异步组件， defineAsyncComponent可以接受一个返回 Promise 的工厂函数。Promise 的 resolve 回调应该在服务端返回组件定义后被调
阅读全文
摘要：1、vue3与vue2的区别 源码采用monorepo方式进行管理，将模块拆分到package目录中(是管理项目代码的一个方式，指在一个项目仓库（repo）中管理多个模块/包package，调用方便，但是体积大) vue3采用了ts开发，增强类型检测，vue2则采用了flow vue3的性能优化，支
阅读全文
摘要：1、vue的函数式组件编程以及jsx语法 为写项目的过程中，如果遇到比较动态的template的时候，可以使用函数式组件，具体如下 新建jsx文件 export default { name: 'homeTest', functional: true, //是否开启函数式编程，开启后不能定义data
阅读全文
摘要：1、vue数据响应式原理实现 vue2的数据响应是通过函数Object.defineProperty原理来实现的，但是这个函数是不支持数组的 错误案例 let data = { name: 'aaa' } let watchObject = (obj) => { Object.keys(obj).f
阅读全文
摘要：1、vue中的环境变量调整 假如需要添加第三种模式的时候，或者在开发过程中需要添加环境变量的时候，那么就需要做如下配置 先在根目录下添加.env.自定义名字，并且里面的内容模式可以如上图进行配置 "scripts": { "dev": "vue-cli-service serve --mode un
阅读全文
摘要：src ├── api //放置请求的文件夹 ├── App.vue //vue里的app.vue文件 ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue ├── config │ └── index.js ├── direct
阅读全文
摘要：1、vuex的入门案例 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="container"> <h1>{{$store.st
阅读全文
摘要：1、mixin 混入的使用 <body> <div id="container"> <div>{{count}}</div> <input type="button" value="btn" @click="change"> </div> <script src="./vue.js"></scrip
阅读全文
摘要：1、全局自定义指令 <body> <div id="container"> <div v-bill="prop">{{msg}}</div> </div> <script src="./vue.js"></script> <script> //每个钩子的参数都是 ( el、binding、vnode
阅读全文
摘要：1、axios的安装 npm安装：npm i axios --save； 使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 2、axios的API的使用 a、get请求 axios.get('/get.ph
阅读全文
摘要：1、在vue的实例化对象中对vue的data进行操作，建议用vm.$data进行操作， vm.$watch('字段', function(newValue, oldValue){})可以对字段进行监听，但是注意，该方法对路径引用的数组或对象来说，newValue与oldValue两个值是一样的，注意
阅读全文
摘要：1、动画流程 注意：到动画结束后这几个类的类名都会被移除，同时v-enter-to的状态与默认的状态一样但是v-leave-to的最后状态是display: none所以常常需要指定 <!doctype html><html lang="en"><head> <meta charset="UTF-8
阅读全文
摘要：1、class的对象绑定 2、class的数组绑定 3、style的对象绑定 4、style的数组绑定 5、通过委托事件绑定实现 通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jque
阅读全文
摘要：1、vue router 的入门案例 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no,
阅读全文
浙公网安备 33010602011771号