Vue.js 实战总结

迎接大家关心腾讯云技术社区-博客园官方主页,我们拿不断以博客园啊大家推荐技术精品文章哦~

作者:徐江伟

不久前在某个项目中因故到了Vue.js,从左边做开发及路揭示,一步步踹了无数坑。本文拟总结过去一个多月使用Vue.js中的一些更,也终于一点心得体会吧,拿出去跟大家分享,欢迎多多交流。

Vue.js简介

Vue.js is a JavaScript framework for building astonishing web
applications. Vue.js is a JavaScript library for creating web
interfaces. Vue.js is a tool that leverages the use of MVVM
architecture.

马上是缘于Vue.js官网的诠释,这里我们不打算再照本宣科的拿概念翻译一边了,仅就作者用Vue.js的心得体会来做出解释。熟悉ReactJS或者Angular的读者或许针对这个并无生。

Vue.js与ReactJS、AngularJS这些框架一样都抱有相同的开发理念,通过扩张原生的HTML等结构化标签来当其模版语言,此外进一步通过语法上之扩展提供了例如双向数据绑定、交互数据模型等概念,从而使开发者从混乱的DOM操作着抽身出来,将更多之生气用于关注工作自的情。

另外,与React类似的凡,均提出了连虚拟DOM和组件化开发之眼光,从而提高了代码的可维护性和特性。Vue.js试图用同样种极简的法来落实上述这些框架带来的优势,因此,相比于React同Angular来说,Vue.js更加轻量、简介和美丽。

下面,在越探讨Vue.js之前,我们先押一下Vue.js的几乎单着力概念。

组件化

组件化开发是近日两三年较火之概念。通过使用Vue.js来创造的零件,就像构建万丈高楼的砖块一样,拥有漂亮的封装性和复用性。每一个组件都持有该单独的体和数据域,并且完全同其它组件完全割裂。简单的语,任何前端的界面都好由此成立之宏图,划分成拥有不同职责的零件。 关于组件化开发的定义我们无再进一步展开,感兴趣的校友可以更加看这篇稿子前端工程-基础篇。

Vue.js的插件化

刚巧使您所知道,Vue.js的主干组成部分才保留了概括数据绑定及组件化开发有关的情节。因此才保证了该极简的机制。此外,对于附加的功用吗供了飞灵活的插件化机制。对于豪门耳熟能详的插件包括vue-router、vee-validator、vue-touch等。此外,也供了同意开发者自己包装组件的机制。从而使您能够重复有效地泛某些意义,为团体开发所用。例如,你得将关于数据计算的逻辑抽象为单独的插件,提供于集体的总人口采取等。

state和vuex

假定您的类型大简介,没有复杂的逻辑,那么您完全没必要引入vuex。vuex是为此来当采取各个组建中管理与共享利用state的模块,如果你下过React那么您当本着Flux不陌生,vuex起及之图与这个类似。

vue-cli

Vue.js也供了大便捷的命令行工具,通过应用几个大概的授命就能够便捷构建基于Vue.js的组件和使用,极大的回落了开发者的工作量,将开发者从繁杂的重复性的麻烦中解放出来。关于vue-cli,我们不再进行,读者可以看vue-cli更为了解vue-cli的效应。

常用命令

Vue.js提供了连v-for、v-if、v-show、v-bind、v-model、v-on、v-html等内部指令,这里不再细说各级一个命令的用法,读者可活动参考文档。

欲说明的是v-if和v-show的不同,v-show是通过变更DOM元素的display属性来兑现藏与否的,而同v-show不同的凡,v-if是透过一点一滴移除DOM元素来促成藏与否的。因此,如果您的隐身内容实在需要数,那么用v-show,这样性能再好。

v-bind与v-model不同的凡,v-model是双向数据绑定,而v-bind是就为绑定的。

v-for使用的时候,最好提供一个key给vue.js。

数传递

爸爸组件通过props传递数据到子组件
,子组件通过events来传递数据改变到爸爸组件。对于简易的数目修改,可以由此这种方式贯彻。但是于复杂的数额逻辑,建议经vuex来管理。例如:父组桩传递title到子组件:

// 父组件中
<...>
    <child :title="title"></child>
