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放在3个单身的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’等。那里指出不用当先1个,因为传递的一发多,就不再方便管理了。

组件刷新

小编在拔取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?

Vue.js前后端同构方案之准备篇——代码优化
vue.js 初体验— Chrome
插件开发实录


此文已由作者授权腾讯云技术社区颁发,转发请声明小说出处
原文链接:https://www.qcloud.com/community/article/972073
获取越多腾讯海量技术实施干货,欢迎大家前往腾讯云技术社区

 

 

相关文章