Vue
YUHUI01
总有刁民想害朕
展开
-
vue——插件
vue中的插件其实就是一个 js脚本,只需要在vue项目中的main.js文件中使用Vue.use()调用插件中的 install方法,使该脚本就可以在全局生效1、创建一个js文件,导出一个对象,该对象必须包含 install方法,该方法的第一个参数为Vue对象export default { install(Vue,options){ Vue.c...原创 2019-12-19 22:44:29 · 164 阅读 · 0 评论 -
vue-节流跟防抖函数
1、防抖函数,避免在一定的时间内重复执行在vue中,提供了lodash库中的_.debounce函数,传入的第一个函数为需要防抖的函数,第二个参数为防抖时间,返回一个已经去抖的函数<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>created: f...原创 2019-10-31 15:20:13 · 531 阅读 · 0 评论 -
vue——this.$route 与 this.$router
this.$route 用来获取路由信息,包含的是路由基本信息,如fullPath等,this.$router 用来进行路由操作,在原型链(__proto__)中包含路由的处理方法,如跳转push等。this.$router.push('/') //跳转到根目录,保留历史记录,可以返回this.$router.replace('/') //跳转到根目录,替换掉当前历史记录,无法返...原创 2018-11-04 23:45:03 · 2816 阅读 · 0 评论 -
vue——vuex基本使用
vuex 是用来解决 vue 多个组件之间的数据同步的问题vuex包含 state 、getters 、mutations、actions,一个组件通过 mutations 来修改数据,另一个组件可以通过 getters 来获取数据的副本,组件之间相互订阅了数据import Vue from 'vue'import Vuex from 'vuex'//注册vuex插件Vue.us...原创 2018-11-15 23:23:24 · 221 阅读 · 0 评论 -
vue——vuex模块化操作
当state信息足够庞大时,需要使用模块化把state数据分开管理1、新建js文件,导出一个对象,对象中包含vuex的参数(state、getters、mutations、actions等),在对象中要包含namespaced:true 属性,设置带命名空间以进行数据访问。export default{ namespaced:true,//带命名空间 state:{ ...原创 2018-11-19 00:20:16 · 2013 阅读 · 0 评论 -
vue——前置路由守卫
路由守卫,当目标路由设置了路由守卫,如果没有做相应的验证(如登陆),无法跳转到目标路由在路由配置中添加meta属性,属性为自定义,用于守卫判断,注意:父路由设置了路由守卫,子路由也应该设置路由守卫,不然路由守卫会失败import Vue from 'vue'import Router from 'vue-router'import home from '@/views/home....原创 2018-11-18 15:35:55 · 3651 阅读 · 0 评论 -
vue——vuex中的辅助函数
vuex提供了辅助函数处理庞大的vuex数据,mapState,mapGetters,mapMutations,mapActions,实际就是把state、getters、mutations、actions整合成一个数组,一次性返回注:mapState,mapGetters返回的是属性,所以混入到 computed 中,mapMutations,mapActions返回的是方法,只能混入到me...原创 2018-11-18 16:09:08 · 5101 阅读 · 0 评论 -
Vue——路由传参
1、通过添加查询字符串实现跳转//主页面//设置点击事件跳转到子页面methods: { newSelect(item){ // console.log(item) this.$router.push({ path:'/home/detail', query:item }) }},//子页面created() { /...原创 2019-01-05 22:42:25 · 264 阅读 · 0 评论 -
vuex——vuex中的小坑
1、dispatch:含有异步操作,例如向后台提交数dispatch据(可以在beforeCreate钩子中做异步请求),写法: this.$store.dispatch('action方法名',值),dispatch函数返回的是一个promise,需要用异步的方式来完成后续的逻辑的时候,可以使用dispatch方法commit:同步操作,写法:this.$store.commit('muta...原创 2019-03-04 21:21:18 · 481 阅读 · 0 评论 -
vue——cli 2.0 配置后台模拟
在build文件夹中找到 webpack-dev-conf.js配置文件,在const portfinder = require("portfinder");之后插入代码,导入express模块以及superagent(客户端请求代理)模块const express = require("express");const superagent = require("superage...原创 2019-03-18 20:44:02 · 224 阅读 · 0 评论 -
vue——项目上线操作
1、过滤掉console调试打印在build文件夹中的 webpack.prod.conf.js 文件中把 UglifyJsPlugin 类修改为new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_debugger: true,...原创 2019-07-25 10:37:44 · 973 阅读 · 0 评论 -
vue——修饰符
1、input便签中 v-model 的修饰符 .lazy修饰符可以使v-model在输入完成之后再触发数据更新 .number修饰符可以确保 v-model绑定的数据是数字2、.sync修饰符其实是添加了update事件,如:prop.sync="value"其实就是,当子组件中提交了$emit("update:prop",v)后,父组件就可以直接刷新prop绑定的值v...原创 2019-08-07 22:29:30 · 309 阅读 · 0 评论 -
vue——自定义事件
vue中自定义的事件,不同于组件和props属性,事件名没有任何的大小写转换,触发的事件必须完全匹配这个事件所用的名称,所以在使用this.$emit('clickA',data)时,clickA必须与定义的事件名一致当参数为对象时,父组件接收时以及子组件传参时,最好使用JSON.parse(JSON.stringtify(data))转换成字符串,与子组件中的data对象撇清关系,同时,如果...原创 2019-08-28 23:28:12 · 340 阅读 · 0 评论 -
Vue——虚拟DOM(vnode),优化数组
Vnode 是vue里的虚拟dom,真实的html标签dom对象是会被浏览器渲染出来的,每次渲染必定会消耗很多的图形运算功能,虚拟dom 是一个对象,不会直接渲染到浏览器中, 如果我有1000条数据,我修改了其中两条,真实的DOM会重新渲染1000条数据,只要发生了变化,就会重新渲染全部数据,虚拟dom 会生成1000个对象 (它是不会被浏览器图形化渲染的),虚拟dom 里的东西...原创 2018-10-25 00:42:11 · 793 阅读 · 0 评论 -
Vue——路由vueRouter
一、不在初始化vue的时候安装router的情况下 1、手动安装vue-routernpm i vue-router或者yarn add vue-router 2、在src文件夹中创建router文件夹 3、在router文件夹中创建index.js文件 4、在index.js文件中导入vue以及vue-router模块import vue from ...原创 2018-10-27 02:08:03 · 244 阅读 · 0 评论 -
Vue——注意项
1、Vue中动态直接把数据插入到data对象中,添加的数据是不会被处理成响应式数据的,必须使用Vue.set 或者是 this.$setthis.$set(this.user,'sex','女') //this.user为data中的对象,'sex'为键,'女'为值2、Vue中的数组操作,只有对原数组有影响的方法才会生效,slice等生成副本的方法不会生效3、在computed中的属...原创 2018-09-01 01:23:43 · 694 阅读 · 0 评论 -
Vue——component组件
使用组件,必须要有Vue实例,并且要把实例挂载在标签上,在vue实例中使用组件模板,会替换掉Vue绑定的元素<script> new Vue({ el:'#app' })</script>基础属性1、props属性是用来存放参数,把Vue实例与模板的参数相关联起来,相当于Vue实例与template之间的桥梁,可以写成数组的方...原创 2018-09-04 23:57:50 · 761 阅读 · 0 评论 -
Vue——生命周期
生命周期图例 beforeCreate() { // 实例或组件 要开始被创建了 // 还没创建好之前 是不能使用实例中的任何成员的 // 针对要去做ajax 请求的组件可以预先在beforeCreate 提前ajax请求},created() { // 实例或组件 已经被创建好了 // created 里面是可以访问到当前实例的任何成员的...原创 2018-09-09 01:00:49 · 172 阅读 · 0 评论 -
Vue——实例中的钩子函数
<script> new Vue({ el:'#app', data:{ value:true }, template:` <div class='app'> <Switcher v-model="value" /&...原创 2018-09-09 15:28:59 · 1171 阅读 · 0 评论 -
Vue——动画
<style> .box{ width: 100px; height: 100px; background-color: yellow; } /* v-if="true" 进入动画之前 入场的一个初始化 */ .slide-enter{ ...原创 2018-09-09 16:04:30 · 402 阅读 · 0 评论 -
Vue——混入
混入的变量或方法会先加载,如果在实例或者模板中重新定义了该变量,会覆盖该变量1、局部混入,只能在进入定义该变量的文件才具有该变量或方法新建test.js文件,用来存放需要混入的变量export default { data() { return { title: '哈哈' } }}在vue文件中的JavaS...原创 2018-09-16 22:54:32 · 1052 阅读 · 0 评论 -
Vue——自定义指令
全局/** * 全局指令 v-ff * Vue.directive('ff',{}) * 指令使用比较频繁的情况下使用全局 * * 局部指令 * 只使用一次 或少量次数的指令 使用局部 */ Vue.directive('ff', { // 当把指令与el绑定在一起的时候触发 bind(el, binding, vnode) { // 当指令绑定到元素...原创 2018-09-19 00:07:01 · 507 阅读 · 0 评论 -
Vue——webpack打包
首先创建Vue项目vue init webpack <项目名称>进入交互1. 输入项目名称2. 项目描述3. 作者名称4. 选择vue的编译模式 默认选择第一种模式5. 选择是否安装vue的路由 6. 是否启用eslint 检测你的代码 7. 启用tests (用来做单元测试的)8. 启用e2e (用来做单元测试的)9. 选择用yarn 还是np...原创 2018-09-14 22:02:06 · 797 阅读 · 0 评论 -
vue——踩坑
1、vue文件一般放在html标签之后,因为vue实例需要绑定在html标签上,所以需要先加载html元素2、如果需要在vue文件中的style标签中使用less来书写css样式,需要在style标签中添加lang='less'属性,但是需要安装less模块<template> <div class="app"> </div...原创 2018-09-14 23:59:13 · 439 阅读 · 0 评论 -
Vue——过滤器 filter
局部过滤器,定义一个filters属性,为其添加过滤规则(function形式),第一个参数为过滤之前的值,通过return返回所需的值,可以通过第二个参数或者两个以上参数进行更精确的过滤,使用过滤器只需在模板标签中添加 | 以及过滤器名称即可,如果需要多个传参,可以像使用方法一样传参即可<template> <div id="app"> {{name...原创 2018-09-20 01:05:36 · 196 阅读 · 0 评论 -
Vue——初始化Vue
1、使用Vue-cli初始化Vue 使用 Vue-cli 最新版(3.0),集成了可视化界面创建项目, typescript版本的vuenpm i -g @vue/cli 使用 Vue-cli 旧版本npm i -g vue-cli在命令行中输入vue - V 查询到版本信息,初始化安装成功2、创建项目vue init <模板名称> &l...原创 2018-10-21 10:22:13 · 1693 阅读 · 0 评论 -
Vue—— JSX渲染函数rander
1、直接在vue实例中使用 rander 函数进行渲染,使用 rander 函数之后,不需要使用 template 以及 components rander 函数的 createElement 方法的第一个参数为组件或者html标签,第二个参数为 option ,第三个参数为插槽的内容new Vue({ el: '#app', render(createElement) ...原创 2018-10-24 00:57:42 · 3128 阅读 · 0 评论 -
Vue——html中的基本语法
引入Vue JS文件,创建Vue实例new Vue({ el: '.container',//挂载实例 data: { first: '初次使用Vue', arr: ['第一个', '第二个', '第三个'], show: true, text: '<h1&g...原创 2018-08-30 22:58:30 · 1403 阅读 · 0 评论