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

HelloWord与Vue3的基础特性Contents目录HelloWord示例01Vue3组件的生命周期02数据绑定0304案例01HelloWord示例PARTHelloWord示例<divid='app'><!--简单文本插值--><p>{{message}}</p><!--JavaScript表达式--><p>{{message.toUpperCase()}}</p><!--简单文本插值--><p>{{spanHTML}}</p><!--输出HTML--><pv-html="spanHTML"></p></div>HelloWord示例<!--绑定数据--><av-bind:href="url">Vue.js</a></div><!--某些情况下可能需要翻墙才能访问--><scriptsrc="/vue@next"></script><script>constRootComponent={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└─TodoListStatistics02Vue3组件的生命周期PART认识生命周期Vue3组件的生命周期:创建实例初始化数据编译模板挂载DOM渲染更新到最终卸载实例钩子函数Vue3提供了以下8个钩子函数:beforeCreate（创建前）created（创建后）beforeMount（载入前）mounted（载入后）beforeUpdate（更新前）updated（更新后）beforeUnmount（卸载前）unmounted（销毁后）03数据绑定PART文本插值数据绑定最常见的形式是使用Mustache语法（双大括号）的文本插值。代码如下：<span>Message:{{msg}}</span><script>constapp={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指令，代码如下：<p>Usingmustaches:{{rawHtml}}</p><p>Usingv-htmldirective:<spanv-html="rawHtml"></span></p>Mustache语法不能作用在HTML属性上，应该使用v-bind指令，代码如下：

<divv-bind:id="dynamicId"></div>如果isButtonDisabled的值是null、undefined或false，则disabled属性甚至不会被包含在渲染出来的<button>元素中，代码如下：<buttonv-bind:disabled="isButtonDisabled">Button</button>使用JavaScript表达式实际上对于所有的数据绑定，Vue3都提供了完全的JavaScript表达式支持，这些表达式会在所属实例的作用域下作为JavaScript被解析，每个绑定都只能包含单个表达式，

代码如下：{{number+1}}{{ok?'YES':'NO'}}{{message.split('').reverse().join('')}}<divv-bind:id="'list-'+id"></div>04案例PART利用表单实现简单登录页面下面构建一个简单的登录页面核心代码<script>constapp={data(){return{title:'登

录',accountTitle:'用户名',passwordTitle:'密码',rememberTitle:'记住我',ext:'忘记密码？'};}};constvm=Vue.createApp(app).mount('#app');</script>利用过滤器过滤指定字符在实际的前端工程中，经常需要开发者屏蔽一些特殊字符。假设有这样一个页面，其中包含一个输入框，当用户在输入框中输入内容时，页面会实时显示用户的输入内容，并将其中的所有小写字母转化为大写字母，相当于对字符串进行格式化。利用过滤器过滤指定字符使用Vue3中的计算属性来实现对输入内容的格式化处理，具体步骤如下：1、在Vue3实例中定义一个数据属性inputText来保存用户输入的内容。2、使用v-model指令将inputText与输入框绑定，实现输入内容的实时更新。3、使用计算属性将inputText中的所有小写字母转化为大写字母，并将格式化后的内容作为计算属性的返回值。4、使用Mustache语法将格式化后的内容渲染到页面中。利用过滤器过滤指定字符代码如下：

<divid='app'><divclass="translate-main"><divclass="trans-left"><divclass="trans-input-wrap"><divclass="input-wrap"><divclass="textarea-wrap"><textareav-model="notedata"class="textarea"placeholder="输入内容"></textarea></div></div></div></div><divclass="trans-right"><divclass="output-wrapoutput-blank">{{toUpperCase}}</div></div></div></div>利用过滤器过滤指定字符代码如下：<script>constapp={data(){return{notedata:null,};},computed:{toUpperCase(){