总结
搭建项目
第一类是脚手架搭建
- vue-cli脚手架的环境 node vue-cli
- 下载nodejs安装到本地 全局安装vue-cli
- cli安装命令 npm install -g @vue/cli
- 创建项目 vue create 项目名称
- 可以选择两种方式
- 第一中默认方式(不推荐)
- 第二种 自定义方法
- 选择history模式(大部分情况选择no)
- 其他自定义选项使用 上下键选择 空格键可以选中或取消选中
- vue-cli2 的项目搭建命令
- cli 安装命令 npm install vue-cli -g
- 创建项目的命令 vue init webpack 项目名称
第二种 webpack搭建项目
- 两个重要的依赖
- 第一个 vue-loader
- 第二个 vue-template-compiler
指令
- v-show v-if
- 区别 v-if是删除和新增dom控制的显示隐藏 v-show是使用css样式控制的显示隐藏
- v-html v-text
- v-text 会把变量中的标签当成字符串渲染 v-html 会解析标签 页面上不显示
- v-model 作用: 数据双向绑定 原理: Object.defineProperty({set: ‘’,get: ‘’})
- this.变量 = ‘值’ 得时候 会调用 set方法设置数据
- 在dom中渲染该变量的时候会调用get方法
- v-for 作用 循环
- v-for 循环数组的时候 有两个变量 第一个是 数组项 第二个是索引值
- v-for 循环对象的时候 有三个变量 第一个是value 第二个key 第三个索引值
- v-bind 绑定数据 绑定一个属性 属性的值可以是一个变量 v-bind可以缩写成一个:
<div v-bind:自定义属性(也可以是标签自带的属性)="{{变量}}"></div>
<div :自定义属性(也可以是标签自带的属性)="{{变量}}"></div>
- v-on 绑定事件 可以缩写成@ 事件可以添加修饰符 例如 v-on:click.stop v-on:submit.prevent 还可以混用 v-on:submit.stop.prevent
- 还可以监听键盘按键 v-on:click.enter 意思就是用户点击enter事件时会触发函数
<div v-on:click="函数名称"></div>
<div @click="函数名称"></div>
- v-once 只渲染一次
- v-pre
- v-cloak
插槽
具名插槽
- 组件中定义的插槽
<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>
<script>
import 组建名 from "组件地址"
export default {
components: {
组建名
}
}
</script>
作用域插槽
<div>
<slot a="a" b="b" :c="变量"></slot>
</div>
- 使用组件的地方
<div>
<组建名>
<!-- 利用作用域插槽可以拿到插槽中绑定的值 或者变量 绑定的属性可以是自定属性 -->
<template v-slot="{a, b ,c}">
</template>
</组建名>
</div>
<script>
import 组建名 from "组件地址"
export default {
components: {
组建名
}
}
</script>
组建之间传值
父组件向子组件传值
- 在父组件中通过自定义属性绑定要传递的变量
- 在子组件文件中通过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() 这个是dom创建之前触发的函数 这时候还没有data和methods 所以无法调用data中的数据和methods里面的方法
- created() dom创建的函数 里面不能直接获取dom 如果要在created()中获取dom 需要使用this.$nextTick() $nextTick是在dom更新完成后调用的方法 他是基于promise的一个方法 会有延迟
- beforeMounte() dom 创建完成 但是还未渲染
- mounted() dom渲染完毕 在这个里面不需要任何方法 可以直接使用js方法获取dom
- beforeUpdate() 数据更新之前触发的函数
- updated() 数据更新的时候触发的函数
- activated() keep-alive组件激活的时候触发的函数
<keep-alive>
<router-view></router-view>
</keep-alive>
- deactivated() keep-alive组建停用时触发的函数
- beforeDestory() 页面销毁之前触发的函数 (新页面的created要比老页面的beforeDestory()先触发)
- destoryed() 页面销毁触发的函数
样式 有没有scoped属性的区别
- 有scoped属性样式在别的组件中不生效
- 没有scoped属性 样式相当于全局样式
watch 监听
- 监听路由
watch: {
'$route': function(to, from) {
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
},
'$route.path': function(to, from) {
// to 是要进入的页面的路由对象
// from 是要离开的页面的路由对象
}
}
- 监听数据
data() {
return {
count: 0,
obj: {
age: 0,
name: ''
}
}
},
watch: {
count(newVal, oldVal) { // 监听数据变化
},
'obj.age': function(newVal, oldVal) { // 监听对象中的某个键值得变化
}
}
计算属性
- 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) {
// 路由离开前触发的守卫
}