Vue.js 深入理解与实践技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_58309844/article/details/128008083

vue2的一些知识点复习

1、常用内置指令

v-if 条件渲染
v-else 条件渲染
v-show 动态渲染
v-for 列表渲染
v-bind 动态绑定属性缩写：
v-on 绑定事件缩写 @
v-text 文本渲染
v-html html渲染
v-model 双向绑定

2、自定义指令

实现用v-focus

当v-focus值为true时，自动获取焦点
<input type="text" v-focus="true">
//directive 自定义指令
directives:{
  "focus":{
  // 自定义指令的钩子
  // 两个参数 el：绑定该指令的dom节点，binding是指令本身
  inserted(el,binding){
	// console.log(el, binding)
	  if(binding.value){
		  el.focus()
		  }
	  	}
 	 }
  },

3、侦听

监听某一个数据的变化当这个数据发生改变时对应的监听函数就会重新执行

<button @click="num.n++">{{num.n}}</button>
<button @click="num.m++">{{num.m}}</button>

data(){
  return{
               // num:10,                                      
	  num:{
	  n:5,
	  m:20
	  }
 	}
 },
 // 监听属性
  watch:{
  // 定义监听num的监听方法
  // 监听方法 两个参数：数据变化后的新数据 变化前的旧数据
  // num:function(nval,oval){
 //  console.log(`数据由${oval}变成${nval}`);
  // }
  // 当监听的数据是个引用类型的时候
	"num":{
	// 监听属性的句柄函数 nval和oval的作用一样 无法监听旧数据
	handler(nval,oval){
	console.log(`数据由${oval.n}变成${nval.n}`);
	},
	// 当监听数据是引用类型时，加deep:true,深度监听
	deep:true
	}
  },

4、计算属性

通过现有属性计算出一个新的数据计算方法中所依赖的数据发生改变时这个方法重新执行

计算属性和监听属性的区别

1、计算属性的方法名是数据名监听属性是把数据名当方法名
2、计算属性必须return 监听属性不一定
3、计算属性可以对多个数据进行监听监听属性只能对一条数据进行监听
4、监听属性没有缓存计算属性有缓存

5、组件

1、定义组件
在components目录下建立vue文件
2、引入组件
使用import语句在当前页面引入

import TopHeader from '../components/TopHeader'

3、注册组件
在components属性中注册

// 注册组件
  components:{
        TopHeader,
  },

4、使用组件
以注册的组件名当作标签使用组件
如果注册的组件名是标准的大驼峰命名法还可以转换成字符形式的标签

<TopHeader></TopHeader>
<TopHeader />
<top-header></top-header>
<top-header />

6、组件传参

1、父传子
通过属性的方法向子组件传递参数在子组件中通过props属性接受数据
代表向子组件传递了一个名为number的数值值为count

<top-header :number="count"></top-header>

2、子传父

在子组件中通过 $ emit调用父组件的自定义事件并携带数据向父组件传递参数在父组件中通过使用自定义事件接受$ event参数
子组件通过$ emit委托事件并携带age数据父组件通过getAge事件接受$event 即子组件传递的age值

3、非父子传参

在发送数据的组件中通过一个vue实例中的$ emit方法发送事件并传递参数
在需要接受数据的组件中通过这个vue实例中$ on方法监听事件并接受参数

sendMsg(){
// 事件委托，调用某个事件
Bus.$emit('getInfo','bus传递的参数 来自于about')
}
 
created(){
  // $on负责接受事件
       Bus.$on('getInfo',(data)=>{
     console.log(data);
  })
  },

4、其他传参方式
在vue实例中通过 this.$ parent获取父组件的属性
通过this.$children获取子组件的属性

7、动态绑定class&style

动态绑定class
对象形式
对象的键值对值为true时健名当作类名执行渲染值为false时不渲染
数组形式
数组每一项的数据都会当作类名渲染
动态绑定style
以对象形式绑定时这个对象就是个js的样式对象
以数组形式绑定时数组中的每一项都是一个样式对象

8、组件插槽

使用 slot 标签在子组件中进行插槽占位，使用组件标签时就可以在标签内部插入一些内容/文本
在slot标签中使用 name 属性指定插入 dom 的slot属性对应的位置

//在组件SonCom.vue中创建插槽 
<div>
<!-- 通过slot(标签)组件定义插槽 -->
<!-- 通过name属性对应嵌套的slot属性 区分位置 -->
<slot name="a"></slot>
   子组件
<slot name="b"></slot>
</div>
 
//使用插槽
<son-com>
<div slot="a">嵌套的内容</div>
        <p slot="b">这是第二个内容</p>
</son-com>

9、动态组件

使用 component 内置组件定义动态组件，使用 is 属性指定 component 具体渲染哪个组件

//创建A.B.C三个组件
<!-- component组件本身不渲染任何东西 通过is属性确定渲染哪个组件 -->
<button @click="com='A'">A</button>
<button @click="com='B'">B</button>
<button @click="com='C'">C</button>
<component :is="com" />

data(){
    return{
         com:'A',    
    }
}

10、动画过渡列表过渡

使用 transition 组件定义一个过渡效果
条件渲染 v-if
条件显示 v-show
动态组件 component
根节点渲染

// transition组件携带的六个类名
.v-enter 定义进入过渡动画开始的状态
.v-enter-active 定义进入过渡动画生效时的状态
.v-enter-to 定义进入过渡动画结束时的状态

.v-leave 定义离开过渡动画开始的状态
.v-leave-active 定义离开过渡动画生效时的状态
.v-leave-to 定义离开过渡动画结束时的状态

11、列表过渡

