vue常用技术总结
1、vue computed计算属性的应用场景,data,props都属于vue响应式数据,当发生变化时,就会重新渲染<template>,那么计算属性里的方法就会重新调用,因为computed里的方法,必有返回值。特点是对data,props里的数据加工处理,返回值往往也跟着改变,这样UI部分就真的更新了。 计算属性里的方法不能传参数,如果要传参数只能使用methods 里的方法 ...mapState({ disc: state => state.disc }), ...mapGetters([ 'disc' ]) 这两种值(mapState,mapGetters)的映射也要放到computed属性里。 **这两种值(mapActions,mapMutations)的映射也要放到methods方法里。 2、全局自定义组件的方法 先编写一个创建组件实例的方法如下: import Vue from "vue"; // 创建一个新的根组件实例的方法,可以动态编译自身模板并挂载 function create (Component,props){ // 创建一个Vue实例 const instance = new Vue({ render(h) { // 渲染函数:用于渲染指定模板为虚拟dom // <Component foo="bar" :el='el'> return h(Component,{props}); } }).$mount(); // 执行挂载,若不指定选择器,则模板将被渲染为文档之外的元素 // 必须使用原生dom api把它插入文档中 // $el指的是渲染的Component中真实dom元素 document.body.appendChild(instance.$el); // 获取enterComp实例,$children指的是当前Vue实例中包含的所有组件实例 const enterComp = instance.$children[0]; // 销毁实例的方法 enterComp.remove = () => { instance.$destroy(); } return enterComp; }; // 暴露接口 export default create 然后提供一个具体的组件,比如小球运动的组件 BallAnim.vue,这个组件可以通过 props: ['el'],接收参数。 最后在适合的组件里调用create(),如下: onAddCart(el) { // 自定义全局组件-小球动画 const anim = create(BallAnim, {el}); anim.start(); anim.$on('transitionend', () => { anim.remove(); }) } 3、全局自定义组件的方法2 在main.js里引入 import KHeader from './components/Header.vue' // 全局引入Header.vue Vue.component('k-header', KHeader) 使用的时候,比如用在一个组件里,加入<k-header title="开课吧商城"></k-header>就可以了 4、父组件跟子组件的通信方法 父组件:<good-list :goods='goodslist'></good-list> 子组件:props:['goods'] 或者 props:{goods:{type:String,default:[]}}接收这个goodslist 5、子组件跟父组件的通信方法 子组件:this.$emit('event',props) 父组件:<good-list @event='handle'></good-list> 6、自己跟自己通信方法 发出事件订阅 this.$emit('event',props) 接受事件 this.$on('event', props => { }) 7、父组件的created先执行,然后执行子组件的created跟mounted,最后是执行父组件的mounted 8、vue-cli3 脚手架的安装 npm install -g @vue/cli 新建项目: vue create myproject 手动设置配置项,(Babel Router Vuex Linter/Formatter),然后设置falback,eslink width only,然后选择Lint on save.然后配置文件单独(In dedicated)不要写到packpage.json里,最后save this as(No) 启动项目: npm run serve 9、element-ui的安装于配置 vue add element 不要选择full 10、cube-ui的安装配置 vue add cube-ui 不要选择full,不使用rem不使用layout 11、用js写animation/transition(如果是animation还要依赖模块)动画的方法: 先npm install create-keyframe-animation --save <transition name='normal' @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter' @before-leave='beforeLeave' @leave='leave' @after-leave='afterLeave'> <div class='normal-player' v-show='fullScreen'> </div> </transition> 当v-show由隐藏变显示会执行before-enter、enter、after-enter 当v-show由显示变隐藏会执行before-leave、leave、after-leave 具体看播放器项目player.vue 12、VUE项目配置环境 第一:根目录创建三个文件 .env.test .env.prod .env.dev 这三个文件是根据不同的模式自动载入项目中。 第二:package.josn中 添加 "test": "vue-cli-service build --mode test", "dev": "vue-cli-service serve --mode dev", "prod": "vue-cli-service build --mode prod" 当npm run dev时,就会把.env.dev载入项目,在main.js中process.env.VUE_APP_TITLE === 'dev' 13、vue-router的路由信息怎么获取呢? 一个路由条目:/login/:id?redirect=to.path 需要这样的匹配:/login/123?redirect=to.path this.$router.push({ path:'/login', query:{redirect:to.path}, params:{id:123} }) 路由跳转 this.$route.path 获取 /login this.$route.query 获取查询参 {redirect:to.path} this.$route.params 获取占位参{id:123}