简介
Vue是一个构建用户界面的UI框架。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。通过简单的api实现响应式的数据绑定和组合视图组件,Vue的核心是一个数据绑定系统。Vue的特性如下:
- 轻量级的框架(压缩后只有几十kb)
- 指令
- 双向数据绑定
- 可复用性(组件)
- 解耦数据与视图(数据驱动视图)
- 虚拟Dom(通过Dom Diff算法提升性能)
- 前端路由
- 状态管理
Vue基础语法
指令
v-text 等同于双大括号,用于文本插值。
v-html 输出真正的html,更新元素的innerHTML。
v-show/if 显示或隐藏元素,v-show 是通过display属性实现,v-if则是每次都新建或删除。
v-for 对数组或对象进行循环操作,可用template进行分组。
v-bind 用于属性动态绑定到表达式。
v-on 用于绑定事件监听器,支持事件修饰符 。
v-model 用于input、select、text、checkbox等表单控件元素上实现双向数据绑定。
v-once 使用了此指令的元素或组件及其所有的子节点,都只会渲染一次。
v-slot 具名插槽和作用域插槽。
自定义指令: 通过Vue.directive可以自定义指令。
计算属性、侦听器与过滤器
-
计算属性computed
vue模板内的表达式支持简单的运算,但表达式复杂时,会难以维护。计算属性可以解决这个问题,在一个计算属性里可以进行复杂的逻辑运算,函数调用等,最终只需返回一个结果。
每个计算属性都包含一个getter和setter。在需要时,可以设置setter函数,当手动修改计算属性时,会触发setter函数。 -
侦听器watch
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性watch ,在watch对象中,键是侦听的变量,值是变量变化时调用的函数,函数接收两个参数,第一个是变化前的值,第二个是变化后的值。 -
过滤器filter
Vue提供过滤器用于一些常见的文本格式化,过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示,在组件中通过filter选项可以创建自定义的过滤器。
组件
- Vue的可复用性体现在组件上,组件可以扩展 HTML 元素,封装可重用的代码。
- 组件注册后才可以使用。
- 注册全局组件 Vue.component(tagName, options)。
- 注册局部组件 在Vue实例通过components选项注册局部组件。
- 组件中data必须是一个函数。
- 组件的模板只能有一个根元素。
- 一个组件可以分为数据和视图,数据更新时,视图也会自动更新。在视图中可以绑定事件,根据用户的操作触发methods中定义的方法,从而改变数据、更新视图。
组件通信
Vue支持多种方式进行组件通信,父子组件的通信,兄弟组件的通信,跨级组件的通信等。
- props:父组件向子组件传递数据,子组件在父组件作为标签引入,通过设置标签的属性传递数据,在子组件用props接受。
- 发布订阅模式:子组件向父组件传递数据,父组件on绑定一个事件,子组件emit触发这个事件。
- 时间总线bus:使用一个空Vue实例作为中央事件总线(bus),通过bus.$on监听和bus.$emit触发来进行数据传递,这种通信方式可以进行任何组件间的通信,包括父子组件,兄弟组件,跨级组件。
- 依赖注入:Vue提供了依赖注入的方式允许跨级向后代组件传递数据 。provide选项指定需要传递的数据 ,在后代组件中通过inject选项接受。
生命周期
Vue实例从创建到销毁有一个完整的生命周期。每一个组件都会有开始创建、模板编译、挂载Dom、渲染前→更新→渲染后、销毁等一系列过程。Vue共提供8个响应的钩子函数,便于我们在相应时期进行操作。
- beforeCreate函数 dom还没有挂载,无法访问到数据和真实的dom。
- created函数 dom还没有挂载,数据已经初始化。
- beforeMount函数 虚拟dom已经创建完成,马上就要渲染。
- mounted函数 dom已经挂载,组件出现在页面中。
- beforeUpdate函数 数据更改之后,diff算法尚未进行。
- updated函数 数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom。
- beforeDestroy函数 调用$destroy方法后。
- destroyed函数 组件的数据绑定、监听等已经被销毁。
vue-router
vue-router 是官方维护的路由管理器,与Vue高度集成,使构建单页应用变得更简单。
vue-router的原理是不同的页面加载不同的组件,程序运行时会根据当前路由动态渲染不同的组件,路由切换时,切换的是挂载的组件,其他的内容不会变化。
基本用法
npm install vue-router --save
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
//路由配置
})
new Vue({
el:'#app',
router:router,
render:h=>{return h(app)}
})
动态路由:某种模式匹配的所有路由,映射到同一个组件。
嵌套路由:对应多层嵌套的。
命令路由:给路由命名,用来链接路由或执行跳转。
编程式导航:除了使用进行导航,还可以使用router的实例方法进行跳转。
重定向和别名:在路由中配置redirect和alias实现重定向和别名的效果。
命名视图:用于同级展示多个视图。
History模式:美化页面中的url,需后台配置支持。
vuex
在组件通信时,有bus、prop和依赖注入等方式,也可以使用vue的状态管理插件vuex。
基本用法
npm install vuex --save 安装
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new store({
//vuex配置
})
new Vue({
el:'#app',
store:store,
render:h=>{return h(app)}
})
store保存了应用的数据状态和操作过程,只要组件使用store的数据,store数据变化时,对应的组件也会立即更新。store提供了state,mutations等选项用来配置我们需要的操作。
store的state选项保存数据,通过$store.state获取数据。
store的mutations选项用来直接修改state里的数据,通过$store.commit方法执行mutations。
store的getters选项用来封装数据提取后的复杂操作,通过$store.store.getters获取数据。
store的actions选项用来异步修改state的数据,通过$store.dispatch触发。
store的modules选项用来将store分割成不同的模块。当项目非常复杂时,store里的选项中数据会非常多,难以维护,使用modules可以分成不同的文件,每个modules都有自己的state、mutations、actions、getters。
构建应用
基于vue-cli快速构建vue应用
-
安装
npm install -g vue-cli -
初始化项目
vue init webpack project 进行选项配置
cd project 打开工程
npm install 安装npm包
npm run dev 启动项目
即可快速构建一个Vue项目 -
vue引入element组件库
npm install element-ui 安装element
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI) -
vue引入iview组件库
npm install iview --save 安装iview
import iView from ‘iview’;
import ‘iview/dist/styles/iview.css’;
Vue.use(iView); -
vue-cli3 可以使用 TypeScript 生成新工程
安装vue-cli3
npm install --global @vue/cli
创建一个新工程
vue create my-project-name
选择 Manually select features选项配置