无所事事的样子开始了摸鱼的一天
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
以上先列出后续填充~~
—————————————————————————————————————————————————————— 我这废柴