再次学习vue的收获(基础篇)

Posted 2021-06-26 摸爬滚打的小前前

持续学习，那就先冲吧！把快乐留到以后。

重新系统的拾起vue又会有什么收获呢？

vue开始是一个兴趣项目

vue的特点：更加轻，渐进式，数据改变视图改变

基础篇

指令

{{}}只支持表达式，但可以做数据的拼装

v-bind （：）加的是动态的变量

v-if 不渲染   v-show 渲染然后隐藏 

组件

props：{

del：{

type：Boolean,    接收的是个布尔值  不是的话控制台报错

default:false,默认的是false 

}

}

事件

v-on（@click=“方法名”）

@keyup.enter=“方法名” 回车对应的事件

插槽

自行渲染插槽里的内容

被使用的组件 <slot name="pre"></slot> 可以有默认值

调用的地方<template v-slot=pre></template >

单文件组件

（es6 可以看阮一峰的es6入门）

css <style scoped></style> 不会污染其他的组件

双向绑定

v-model 语法糖（一种简写） 还是单项数据值

input     ：value+@input 

父组件可以使用 ：title。sync=“a” 在子组件里 

子组件更新之后使用 this.$emitd('update:title',newTitle)

虚拟dom和key

一个老dom树 一个新dom树 相同层级的对比 尽可能减少更改

在使用v-for的时候需要绑定一个key值 ：key=“”

触发组件的更新

在实例化的时候对data里的getter和setter进行操作

如果数据在视图里用到了才会有watch

计算属性和监听器

computed 一些数据需要进行一定的操作再使用 

能用computed尽量用 不用watch

生命周期

创建阶段 

beforeCreate。。。。

mounted 做异步的请求，操作dom，定时器，

（this.$nexttick?）

 beforeDestory 移除已添加监听器 以防内存泄漏

函数组件 

vue指令

v-if v-for 等等 类似if for等等

Provide和inject

实现组建的冒泡

组件实例

ref     this。ref。xxx 操作一个dom的元素

多层级的ref setXXXref getXXXref

vuex

一个数据在多个组件中使用

actions（dispatch('a')）向后端发起一个异步操作，不能在mutations(commit('a'))里操作

getter(getters.a)是一个计算属性