1、vue computed计算属性的应⽤场景，data，props都属于vue响应式数据，当发⽣变化时，就会重新渲染，那么计算属性⾥的⽅法就会重新调⽤，因为computed⾥的⽅法，必有返回值。特点是对data，props⾥的数据加⼯处理，返回值往计算属性⾥的⽅法不能传参数，如果要传参数只能使⽤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 // }).$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) 使⽤的时候，⽐如⽤在⼀个组件⾥，加⼊ 4、⽗组件跟⼦组件的通信⽅法 ⽗组件： ⼦组件：props:['goods'] 或者 props:{goods:{type:String,default:[]}}接收这个goodslist5、⼦组件跟⽗组件的通信⽅法⼦组件：this.$emit('event',props) ⽗组件： 发出事件订阅 this.$emit('event',props)接受事件 this.$on('event', props => { }) 7、⽗组件的created先执⾏，然后执⾏⼦组件的created跟mounted，最后是执⾏⽗组件的mounted8、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 @after-leave='afterLeave'> 当v-show由隐藏变显⽰会执⾏before-enter、enter、after-enter当v-show由显⽰变隐藏会执⾏before-leave、leave、after-leave具体看播放器项⽬player.vue12、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.paththis.$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} 因篇幅问题不能全部显示，请点此查看更多更全内容
Copyright © 2019- efsc.cn 版权所有 赣ICP备2024042792号-1
违法及侵权请联系：TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务