Vue3——Vue实例与数据绑定

Vue实例与数据绑定1、应用程序实例及选项1.1、数据1.2、方法1.3、生命周期钩子2、插值2.1、文本插值2.2、插入HTML2.3、绑定属性2.4、使用表达式3、指令3.1、参数3.2、动态参数3.3、修饰符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选项中定义一个数据。代码如下dividapph1{{message}}/h1/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascript//创建应用程序实例constvmVue.createApp({//返回数据对象data(){return{message:Hello World!}}}).mount(#app);//装载应用实例的根组件/script上述代码中创建的根组件实例被赋值给变量vm在实际开发中并不要求一定要将根组件实例赋值给某个变量。1.2、方法在创建的应用程序实例中通过methods选项可以定义方法。应用程序实例本身也会代理methods选项中的所有方法因此也可以像访问data数据那样来调用方法。例如在根组件实例的methods选项中定义一个showInfo()方法代码如下div idapph1{{showInfo()}}/h1/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascript//创建应用程序实例constvmVue.createApp({//返回数据对象data(){return{a:Hello,b: World}},methods:{showInfo:function(){returnthis.athis.b;}}}).mount(#app);//装载应用实例的根组件/script1.3、生命周期钩子每个应用程序实例在创建时都有一系列的初始化步骤。例如创建数据绑定、编译模板、将实例挂载到DOM并在数据变化时触发DOM更新、销毁实例等。在这个过程中会运行一些叫作生命周期钩子的函数通过这些钩子函数可以定义业务逻辑。应用程序实例中几个主要的生命周期钩子函数的说明如下。beforeCreate在实例初始化之后且数据观测和事件监听器配置之前调用。created在实例创建之后进行调用此时尚未开始DOM编译。在需要初始化处理一些数据时会比较有用。beforeMount在挂载开始之前进行调用此时DOM还无法操作。mounted在DOM文档渲染完毕之后进行调用。相当于JavaScript中的window.onload()方法。beforeUpdate在数据更新时进行调用适合在更新之前访问现有的DOM如手动移除已添加的事件监听器。updated在数据更改导致的虚拟DOM被重新渲染时进行调用。beforeDestroy在销毁实例之前进行调用此时实例仍然有效。此时可以解绑一些使用addEventListener监听的事件等。destroyed在实例被销毁之后进行调用下面通过一个示例来了解Vue.js内部的运行机制。代码如下dividapph1{{text}}/h1/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascript//创建应用程序实例constvmVue.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 idapph1{{message}}/h1/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascript//创建应用程序实例constvmVue.createApp({//返回数据对象data(){return{message:Hello World!}}}).mount(#app);//装载应用实例的根组件/script上述代码中{{message}}标签将会被相应的数据对象中text属性的值所替代而且将DOM中的message与data中的message属性进行了绑定。当数据对象中的message属性值发生改变时文本中的值也会相应地发生变化。如果只需渲染一次数据则可以使用单次插值。单次插值即只执行一次插值在第一次插入文本后当数据对象中的属性值发生改变时插入的文本将不会更新。单次插值可以使用v-once指令。示例代码如下dividapph3v-once{{text}}/h3/div上述代码中在h3标签中应用了v-once指令这样当修改数据对象中的text属性值时并不会引起DOM的变化。如果想要显示{{}}标签而不进行替换可以使用v-pre指令通过该指令可以跳过该元素和其子元素的编译过程。dividapppv-pre{{text}}/p/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{text:Hello World}}}).mount(#app);//装载应用实例的根组件/script2.2、插入HTML双大括号标签会将里面的值当作普通文本来处理。如果要输出真正的HTML内容需要使用v-html指令。使用v-html指令将HTML内容插入标签中代码如下dividapppv-htmltext/p/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{text:h3 stylecolor:red插入HTML/h3}}}).mount(#app);//装载应用实例的根组件/script上述代码中为p标签应用v-html指令后数据对象中text属性的值将作为HTML元素插入p标签中。2.3、绑定属性双大括号标签不能应用在HTML属性中。如果要为HTML元素绑定属性则不能直接使用文本插值的方式而需要使用v-bind指令对属性进行绑定。使用v-bind指令为HTML元素绑定class属性代码如下styletypetext/css.title{color:#0066FF;border:1px solid #FF0000;display:inline-block;padding:10px;}/styledividappspanv-bind:classvalue书是人类进步的阶梯/span/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{value:title}}}).mount(#app);//装载应用实例的根组件/script上述代码中为span标签应用v-bind指令将该标签的class属性与数据对象中的value属性进行绑定这样数据对象中value属性的值将作为span标签的class属性值。在应用v-bind指令绑定元素属性时还可以将属性值设置为对象的形式。例如将代码修改如下dividappspanv-bind:class{title: value}书是人类进步的阶梯/span/divscriptsrchttps://unpkg.com/vue3/dist/vue.global.js/scriptscripttypetext/javascriptconstvmVue.createApp({data(){return{value:true}}}).mount(#app);//装载应用实例的根组件/script上述代码中应用v-bind指令将标签的class属性与数据对象中的value属性进行绑定并判断title的值如果title的值为true则使用title类的样式否则不使用该类。为HTML元素绑定属性的操作比较频繁。为了防止经常使用v-bind指令带来的烦琐Vue.js为该指令提供了一种简写形式“:”​。例如为“明日学院”超链接设置URL的完整格式如下av-bind:hrefurl明日学院/a简写形式如下a:hrefurl明日学院/a2.4、使用表达式在双大括号标签中进行数据绑定时标签中可以是一个JavaScript表达式。这个表达式可以是常量或者变量也可以是常量、变量、运算符组合而成的式子。表达式的值是其运算后的结果。示例代码如下div idapp{{m*n}}br{{str.toUpperCase()}}/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascriptconstvmVue.createApp({data(){return{m:10,n:20,str:Vue.js}}}).mount(#app);//装载应用实例的根组件/script每个数据绑定中只能包含单个表达式而不能使用JavaScript语句。示例获取QQ邮箱中的QQ号div idapp邮箱地址{{email}}brQQ号码{{email.substr(0,email.indexOf())}}/divscript srchttps://unpkg.com/vue3/dist/vue.global.js/scriptscript typetext/javascriptconstvmVue.createApp({data(){return{email:1231225qq.com}}}).mount(#app);//装载应用实例的根组件/script3、指令指令是Vue.js中的重要特性之一它是带有v-前缀的特殊属性。从写法上来说指令的值限定为绑定表达式。指令用于在绑定表达式的值发生改变时将这种数据的变化应用到DOM上。当数据变化时指令会根据指定的操作对DOM进行修改这样就不需要手动管理DOM的变化和状态提高了程序的可维护性。示例代码如下pv-ifshow欢迎访问明日学院/p上述代码中v-if指令将根据表达式show的值来确定是否插入p元素。如果show的值为true则插入p元素如果show的值为false则移除p元素。还有一些指令的语法略有不同它们能够接收参数和修饰符。下面分别进行介绍。3.1、参数一些指令能够接收一个参数例如v-bind指令、v-on指令。该参数位于指令和表达式之间并用冒号分隔。v-bind指令的示例代码如下imgv-bind:srcimageSrc上述代码中src即为参数通过v-bind指令将img元素的src属性与表达式imageSrc的值进行绑定。v-on指令的示例代码如下buttonv-on:clicksearch搜索/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.preventonSubmit/form上述代码中当提交表单时会调用event.preventDefault()方法用于阻止浏览器的默认行为。