《Vue 3基础入门》课件 第二章 Hello Word与Vue 3的基础特性 .pptx

HelloWord与Vue3的基础特性

Contents目录HelloWord示例01Vue3组件的生命周期02数据绑定0304案例

01HelloWord示例PART

HelloWord示例divid=app!--简单文本插值--p{{message}}/p!--JavaScript表达式--p{{message.toUpperCase()}}/p!--简单文本插值--p{{spanHTML}}/p!--输出HTML--pv-html=spanHTML/p/div

HelloWord示例!--绑定数据--av-bind:href=urlVue.js/a/div!--某些情况下可能需要翻墙才能访问--scriptsrc=/vue@next/scriptscriptconstRootComponent={data(){return{message:‘HelloVue.js’,url:‘/’,spanHTML:spanstyle=color:red这是一段红色的文字/span};}};constvm=Vue.createApp(RootComponent).mount(‘#app’);/script/body?/html

HelloWord示例这段代码演示了Vue3的最基本的使用方法，实现了数据的绑定。在data()函数中返回的值将在页面中显示。其运行效果如下所示。

HelloWord示例典型的项目的组件树可能如下所示：RootComponent└─TodoList├─TodoItem│├─TodoButtonDelete│└─TodoButtonEdit└─TodoListFooter├─TodosButtonClear└─TodoListStatistics

02Vue3组件的生命周期PART

认识生命周期Vue3组件的生命周期:创建实例初始化数据编译模板挂载DOM渲染更新到最终卸载实例

钩子函数Vue3提供了以下8个钩子函数:beforeCreate（创建前）created（创建后）beforeMount（载入前）mounted（载入后）beforeUpdate（更新前）updated（更新后）beforeUnmount（卸载前）unmounted（销毁后）

03数据绑定PART

文本插值数据绑定最常见的形式是使用Mustache语法（双大括号）的文本插值。代码如下：spanMessage:{{msg}}/spanscriptconstapp={data(){return{msg:HelloVue.js};}};constvm=Vue.createApp(app).mount(#app);/script

文本插值Mustache语法标签?会被替换为相应数据对象中msg属性的值，如果绑定的数据对象上的msg属性的值发生更改，插值处的内容会自动更新，将上述代码的页面在浏览器中打开，并通过按F12键打开开发者工具，就能够看到如图2.3所示的内容。

文本插值在控制台中，输入vm.msg=“welcome”，然后按回车键，可以看到页面中的文字立刻进行了更新，如图2.4所示。另外，通过使用v-once指令，开发者也可以实现一次性的插值，即当数据改变时，插值处的内容不会更新。spanv-once这个将不会改变:{{msg}}/span

插入原始HTML如果要绑定的数据是HTML代码，，需要使用v-html指令，代码如下：pUsingmustaches:{{rawHtml}}/ppUsingv-htmldirective:spanv-html=rawHtml/span/pMustache语法不能作用在HTML属性上，应该使用v-bind指令，代码如下：divv-bind:id=dynamicId/div如果isButtonDisabled的值是null、undefined或false，则disabled属性甚至不会被包含在渲染出来的button元素中，代码如下：buttonv-bind:disabled=isButtonDisabledButton/button

使用JavaScrip