1. Vue directive -v-model modifier
grammar:
v-model.modifier="vue data variable"
.number 以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在失去焦点时触发更改而非inupt时
2. Computed properties
Computed properties are cached to improve rendering performance.
If you need to process the existing data to get new data on the page, you should use the computed property.
Writing:
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
3. Vue listener
Changes in the value of data (data/computed, etc.) can be monitored. The values of data have types: primitive data types, reference data types
Deep listening
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
4. Scoped implements the private style of the component
<stype scoped>
h2 {} // 样式只会在当前组件内生效
</style>
5. From father to son
parent component
<template>
<div>
<child :users="user"></child> <!-- 子组件绑定users变量-->
</div>
</template>
<script>
import { child } from "./child";
export default {
components: { child },
data() {
return {
user: '张三'
};
}
};
</script>
Subassembly
<template>
<div>{{ users }}</div>
</template>
<script>
export default {
props: ["users"] //接收user值
};
</script>
6. From the son to the father
Subassembly
<template>
<div>
<button @click="datas"></button>
</div>
</template>
<script>
export default {
methods: {
datas() {
this.$emit("info", value); //$emit 的第一个参数是父组件自定义事件的方法名,后边的 “value” 是子组件要给父组件传递的数据
}
}
};
</script>
parent component
<template>
<div>
<child @info="getInfo"></child>
</div>
</template>
<script>
import { child } from "./child";
export default {
components: { child },
methods: {
getInfo(value) {
// value 就是子组件传递过来的数据
}
}
};
</script>
7. Advanced component - props verification
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
8. Advanced components - dynamic components
<component :is="comName"></component> //comName是变量,值为需要切换的几个组件名
9. Advanced component - keep-alive component
Use keep-alive's built-in vue component to allow dynamic components to be cached instead of destroyed
<keep-alive>
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
Component advanced-keep-alive component-specified cache
grammar
include="组件名1,组件名2..."
:include="['组件名1', '组件名2']"
<keep-alive include="name1,name2">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
10. Component Advancement - Named Slot
Format
定义:<slot name="xxx">
使用:
<template #xxx></template>;
<template v-slot:xxx></template>
11. Custom Instructions - Basic Use
{
data(){},
methods: {},
directives: {
focus: { // 自定义指令名
inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
el.focus()
}
},
},
}
12. Custom instructions - pass value and update
Goal: use a custom directive, pass in a value
Requirement: Define the color command - pass in a color, set the text color for the label
Modify the definition of main.js
directives: {
"color":{
inserted(el, binding){ // 插入时触发此函数
el.style.color = binding.value;
},
update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新
el.style.color = binding.value;
}
}
}
Change it at Direct.vue
<p v-color="theColor" @click="changeColor">使用v-color指令控制颜色, 点击变蓝</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>
Summary: v-xxx, custom instructions, get native DOM, custom operations
13. Axios request
async loadData(){
const res= await axios.get("http://.......")
// console.log(data);
},
created(){
this.loadData()
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。