我这废柴怎么可能逆袭的一生、第七天

390 阅读2分钟

无所事事的样子开始了摸鱼的一天

Vue基础结构

new Vue({
el:'#app',
data:{
str:'mdzz'
}
})
  • el属性------>指定一个模板
  • data属性---->填充进去
new Vue({
data:{
str:'mdzz'
},
render(h){
return h('div','mdzz')
}
}).$mount('#app')
  • data 依旧放数据
  • render 把h函数创建的虚拟dom返回
  • $mount把虚拟dom转换为真实dom渲染到浏览器

Vue生命周期

  • 新建Vue实例
  • 初始化事件&生命周期
  • beforeCreate
  • 初始化注入&校验 把props method data成员注入到实例上
  • created //可以访问到props method data
  • 判断是否指定el选项,没有指定就调用$mount把el转换为template
  • 如果没指定template,就将外部的html作为template编译,指定了就把template编译到render函数
  • beforeMount // 挂在之前,无法获得新元素的内容
  • 渲染dom
  • mounted //访问到新dom中的内容
  • 当修改data内容的时候会触发 beforeUpdate
  • 目前无法取到修改后的内容
  • 对比新旧dom进行替换 触发 updated ,此时才可以取到修改后的内容
  • beforeDestroy
  • 解除绑定销毁组件以及事件监听
  • destroyed
  • 单文件组件之类的模板编译将提前执行

官方不推荐运行时候编译模板,性能比较好

Vue语法和概念

插值表达式
{{}}
指令

蛮多的 据说14个

计算属性和侦听器

太多逻辑需要处理,推荐使用计算属性。计算属性的结果会被缓存 异步操作等开销比较大的操作使用侦听器

Class、Style
条件渲染/列表渲染

v-if v-for 推荐为每个for添加key

双向绑定
组件

可复用的Vue实例,可以嵌套复用一波(套娃就是你了)

插槽

slot占位

插件
混入mixin

多个组件有相同的选项,可以将相同的选项合并,重用

响应式原理
不同版本的Vue

以上先列出后续填充~~

—————————————————————————————————————————————————————— 我这废柴

系列