类和样式表
实现类和样式表动态化，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。
1. 绑定html class
1）绑定Class对象，特定格式{class1 : true|flase, class2 : true|false, ...}
2）绑定计算属性，computed(()->({即直接返回本对象}})
3）绑定数组，[class1变量名，class2变量名]
4）用在组件上
<MyComponent class="baz boo" />
<MyComponent :class="{ active: isActive }" />
区分，单根组件 或 多个组件，
<!-- MyComponent 模板使用 $attrs 为多根组件指定调用端绑定的class -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
2. 绑定内联样式
1）绑定对象
const activeColor = ref('red')
const fontSize = ref(30)
template
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
或者通过对象来绑定
const styleObject = reactive({
color: 'red',
fontSize: '13px'
})
<div :style="styleObject"></div>
2）绑定style对象数组
<div :style="[baseStyles, overridingStyles]"></div>
3）自动前缀，兼容不同浏览器
4）样式多值
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
条件渲染
1）v-if, v-else-if, v-else
2）<template> 上的 v-if，实现控制多个元素的动态渲染
3）v-show，对应DOM的display: none|block
4）v-if vs. v-show
5）v-if 先于 v-for 确定是否渲染
循环渲染
v-for指令, 循环控制基本形式为 item in items
1. items为数组
1）item 完整格式为 (item[, index])，
2）还可以对item对象解构：
(, index), 其中name为item的属性。
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
template
<li v-for="item in items">
{{ item.message }}
</li>
2. items为对象
1）item完整格式为 (item[, key[, index]])
2）可解构item
const myObject = reactive({
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
})
<li v-for="(value, key, index) in myObject">
{{ index }}. {{ key }}: {{ value }}
</li>
3. items为整数范围
<span v-for="n in 10">{{ n }}</span>
注意从1开始，到10
4. v-for 与 v-if渲染与否判断优先级，以及变量作用域
v-if在优先，因此不能在v-if的表达式李使用item
5. <template> 上的 v-for
可循环渲染多个元素
6. 通过 key 管理状态
可提高重渲染性能
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
以及
<template v-for="todo in todos" :key="todo.name">
<li>{{ todo.name }}</li>
</template>
7. 组件上使用 v-for
循环渲染的同时，传递props
<MyComponent
v-for="(item, index) in items"
:item="item"
:index="index"
:key="item.id"
/>
8. v-for 侦测数组变化
对下列方法引起数组变化，做重渲染响应，分为两类
1）变更方法
push()，pop()，shift()，unshift()，splice()，sort()，reverse()
2）替换数组
下列方法filter()，concat() 和 slice()，将替换一个新数组。Vue尽量重用就DOM节点。
// `items` 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))
9. 过滤或排序的实现
通过计算属性来实现，但计算属性函数中不应该变更原始数组
const numbers = ref([1, 2, 3, 4, 5])
const evenNumbers = computed(() => {
return numbers.value.filter((n) => n % 2 === 0)
})
10. 多维数组的计算后循环渲染
const sets = ref([
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10]
])
function even(numbers) {
return numbers.filter((number) => number % 2 === 0)
}
- 模板
<ul v-for="numbers in sets">
<li v-for="n in even(numbers)">{{ n }}</li>
</ul>
11. 计算属性函数不变更原始数组
return numbers.reverse()
+ return [...numbers].reverse()
=================================================================
1. 动态组件，传递动态props
https://stackoverflow.com/questions/43658481/passing-props-dynamically-to-dynamic-component-in-vuejs
2. 动态加载动态组件-异步组件(有点绕吧)
https://cn.vuejs.org/guide/components/async.html
https://www.telerik.com/blogs/dynamic-components-vue-component
# 使用箭头函数
const Guest = () => import("./components/Guest")
const User = () => import("./components/User")
const Member = () => import("./components/Member")
export default {
data() {
return {
user: null
};
},
computed: {
userComponent() {
if (!this.user) return Guest;
if (this.user && !this.user.subscription)
return User;
if (this.user && this.user.subscription)
return Member;
}
}
};
3. 简单路由
https://cn.vuejs.org/guide/scaling-up/routing.html#simple-routing-from-scratch