vue.js学习和实战笔记

摘要：第二个是其值是或，确认是否深入监听。一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到第三个是其值是或，确认是否以当前的初始值执行的函数。混合定义来分发组件中的可复用功能结束，撒花文章已同步我的笔记，欢迎大家加，加后人生更加美好

文章已同步我的github笔记https://github.com/ymblog/blog，欢迎大家加star~~，加star后人生更加美好……

beforeCreate：不能访问this.$el和this.$data用于初始化非响应式变量
created：可以访问this.$data，不能访问到this.$el属性，this.$refs内容，用于ajax请求，created定义this变量，data没有定义不能双向绑定，data没有定义对象的子对象也是不能双向绑定
beforeMount：this.$el和this.$data都初始化了，挂载前this.$el的值为"虚拟"的元素节点，比较少使用
mounted："虚拟"的Dom节点被真实的Dom节点替换，用于获取VNode信息和操作，this.$refs可以访问
beforeupdate：响应式数据更新时调用，发生在虚拟DOM打补丁之前
updated：虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，data数据变化时只会触发update
beforeDestroy：实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例，用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed：实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

指令带有 v- 前缀的特殊属性

解释：更新DOM对象的textContent,为了输出真正的 HTML
还有v-on、v-bind、v-model、v-for、v-if、v-else、v-else-if不展开说明
注意:v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
v-if和v-show的区别：v-show适合非常频繁地切换

事件修饰符:

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.once事件只触发一次

按键修饰符:
@keyup.enter……
表单修饰符:
.lazy、.number、.trim

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素,vue会复用已有元素，使用两个input切换会共用，需要使用key让其独立
相同类型的元素之间切换，需要加入key防止出现问题

表达式的类型：字符串、数组、对象（重点）

//1
 ===> 解析后

//2
 ===>解析后

规范：定义组件名和组件文件名使用camelCase (驼峰命名法)，通用组件可以加上base，父组件标签使用kebab-case命名

规范：要定义类型要详细，命名使用camelCase (驼峰命名法)

实战注意点:如果设置默认值，不进行自定义传参，需要直接定义为:default: () => {return xxx},否则会报错，原因：props default 数组／对象的默认值应当由一个工厂函数返回

//使用prop来传值:
//子组件html

//js
props:["content","value"]
进行验证，type类型有：Number、String、Boolean、Array、Object
propA: {
     type: Number,
     default: 100
 }
//父组件html

注意:父级组件1为字符串，使用:some-prop="1"，1为数字

推荐始终使用 kebab-case 的事件名
$emit方法并传入事件的名字，来向父级组件触发一个事件

//子级

//父级

//currentTabComponent改变，组件也随之改变

说明：vue2.6,父组件使用插槽的v-bind能够访问子组件中的数据
注意：v-slot只能添加在一个