完整原文地址见简书//www.greatytc.com/p/7ae1901d79a4

本文内容提要

v-html

v-bind

插值表达式的内容可以是js各种表达式，但不能是语句

v-once

v-on:click指令与 v-bind指令的简写

动态属性

表单事件拦截的简写

ref指令引用 DOM节点实例【慎用，不够灵活】

ref指令引用子组件实例及子组件函数【慎用，不够灵活】

使用provide和inject 优化多层DOM组件的props数据传递

常规的props传递方法

使用provide和inject 进行优化

弊端1：要使用data中的字段时候，provide需要使用函数的形式

弊端2：除非使用响应式特性编程，否则无法使用双向绑定特性，数据的传输只能是一次性的

v-html

v-html：在指定的标签上，通过HTML的方式展示配置的变量：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: '<strong>hello world</strong>'
            }
        },
        template: `<div v-html="heheString"></div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

v-bind

v-bind：DOM标签的某个属性值要使用data中的变量值的时候使用：
没有用v-bind的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: 'luelueluelielielie'
            }
        },
        template: `<div title="heheString">hello world</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

图标展示的是title直接指定的字符串：

如果使用了v-bind指令：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: 'luelueluelielielie'
            }
        },
        template: `<div v-bind:title="heheString">hello world</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

UI展示的就是v-bind指定的数据变量的值：

再来一例：
同样是通过v-bind引用data中的字段值，作为UI节点的属性值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: true
            }
        },
        template: `<input v-bind:disabled='heheString'>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

效果：

将字段值改为false：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: false
            }
        },
        template: `<input v-bind:disabled='heheString'>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

输入框编程可用状态：

插值表达式的内容可以是js各种表达式，但不能是语句

表达式是一个有值的式子，语句则不是；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: 'luelueluelielielie'
            }
        },
        template: `<div>{{Math.max(6, 8)}}</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

效果：

v-once

修饰template中的UI节点，使得节点引用data()字段值的时候，
只使用一次字段的值，之后，无论data字段怎么被修改，
节点都不再引用其值（去重新渲染UI）；
！！开发中可以用于规避没必要的渲染，提高性能；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: 'luelueluelielielie'
            }
        },
        template: `<div v-once>{{heheString}}</div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

效果如下，UI引用data字段的值，但是重新赋值的时候，UI不再做其字段值对应的UI渲染：

v-on:click指令与 v-bind指令的简写

v-on:click =指令可以简写成 @click =；
v-bind:[var name] 可以简写成 :[var name]；
例程如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="heheApp"></div>
</body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                heheString: 'luelueluelielielie'
            }
        },
        methods:{
            handleClick(){
                alert('你戳到我啦————')
            }
        },
        template: `
        <div 
            @click="handleClick"
            :title="heheString"
        >
            {{heheString}}
        </div>`
    });
    const vm = app.mount('#heheApp');
  </script>
</html>

效果如下，
点击之后会触发对应的回调函数，
鼠标滞留在文本则可以看到title对应绑定的字段值：