This article is reprinted from: JS Daily Question
WeChat public account: JS Daily Question
Vue’s various commands and syntax formats are easy to remember
1.vue directive-v-model modifier
Syntax: v-model.modifier="vue data variable"
.number is converted to numeric type using parseFloat.trim
removes leading and trailing whitespace characters.lazy
triggers change when focus is lost instead of inupt
2. Computed properties
Computed properties are cached to improve rendering performance.
If you need to process existing data to obtain new data on the page, you must use calculated attributes.
Ordinary writing
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
Complete writing method
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
3.vue listener
You can monitor changes in the value of data (data/computed, etc.). The value of data has types: basic data type, reference data type.
Deep monitoring
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
6. Child Father
7.vue component life cycle
four stages:
Initialization => Create component => beforeCreate created
mount => Render display component => beforeMount mouted
update => Modify variables => Trigger view refresh => beforeUpdate updated
Destruction => Switch pages => The component object will be deleted from memory = > beforeDestory destoryed
8. Component advanced-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
}
}
}
9. Component advancement - dynamic components
<component :is="comName"></component> //comName是变量,值为需要切换的几个组件名
10. Component advancement-keep-alive component
Use the keep-alive 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
syntax:
1.
include="组件名1,组件名2..."
:include="['组件名1'， '组件名2']"
<keep-alive include="name1,name2">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
11. Component advancement-named slot
Format
Definition:
<slot name="xxx">
use:
<template #xxx></template>;
<template v-slot:xxx></template>
12. Custom instructions-basic use
{
data(){
},
methods: {
},
directives: {
focus: {
// 自定义指令名
inserted(el){
// 固定配置项 - 当指令插入到标签自动触发此函数
el.focus()
}
},
},
}
13. Custom instructions-value transfer and update
Goal: Use custom instructions, pass in a value
Requirements: Define the color instruction - 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 in 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, obtaining native DOM, custom operations
14.axios request
async loadData(){
const res= await axios.get("http://.......")
// console.log(data);
}
},
created(){
this.loadData()
}
This article is reprinted from: JS Daily Question
WeChat public account: JS Daily Question