Vue入门学习(一)

一、简介

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。它专注于MVVM模型的ViewModel层,通过双向数据绑定把View层和Model层链接起来。
这里写图片描述

二、Vue常用的插件

1. vue-cli(vue官方命令行工具)
快速构建vue的脚手架工具,用于快速搭建大型单页应用。
启用项目的命令行: npm run dev

2. vue-router
Vue非常适合单页面(SPA)应用开发,而单页面应用的核心是路由和模板。Vue核心库本身提供模板机制(mushtache),路由支持则由第三方库vue-router提供(Vue-router 2.0- 中文文档)。链接为https://router.vuejs.org/zh-cn/
这充分体现出Vue的“增量式开发设计”:Vue.js只提供核心功能,其他辅助功能由第三方库支持。
3. axios
Vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐axios。axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

由于axios并不是针对vue框架开发的,因此,如果将其使用在vue框架中,建议如下配置:

import Vue from ‘vue’;
import axios from ‘axios’;

Vue.prototype.$http = axios;

使用:
this.$http.post(url, data).then((response) => {…});

4. Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vue父子组件是单向通信的,由父组件向子组件传递数据。如果子组件要改变父组件状态,或者组件间有通信,那么,需要采用事件emit。但是,一旦组件数量庞大起来,通信更加复杂,那么,事件监听模式就显得散乱,无秩序,无法统一管理。这时,需要Vuex集中存储组件状态,并更新组件。

5. UI库
支持Vue2.0的UI库很多,可以去网上搜搜。笔者推荐两个:

element-ui:http://element.eleme.io/#/zh-CN/component/installation
iview:https://www.iviewui.com/

6. 调试工具
Vue有基于chrome插件的调试工具:https://github.com/vuejs/vue-devtools
注意:一定要在vue项目中开启debugger模式,才能激活该调试工具:

Vue.config.devtools = true;

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页