Vue3——Vue实例与数据绑定

1、应用程序实例及选项

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

Vue.createApp(App)

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

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

1.1、数据

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

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

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

1.2、方法

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

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

<div id="app"><h1>{{showInfo()}}</h1></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script type="text/javascript">//创建应用程序实例constvm=Vue.createApp({//返回数据对象data(){return{a:'Hello',b:' World'}},methods:{showInfo:function(){returnthis.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内部的运行机制。代码如下：

<divid="app"><h1>{{text}}</h1></div><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script><scripttype="text/javascript">//创建应用程序实例constvm=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中，代码如下：

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

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

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

<divid="app"><h3v-once>{{text}}</h3></div>

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

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

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

2.2、插入HTML

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

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

<divid="app"><pv-html="text"></p></div><scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script><scripttype="text/javascript">constvm=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属性，代码如下：

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

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

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

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

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

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

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

简写形式如下：

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

2.4、使用表达式

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

<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">constvm=Vue.createApp({data(){return{m:10,n:20,str:'Vue.js'}}}).mount('#app');//装载应用实例的根组件</script>

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

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

<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">constvm=Vue.createApp({data(){return{email:'1231225@qq.com'}}}).mount('#app');//装载应用实例的根组件</script>

3、指令

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

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

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

3.1、参数

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

<imgv-bind:src="imageSrc">

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

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

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

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

3.2、动态参数

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

指令:[表达式]

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

<imgv-bind:[attr]="imageSrc">

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

3.3、修饰符

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

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

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