vue官方视频学习快乐冲鸭

class于style绑定

v-bind = “可以为对象，也可以为数组”

:class="" class控制样式的展示，动态的class即可通过data数据改变样式 （三元运算：判断是否为真，是否显示）

:style="{color :color }" 第一个color为data属性 ，第二个color为style样式 （三元运算：判断是否为真，是否显示）

条件渲染

v-if:切换过程中，条件块内事件监听器和子组件会被销毁和重建 (低频)
v-show:简单切换css, (高频)

v-if = “a” a是data下变量
v-show = “a” a是data下变量

列表渲染

当v-for更新时，v-for是就地更新，只适用于临时状态和不依赖子组件状态，为了跟踪每个节点的身份，需要提供key,从而可重用和排序for对象

v-for = “(value, name, index) in items” :key = “index”

{{ index }}. {{ name }}: {{ value }}

返回： 下标 属性 值

items是数组 index获取的是下标
items是对象 index获取的是属性值

for… in
for(var item in Object){
console.log(item)//返回的是下标
console.log(Object[item].name)//返回属性
}

Array.map()
Array.map(res =>{
console.log(res)
return res
})

一定要return，返回数据，没有return 默认返回undefined

for不多讲了，都了解

事件绑定
@dblclick:双击事件
@click=“”
在需要使用到原型dom事件 $event 是获取dom的默认属性 ：例如 button p div

$(‘body’).bind(‘click’, function (event) {
console.log(typeof event); // object
});

$event使用场景

在表单输入时用到 consolo.log(e.detail.value)//控制台打印输入的内容 e是event

表单输入绑定

v-mode 双向绑定

提交数据
通过按钮@click = “sub”

将获取到的数据，用一个对象或数组，包裹起来并提交

组件基础

组件：可复用的vue实例
优势：重复方法封装，简洁代码

组件，根节点

命名：驼峰命名和 -横杠命名

Vue.component(‘组件名称’,{}) =>全局注册组件

components(‘组件名’,{}) =>局部注册组件

父子组件的通信：组件的props[‘自定义命名的’],$emit(‘名称’,传父数据) 都是写在组件内部的

子组件

父组件

效果图