</...>

// 子组件
export default {
    <...>
        props: ['title'], // 然后就可以通过this.title来使用了
    <...>
}

子组件传递修改至大组件,通过波

// 父组件中
<...>
    <child @changeTitle="changeTitle"></child>
</...>
<...>
export default {
    methods: {
        changeTitle(text) {
            this.title = text;
        }
    }
}
</...>

// 子组件
<template>
    <... :click="onChangeTitle"></...>
</template>
export default {
    methods: {
        onChangeTitle (text) {
            this.$emit('changeTitle', this.id, text)
        }
    }
}

对此全局性的state,可以透过vuex来封装。例如用户登录信息,全局都用到之常量信息相当。对于vuex的情节比较多,大家好关押这里。vuex
api。

生命周期方法

Vue.js提供了同套完整的组件的生命周期钩子方法,你得在组件的生命周期的次第阶段做该做的政工。其总体的生命周期的方式图示如下:

图片 1

vue-resource

前端开发不可避免的就是内外端交互,这里很推荐vue-resource。建议用关系到前后端交互的拥有API放在一个单身的api.js文件中,方便管理。然后以待接口的地方导入对应之计即可。下面是一个示范:

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
const API = {
    "getYAndMGrade": "//localhost:3000/demo/getYAndMGrade", 
    "createMonthPlan": "//localhost:3000/demo/createMonthPlan"
};
const post = (url,params)=>{
    return Vue.http.post(url,{
        params: params
    }).then(function (res) {
        return res.data;
    });
};
// 接口1
export const getYAndMGrade = (user) => {
    return post(API.getYAndMGrade, {user:user});
};
// 接口2
export const createMonthPlan = (user, month)=> {
    return post(API.createMonthPlan, {user: user, month: month});
};

vue-router

vue-router是因vue.js用来缓解前端路由的方案。vue-router提供了包括动态路由等功效。这里吧深受有一个示范:

export default [
  {
      name: 'about',
      path: '/about/',
      component: require('./pages/about.vue')
  },
  {
      name: 'blog',
      path: '/blog/:blogId',
      component: require('./pages/blog.vue')
  }
]

以身作则中的blog可以理解,我们可以传递id参数并且于组件中过去id。此外,我们好传递多只参数,如’/blog/:blogID/:postId’相当于。这里建议不要过2单,因为传递的愈发多,就不再方便管理了。

零件刷新

作者在使用vue.js的长河中数撞过一个问题,就是组件刷新的题目。例如,作者的项目当中来因此到菜单,打开不同之菜谱对诺不同的路由和组件。而使在此时此刻组件中,再次点击打开时组件的菜谱,则组件并无见面刷新。

当下便招一个头疼的问题,因为用户点击菜单本身即想刷新时页面,而组件的数目并从未刷新,因此即使看不到最新的多少。解决思路就是,在组件路由于里添了一个岁月参数,然后以组件当中加了针对这时刻参数的watch。具体是贯彻如下:

<...>
    <router-link :paht="'/list' + '?_=' + new Date().valueOf()"></router-link>  // 增加当前时间戳_参数
</...>
然后在组件当中watch这个时间参数就可以了:
<...>
    export default {
        ...
        watch: {
            "this.$router._": function() {
                // refresh data here
            }
        }
        ...
    }
</...>

总结

胡七八糟的写照了成百上千,也好不容易对就段时光之所以vue.js的一个回顾。不得不承认,在采取vue.js的进程中开渐渐喜欢上了是漂亮而简单之框架。因此也愿意和更多的人头大饱眼福下她的阅历。也欢迎大家一块交流。

参考

  • Vue.js官网

  • 《Learning Vue.js》

  • 每当组件不转移的情事下和url不变的状下刷新视图

  • 其它参考资料

 

连锁阅读

腾讯工程师等怎么玩
Vue.js?
Vue.js前后端同构方案的备篇——代码优化
vue.js 初体验— Chrome
插件开发实录


此文已由作者授权腾讯云技术社区发布,转载请注明章出处
原文链接:https://www.qcloud.com/community/article/972073
得更多腾讯海量技术实施干货,欢迎大家去腾讯云技术社区

 

 

相关文章