2

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()
 }

墨城
1.7k 声望2.1k 粉丝