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

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

重新系统的拾起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)是一个计算属性

 

 

 

 

 

 

 

 

 

 

 

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页