什么是Vue?
Vue的简单介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。(以上是Vue官方文档介绍,如果看着懵逼,可以看下方我自己整理的介绍)
Vue,是现在主流的三大框架之一(Vue/React/Angular),Vue是基于MVVM模式的一种相对轻量级的框架,其核心是通过view-model来实现双向数据绑定来达到驱动页面的效果,大部分程序员在学习框架时都会从vue开始。
Vue需要掌握的几个重要的知识点
VUE安装
VUE有三种安装方法
-
直接在官网下载vue.js引入使用
需要注意开发环境不要使用最小压缩的版本,不然会没有错误提示和警告<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="./vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> //打印 Hello Vue.js! </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script>
-
使用CDN引入
BootCDN(国内) : https://cdn.bootcss.com/vue/2.2.2/vue.min.js , (国内不稳定)unpkg:https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。(推荐使用)
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
-
使用Npm安装
1.首先下载Nodejs,一路点击下一步安装完成,安装完成后会自带Npm。在cmd输入 node -v可以查看node是否安装成功 同理 npm -v查看npm安装版本
2.npm有时下载会很慢,我们可以在cmd输入 npm i -g cnpm全局安装cnpm
项目的搭建
在学习一个框架时,我们首先要了解的就是如何使用这个框架去搭建一个项目,在Vue中,可以选择vue-cli来搭建项目:
使用vue-cli脚手架 ,vue-cli是vue中基于webpack的快速搭建项目的工具。
要使用vue-cli,首先我们需要配置好它的使用环境:
-
下载node.js安装到本地 然后使用npm或者cnpm全局安装vue-cli (npm install -g @vue/cli)
-
需要一提的是,@vue/cli是3安装的命令,之前vue-cli2安装的命令是(npm install vue-cli -g) ,创建项目的命令是(vue init webpack 项目名称)
-
在cmd中使用命令 vue create 项目名称(最好不要起中文) 来自动搭建项目
-
使用命令后会询问是否切换cnpm(淘宝镜像源)来搭建项目,这个推荐切换。
-
然后会询问是使用默认生成还是自定义配置,这里推荐选第二个,可以选择自己想要的功能来搭建项目。
-
然后是详细配置
一般我们只需要关掉Linter/Formatter即可 其他的几项配置 在我们熟悉vue之后可选择是否开启 TypeScript 支持使用 TypeScript 编写程序 Progressive Web App (PWA) Support PWA 支持,一般PC端是用不到。 Router 支持 vue-router 。 Vuex 支持 vuex 。 CSS Pre-processors 支持 CSS 预处理器。 Linter / Formatter 支持代码风格检查和格式化。 Unit Testing 支持单元测试。 E2E Testing 支持 E2E 测试。
-
再回车是询问是否保存刚才的配置,一般选第一个就好
-
再回车是询问是否保存刚才的预设为以后的项目使用,输入y即可
-
给保存的预设起名字,之后在创建项目可以直接使用这个预设,就不需要在进行上边的操作了
-
关于history模式,这个模式需要后台配合,所以大部分情况我们选择No 不使用这个模式
Use history mode for router?*******history模式 这个看项目需要,history模式需后端支持,自行考虑
- 选择完了就可以一路回车进行搭建了(so easy!),创建完成如下图
cd my_app 跳转项目文件夹
npm run serve 启动vue项目 - 启动成功后,在页面输入下边的地址,就可以看到vue首页了
项目目录结构
进入我们创建的项目目录,文件是这样的
node_modules npm加载的项目依赖模块
public 静态资源文件夹,这里的东西不会被打包影响
src 我们要开发的目录,里边包含了一些目录和文件夹
assets: 放置一些图片,如logo等。
components: 目录里面放了一个组件文件,可以不用。
App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
main.js: 项目的核心文件。
browserslistrc 该文件是对浏览器做限制的,当es6转es5时,选择什么样的浏览器需要进行转换
babel.config.js 该文件是babel的配置文件,一般用的不多,只是一般,也有可能会用到。
package.json 管理项目依赖
指令
- v-show和v-if
v-if是删除和新增dom控制的显示隐藏,v-show是使用css样式控制的显示隐藏。 - v-html v-text
v-text 会把变量中的标签当成字符串渲染 v-html 会解析标签,页面上不显示。 - v-model
作用:数据双向绑定 原理是用到了Object.defineProperty上的set,get方法 - v-for
作用:循环 循环变量时有两个变量,第一个是数组项,第二个是索引值。
循环对象的时候,有三个变量,第一个是value,第二个key,第三个是索引值。 - v-bind
作用:绑定数据 可以简写成 : - v-on
作用:绑定事件 可以缩写成@ 还可以添加修饰符:
v-on:click.stop v-on:submit.prevent 还可以混用 v-on:submit.stop.prevent - v-once
作用:只渲染一次 - v-pre
作用:跳过该元素和他的子元素编译过程,可以用来跳过没有指令的节点加快编译 - v-cloak
作用:保持在元素上直到关联实例结束时进行编译
插槽
具名插槽
在组件中定义的具有name属性的插槽,例如:
<!-- 组件中 -->
<div>
<slot></slot>
<slot name="a"></slot>
<slot name="b"></slot>
</div>
<!-- 组件模板中 -->
<div>
<组建名>
<!-- 这个内容会替换没有名字的插槽 -->
abc
<template v-slot="a">
<!-- template中的内容会把a插槽替换掉 -->
<div>这个是a插槽的内容</div>
</template>
<template v-slot="b">
<!-- template中的内容会把b插槽替换掉 -->
<div>这个是b插槽的内容</div>
</template>
</组建名>
</div>
作用域插槽
<!-- 组件中 -->
<div>
<slot a="a" b="b" :c="变量"></slot>
</div>
<!-- 组件模板中 -->
<div>
<组建名>
<!-- 利用作用域插槽可以拿到插槽中绑定的值 或者变量 绑定的属性可以是自定属性 -->
<template v-slot="{a, b ,c}">
</template>
</组建名>
</div>
组件之间的传值
父组件向子组件传值
- 在父组件中通过自定义属性绑定要传递的变量
- 在子组件文件中通过props接收 props的值
- props的值可以是一个数组 props: [‘自定义属性’]
- props 的值还可以是一个对象 props: {
自定义属性: {
type: 数据类型
required: ‘是否必传’,
default: 默认值
}
}
子组件向父组件传值
- 在子组件中映射一个自定义事件
- 例如
<button @click="func"></button>
methods: {
func() {
this.$emit('自定义事件名',要传递的参数)
}
}
- 在父组件的子组件注册命中 直接@自定义的事件名 可以触发对应事件的函数,函数上自带的参数就是传递过来的数据
<组件名 @自定义事件名="函数"></组件名>
非父子组建传值
- 可是使用bus总线
- bus总线其实是一个vue的实例化对象
- 1)可以在main.js 中写 var bus = new Vue() 可以放在根组件的data中
- 使用 传递事件时 this. r o o t . b u s . root.bus. root.bus.emit(‘自定义事件’, 传递的参数)
- 使用 监听事件时 this. r o o t . b u s . root.bus. root.bus.on(‘自定义事件’, function(传递过来的数据)
- 2)创建一个 bus.js 文件 在文件中 var bus = new Vue() export default bus
- 在main.js中引入 import bus from ‘bus.js’
- vue.propotype.bus = bus
- 使用 this.bus.$emit(‘自定义事件’, 传递的参数)
- 使用 监听事件时 this.bus.$on(‘自定义事件’, function(传递过来的数据)
生命周期
berforeCreate => created => beforeMounte => mounted => beforeUpdate => updated => activated => deactivated => beforeDestory => destoryed
计算属性(computed)和监听(watch)
watch
- 监听可以用来监听数据或路由
监听数据时:
data() {
return {
count: 0,
obj: {
age: 0,
name: ''
}
}
},
watch: {
count(newVal, oldVal) { // 监听数据变化
},
'obj.age': function(newVal, oldVal) { // 监听对象中的某个键值得变化
}
}
监听路由时:
watch: {
'$route': function(to, from) {
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
},
'$route.path': function(to, from) {
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
}
}
computed
- computed()
<div>{{num}}</div>
num: function() { // 计算属性开始时只计算一次 只有当里面的依赖数据发生变化的时候才会再次执行
// 比如该函数中的count发生变化的时候才会触发
this.count++
var numVal = this.count
return numVal
}
路由
配置路由对象
- 在对应的js文件中引入vue-router
import vueRouter from 'vue-router'
import component1 from '组件文件地址'
const routes = [
{
path: '',
name: '',
component: component1
}
{
path: '',
name: '',
component: import (要懒加载的组件文件地址)
}
]
var router = new vueRouter({
routes,
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
- 动态路由 是在路由对象的path的地址中拼接一个 /index/:参数名称
- 获取动态路由的参数 this.$route.params 可以找到动态路由的参数
声明式路由
- 直接在页面里面使用
router-link
- 必传属性 to属性 to属性的值可以是一个地址(字符串) 也就是路由对象配置的path
- to的值还可以是一个对象
- params 参数只有使用路由对象的name属性跳转时才能使用
<router-link :to="{path: '组件路由地址', query:{键值对}}"></router-link>
<router-link :to="{name: '组件路由对象的name', query:{键值对}}"></router-link>
<router-link :to="{name: '组件路由对象的name', params:{键值对}}"></router-link>
编程式路由
this.$router.push({
path: '路由对象的path',
query: {
键值对
}
})
this.$router.push({
name: '路由对象的name',
query: {
键值对
}
})
this.$router.push({
name: '路由对象的name',
params: {
键值对
}
})
路由守卫
全局路由守卫
// 全局前置守卫
beforeEach(function(to, from, next){ // 每次路由跳转之前都会触发
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
// 只有执行了next()函数 路由拦截才会继续往下走
// next的参数可以是一个路由对象 也可以是一个地址如果给next传了地址参数 他会跳转到对应的地址页面
next()
})
// 全局的后置守卫
afterEach(function(to,from) { // 这时候页面已经进入 所以不用next()
})
路由独享守卫
{
path: '/',
component: component,
beforeEnter(to, from, next) { // 进入地址为path 的值得路由的时候才会触发的守卫
}
}
组件内的守卫
// 组件内的前置守卫
beforeRouteEnter(to, from, next) {
// 注意在该路由守卫中 this的指向不是当前的vue实例化对象
next(arg => {
// 这个参数就是vue的实例化对象
})
}
beforeRouteUpdate(to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 可以访问组件实例 `this`
}
beforeRouteLeave(to, from, next) {
// 路由离开前触发的守卫
}
Vuex
- 介绍
vuex是一个专为vue.js应用程序开发的状态管理模式。vuex解决了组件之间同一状态的共享问题。也可以把它当成一个专门存放数据的容器。 - 使用
- 首先需要进行安装(使用命令 npm install vuex --save)
- 在src文件目录新建一个store文件夹,方便引入并在store里新建index.js
- 然后在index.js里引入,并导出store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) 在vue中标明使用vuex
const store =new Vuex.State()
export default store
- 在main.js引入store 然后全局注入一下 就可以在任何组件中使用this.$store了
import store from './store'
new Vue({
el:"#app",
router,
store
})
- 属性
- state 存放数据
使用方式
1. 可以通过this.$store.state获取属性
2. 在script引入,在computed里使用扩展运算符把数据扩展成计算属性。然后就可以直接使用了。 - getters 获取数据的函数集
使用方式
1. 可以通过this.$store.getters.函数名来获取对应的数据
2. 在script引入,在computed里使用扩展运算符把数据扩展成计算属性。然后就可以直接使用 - mutations 用来修改数据的函数集
使用方式
1. 可以通过this.$store.commit(‘函数名’,参数)来设置数据
2. 在script引入,在methods里使用扩展运算符把函数扩展出来。然后就可以直接通过this.函数直接使用 - actions 用来修改数据的函数集(函数里可以进行异步操作)
和mutation不同的是,actions可以接受一个和this.store一样的参数 context 上边有store上的state,getters,commit
使用方式
1. 可以通过this.$store.dispatch(‘函数’,参数)来设置数据
2. 在script引入,在methods里使用扩展运算符把函数扩展出来。然后就可以直接通过this.函数直接使用。