vue学习记录

vue 使用写法有  选项式和组合式 通常选项式，都是基于组合式

模板语法 v-bind ：  v-on @   v-model @ vue{{}} 直接javascript的原生操作，判断，字符串spilt 等

一般复杂的属性绑定 比如加id 判断 可以使用计算属性，不支持异步 能够响应刷新数据 computed

还有 watch 可以实现属性判断等，但是一般用于监听，可以监听异步操作

await nextTick() 可以不用等待下一个tick的时间 去刷新数据

绑定class   :class="{ active: isActive } 或者绑定多个 :class="[activeClass, errorClass] 三元表达式也可支持

绑定 内联样式 :style="{ color: activeColor, fontSize: fontSize + 'px' }" 或者使用

内联 <div :style="{ 'font-size': fontSize + 'px' }"></div>

绑定的样式 在不同浏览器不同可以使用 样式多值 绑定<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div> 会自动选择

条件渲染 v-if else  v-show（始终被渲染）

v-if v-for 同时使用 v-if 会首先被执行 可以使用temp模板 先使用v-for 这样v-if 可以访问for循环的对象 

 v-for="(item, index) in items" v-for="item in items" 具体 列表渲染 | Vue.js (vuejs.org)

v-for 通过key 管理状态 确保它们在原本指定的索引位置上渲染  使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上 列表渲染 | Vue.js (vuejs.org)

组件使用v-for   <MyComponent v-for="(item, index) in items" :item="item" :index="index" :key="item.id" /> 指定对象名称 不然不会生效  

数组对象可以使用数组操作  <li v-for="n in even(numbers)">{{ n }}</li>

methods: {

even(numbers) { return numbers.filter(number => number % 2 === 0) } }

reverse() 和 sort() 会改变原数组 可以

内联事件绑定 v-on @ 可以访问原生dom元素<button @click="warn('Form cannot be submitted yet.', $event)"> Submit </button>

事件修饰符 更专注于数据逻辑不提供DOM事件的细节 事件处理 | Vue.js (vuejs.org)

还可以添加按键修饰符<input @keyup.enter="submit" /> 等 详见事件处理 | Vue.js (vuejs.org)

表单输入绑定 v-model 可以绑定data里的数据 双向刷新 <input v-model="message"  /> 尽量使用v-mode 绑定 有的标签{{}}不支持 对于一个数据也可以绑定多个input checkbox会添加多个数据的value

选择框绑定也可以用 true-value 和 false-value 选中yes取消no 也可以自定义 <input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

自动转数字 <input v-model.number="age" /> 等  组件可以自定义v-model

生命周期 生命周期钩子 | Vue.js (vuejs.org)

侦听器watch 侦听器 | Vue.js (vuejs.org)

模板的引用 对标签定义 ref <input ref="curres"> 使用 this.$refs.curres.focus() 调用 挂载后才能调用 mounted后

组件的 ref使用 首先使用标准的 props 和 emit 接口来实现父子组件交互 expose 可以限制父组件对子组件的访问，子组件决定能访问那些内容 expose: ['publicData', 'publicMethod'] 模板引用 | Vue.js (vuejs.org)

组件 使用prop 定义动态参数  组件基础 | Vue.js (vuejs.org)

slot插槽 <slot ></slot> 定义一个占位符 插槽 Slots | Vue.js (vuejs.org)

还可以使用具名插槽 <slot name="header"></slot>  父页面使用<BaseLayout> <template v-slot:header> <!-- header 插槽的内容放这里 -->  方式使用对应 位置 插槽 Slots | Vue.js (vuejs.org)

还可以自定义插槽名称 

<base-layout>

<template v-slot:[dynamicSlotName]> ... </template>

 <template v-slot:[dynamicSlotName]> ... </template>

</base-layout>

作用域插槽 具名作用域插槽等 插槽 Slots | Vue.js (vuejs.org)

深入组件---------------