Vue3——Vue实例与数据绑定

Vue实例与数据绑定

1、应用程序实例及选项

每个Vue.js的应用都需要创建一个应用程序的实例对象并挂载到指定DOM上。在Vue 3.0中，创建一个应用程序实例的语法格式如下：

js 复制代码

 Vue.createApp(App)

createApp()是一个全局API，它接收一个根组件选项对象作为参数。选项对象中包括数据、方法、生命周期钩子函数等选项。创建应用程序实例后，可以调用实例的mount()方法，将应用程序实例的根组件挂载到指定的DOM元素上。这样，该DOM元素中的所有数据变化都会被Vue监控，从而实现数据的双向绑定。例如，要绑定的DOM元素的id属性值为app，创建一个应用程序实例并绑定到该DOM元素的代码如下：

js 复制代码

 Vue.createApp(App).mount('#app')

1.1、数据

在组件选项对象中有一个data选项，该选项是一个函数，Vue在创建组件实例时会调用该函数。data()函数可以返回一个数据对象，应用程序实例本身会代理数据对象中的所有数据。例如，创建一个根组件实例vm，在实例的data选项中定义一个数据。代码如下：

html 复制代码

<div id="app">
    <h1>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    //创建应用程序实例
    const vm = Vue.createApp({
        //返回数据对象
        data() {
            return {
                message: 'Hello World!'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

上述代码中，创建的根组件实例被赋值给变量vm，在实际开发中并不要求一定要将根组件实例赋值给某个变量。

1.2、方法

在创建的应用程序实例中，通过methods选项可以定义方法。应用程序实例本身也会代理methods选项中的所有方法，因此也可以像访问data数据那样来调用方法。例如，

在根组件实例的methods选项中定义一个showInfo()方法，代码如下：

js 复制代码

<div id="app">
    <h1>{{showInfo()}}</h1>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    //创建应用程序实例
    const vm = Vue.createApp({
        //返回数据对象
        data() {
            return {
                a: 'Hello',
                b: ' World' 
            }
        },
        methods: {
            showInfo: function() {
                return this.a + this.b;
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

1.3、生命周期钩子

每个应用程序实例在创建时都有一系列的初始化步骤。例如，创建数据绑定、编译模板、将实例挂载到DOM并在数据变化时触发DOM更新、销毁实例等。在这个过程中会运行一些叫作生命周期钩子的函数，通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下。

beforeCreate：在实例初始化之后且数据观测和事件／监听器配置之前调用。
created：在实例创建之后进行调用，此时尚未开始DOM编译。在需要初始化处理一些数据时会比较有用。
beforeMount：在挂载开始之前进行调用，此时DOM还无法操作。
mounted：在DOM文档渲染完毕之后进行调用。相当于JavaScript中的window.onload()方法。
beforeUpdate：在数据更新时进行调用，适合在更新之前访问现有的DOM，如手动移除已添加的事件监听器。
updated：在数据更改导致的虚拟DOM被重新渲染时进行调用。
beforeDestroy：在销毁实例之前进行调用，此时实例仍然有效。此时可以解绑一些使用addEventListener监听的事件等。
destroyed：在实例被销毁之后进行调用

下面通过一个示例来了解Vue.js内部的运行机制。代码如下：

html 复制代码

<div id="app">
    <h1>{{text}}</h1>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    //创建应用程序实例
    const vm = Vue.createApp({
        //返回数据对象
        data() {
            return {
                text: 'Hello World'
            }
        },
        beforeCreate () {
            console.log('beforeCreate');
        },
        created () {
            console.log('created');
        },
        beforeMount () {
            console.log('beforeMount');
        },
        mounted () {
            console.log('mounted');
        },
        beforeUpdate () {
            console.log('beforeUpdate');
        },
        updated () {
            console.log('updated');
        },
        beforeDestroy () {
            console.log('beforeDestroy');
        },
        destroyed () {
            console.log('destroyed');
        }
    }).mount('#app');//装载应用实例的根组件

    setTimeout(()=> {
        vm.text = '延迟更新数据';
    }, 2000);
</script>

在2秒后调用setTimeout()方法，修改text的内容，触发beforeUpdate和updated钩子函数，结果如图所示。

2、插值

创建应用程序实例后，需要通过插值进行数据绑定。数据绑定是Vue.js最核心的一个特性。建立数据绑定后，数据和视图会相互关联，当数据发生变化时，视图会自动进行更新。这样就无须手动获取DOM的值，使代码更加简洁，提高了开发效率。

2.1、文本插值

文本插值是数据绑定最基本的形式，使用的是双大括号标签{``{}}。它会自动将绑定的数据实时显示出来。

使用双大括号标签将文本插入HTML中，代码如下：

js 复制代码

<div id="app">
    <h1>{{message}}</h1>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    //创建应用程序实例
    const vm = Vue.createApp({
        //返回数据对象
        data() {
            return {
                message: 'Hello World!'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

上述代码中，{``{message}}标签将会被相应的数据对象中text属性的值所替代，而且将DOM中的message与data中的message属性进行了绑定。当数据对象中的message属性值发生改变时，文本中的值也会相应地发生变化。

如果只需渲染一次数据，则可以使用单次插值。单次插值即只执行一次插值，在第一次插入文本后，当数据对象中的属性值发生改变时，插入的文本将不会更新。单次插值可以使用v-once指令。示例代码如下：

html 复制代码

<div id="app">
	<h3 v-once>{{text}}</h3>
</div>

上述代码中，在<h3>标签中应用了v-once指令，这样，当修改数据对象中的text属性值时并不会引起DOM的变化。

如果想要显示{{}}标签，而不进行替换，可以使用v-pre指令，通过该指令可以跳过该元素和其子元素的编译过程。

html 复制代码

<div id="app">
    <p v-pre>{{text}}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                text: 'Hello World'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

2.2、插入HTML

双大括号标签会将里面的值当作普通文本来处理。如果要输出真正的HTML内容，需要使用v-html指令。

使用v-html指令将HTML内容插入标签中，代码如下：

html 复制代码

<div id="app">
    <p v-html="text"></p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                text: '<h3 style="color:red">插入HTML</h3>'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

上述代码中，为<p>标签应用v-html指令后，数据对象中text属性的值将作为HTML元素插入<p>标签中。

2.3、绑定属性

双大括号标签不能应用在HTML属性中。如果要为HTML元素绑定属性，则不能直接使用文本插值的方式，而需要使用v-bind指令对属性进行绑定。

使用v-bind指令为HTML元素绑定class属性，代码如下：

html 复制代码

<style type="text/css">
    .title {
        color: #0066FF;
        border: 1px solid #FF0000;
        display: inline-block;
        padding: 10px;
    }
</style>
<div id="app">
    <span v-bind:class="value">书是人类进步的阶梯</span>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                value: 'title'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

上述代码中，为<span>标签应用v-bind指令，将该标签的class属性与数据对象中的value属性进行绑定，这样，数据对象中value属性的值将作为<span>标签的class属性值。

在应用v-bind指令绑定元素属性时，还可以将属性值设置为对象的形式。例如，将代码修改如下：

html 复制代码

<div id="app">
    <span v-bind:class="{title: value}">书是人类进步的阶梯</span>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                value: true
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

上述代码中，应用v-bind指令将标签的class属性与数据对象中的value属性进行绑定，并判断title的值，如果title的值为true则使用title类的样式，否则不使用该类。

为HTML元素绑定属性的操作比较频繁。为了防止经常使用v-bind指令带来的烦琐，Vue.js为该指令提供了一种简写形式":"。例如，为"明日学院"超链接设置URL的完整格式如下：

html 复制代码

 <a v-bind:href="url">明日学院</a>

简写形式如下：

js 复制代码

 <a :href="url">明日学院</a>

2.4、使用表达式

在双大括号标签中进行数据绑定时，标签中可以是一个JavaScript表达式。这个表达式可以是常量或者变量，也可以是常量、变量、运算符组合而成的式子。表达式的值是其运算后的结果。示例代码如下：

js 复制代码

<div id="app">
    {{m * n}}<br>
    {{str.toUpperCase()}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                m: 10,
                n: 20,
                str: 'Vue.js'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

每个数据绑定中只能包含单个表达式，而不能使用JavaScript语句。

示例：获取QQ邮箱中的QQ号

js 复制代码

<div id="app">
    邮箱地址：{{email}}<br>
    QQ号码：{{email.substr(0, email.indexOf('@'))}}
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                email: '1231225@qq.com'
            }
        }
    }).mount('#app');//装载应用实例的根组件
</script>

3、指令

指令是Vue.js中的重要特性之一，它是带有v-前缀的特殊属性。从写法上来说，指令的值限定为绑定表达式。指令用于在绑定表达式的值发生改变时，将这种数据的变化应用到DOM上。当数据变化时，指令会根据指定的操作对DOM进行修改，这样就不需要手动管理DOM的变化和状态，提高了程序的可维护性。示例代码如下：

html 复制代码

 <p v-if="show">欢迎访问明日学院</p>

上述代码中，v-if指令将根据表达式show的值来确定是否插入p元素。如果show的值为true，则插入p元素，如果show的值为false，则移除p元素。还有一些指令的语法略有不同，它们能够接收参数和修饰符。下面分别进行介绍。

3.1、参数

一些指令能够接收一个参数，例如v-bind指令、v-on指令。该参数位于指令和表达式之间，并用冒号分隔。v-bind指令的示例代码如下：

html 复制代码

 <img v-bind:src="imageSrc">

上述代码中，src即为参数，通过v-bind指令将img元素的src属性与表达式imageSrc的值进行绑定。

v-on指令的示例代码如下：

html 复制代码

 <button v-on:click="search">搜索</button>

上述代码中，click即为参数，该参数为监听的事件名称。当触发"搜索"按钮的click事件时会调用search()方法。

3.2、动态参数

从Vue 2.6.0版本开始，指令的参数可以是动态参数，即将中括号括起来的表达式作为指令的参数。语法如下：

js 复制代码

指令:[表达式]

使用动态参数的示例代码如下：

html 复制代码

 <img v-bind:[attr]="imageSrc">

上述代码中，attr会作为一个表达式进行动态求值，将计算结果作为最终的参数使用。例如，在组件实例的数据对象中有一个attr属性，其值为src，那么上述代码中的绑定等价于v-bind:src。

3.3、修饰符

修饰符是在参数后面，以半角句点符号指明的特殊后缀。例如，.prevent修饰符用于调用event.preventDefault()方法。示例代码如下：

html 复制代码

 <form v-on:submit.prevent="onSubmit"></form>

上述代码中，当提交表单时会调用event.preventDefault()方法用于阻止浏览器的默认行为。