使用 TransitionGroup 组件定义一个列表过渡类名同transition
TransitionGroup 默认会渲染一个span标签通过tag属性更改渲染的标签
列表过渡时 v-for 渲染的列表必须加 key 值，且key值不能是 index
列表过渡时使用 v-move 定义列表的过渡动画

12、混入

混入就是把一个或多个组件中可复用的js单独提炼出来（包括但不限于：生命周期，methods，watch）
当混入对象和自身组件的数据产生冲突时，生命周期函数会合并，data、methods会以自身组件优先

// 引入mixin对象
import mixin from '../utils/mixin.js'

export default{
    mixins:[mixin],
}
mixin.js中
// 定义一个混入对象 对象中可以包含vue实例的任何属性

13、路由的使用

vue的路由
通过监听路由地址的变化渲染不同的组件
hash 根据hash地址的变化
history 是h5新增的api功能根据history的url地址变化
两个重要的组件（标签）
router-link 负责更改路由地址
router-view 负责渲染组件
路由地址和组件的对应关系由router/index.js负责

// 普通路由
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  // 懒加载路由
  {
    path: '/about',
    name: 'about',
   
    component: () => import('../views/AboutView.vue')
  },
   //重定向路由
  {
path:"/abc",
redirect:"/about",
  },
  //路由别名
  {
  path:"/kdsakkda",
  component:()=>import("../views/AboutView.vue"),
  alias:['/aaa']
  },
   // 嵌套路由
  {
  path:"/news",
  component:()=>import("../views/News.vue"),
  // 使用children嵌套子路由
  children:[
  {
  path:"ylxw",
  component:()=>import("../views/news/Ylxw")
  },
  ],
  redirect:"/news/gjxw"
  },
   //导入动态路由
    {
  path:"/news/:id",
  name:"news",
  component:()=>import("../views/News.vue")
    },
     //404路由,放到最后,防止路由别名冲突
  {
path:"*",
component:()=>import("../views/404.vue")
  },

14、路由跳转

// 用js的方式实现页面跳转
      // 使用$router.xxx() 进行路由跳转
       //普通跳转 （带历史记录）
       this.$router.push(")
      // 不保存历史记录跳转
       this.$router.replace()
      // 历史记录后退
       this.$router.back()
      // 历史记录前进
       this.$router.forward()
      // 历史记录跳转
       this.$router.go()

15、$router 和 $route区别

$router 全局路由对象包含 push replace back forward go 等方法
$route 当前路由信息包含 hash fullpath path params query match meta name 等属性

16、vuex

全局状态管理器,用于存储一些可供全局支配使用的数据
包含五个属性

 // 存放数据 data
  state: {
  },
  // 修饰器 computed
  getters: {
  },
  // 修改数据 methods
  mutations: {
  },
  // 处理异步操作 methods
  actions: {
  },
  // 模块
  modules: {
  }

state

定义state数据

state:{
    name:"张三"，
    age：18
}

组件中使用数据
//直接使用

 $ store.state.name
 //计算属性的方法使用
 computed:{
    getName(){
return this.$store.state.name
    }
}
// 引入映射方法
import { mapState } from 'vuex'
// 映射方法使用
...mapState(['name','age'])
// 起别名
...mapState({newName:'name'})

getters

定义一个getters方法

 getters: {
    // 方法名就是新数据名
    firstName(){
      // return值就是数据的值
      return "张"
    }
  },

使用getters方法：

// 普通使用
this.$store.getters.firstName
// 计算属性使用  同state
// 映射方法使用
import { mapGetters } from 'vuex'
...mapGetters(['firstName']),
...mapGetters({
    xing: 'firstName'
})

mutations

定义mutations方法

  mutations: {
    // 定义一个增加年龄的方法
    // 形参state就是当前vuex中的state数据对象
    addAge(state,{num1}){
      state.age += num1
    }
  },

使用mutation

// 普通用法
<button @click="$store.commit('addAge',{num1:10})">长大了</button>
// 映射用法
import { mapMutations } from 'vuex'
methods: {
    // 使用mutations的映射方法
    // mutations 是方法 需要放在methods中
    ...mapMutations(['addAge'])
},

actions

定义actions

 actions: {
    // 参数：content 当前vuex实例的上下文
    setAge(content,data){
      setInterval(()=>{
        // 如果需要修改state数据 还需要调用mutation中的方法
        content.commit('addAge',data)
      },1000)
    }
  },

actions的用法

// 普通使用
<button @click="$store.dispatch('setAge',{num1:10})">开始增加</button>
// 映射方法
import { mapActions } from 'vuex'
methods: {
    // 使用actions的映射方法
    ...mapActions(['setAge'])
},

modules模块

模块可以分类存储所需数据以增加代码美观度
模块中一样可以存在 state getters mutations actions等属性定义方法和之前一样
用法：
state getters数据用法

{{$store.state.user.isLog}}

映射方法

...mapState({
    isLog:(state)=>{
        return state.user.isLog
    }
}),

mutations actions 等的用法

// 普通用法  不需要指定模块名称
<button @click="$store.commit('changeLog')">更改isLog</button>
// 映射方法
// 通过mutations的映射方法 使用user模块的mutation
// 不需要指定模块名
...mapMutations(['changeLog']),


/*
通常情况下  模块中的方法有可能会重复 所以引入了一个命名空间的概念
即 在模块中新增加一个属性叫  namespaced：true
*/
let user = {
    // 添加命名空间
    namespaced:true,
    state:{
        isLog:true
    },
    mutations:{
        changeLog(state){
            console.log('这是user的方法')
            state.isLog =  !state.isLog
        }
    },
    getters:{},
    actions:{}
}
export default user

// 使用带命名空间的方法
// 通过mutations的映射方法 使用user模块的mutation
...mapMutations({
    updateLog:'user/changeLog'
}),