- 1、本文档共23页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
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
您可能关注的文档
- 《Vue 3基础入门》教学大纲.doc
- 《Vue 3基础入门》课件 第九章 Vue CLI 项目部署.pptx
- 《Vue 3基础入门》课件 第六章 组件复用.pptx
- 《Vue 3基础入门》课件 第七章 vue-router.pptx
- 《Vue 3基础入门》课件 第三章Vue 3基本指令.pptx
- 《Vue 3基础入门》课件 第十章 Vuex.pptx
- 《Vue 3基础入门》课件 第四章 Vue 3组件.pptx
- 《Vue 3基础入门》课件 第五章 样式绑定.pptx
- 《Vue 3基础入门》课件 第一章 vue 3简介 .pptx
- 机器人学及其应用导论 课件 第二章 机器人结构与驱动.pptx
最近下载
- 北京百师联盟信息技术研究院.doc
- 2.6《观察与比较》教学设计-2024-2025学年一年级上册科学教科版.docx VIP
- 人教版道德与法治二年级上册《这些是大家的》课件.pptx
- 中国特色大国外交和推动构建人类命运共同体.pptx
- 《产品质量鉴定程序规范 总则》.doc VIP
- 七年级数学(沪教版)上册课件-【第2课时 添括号】.pptx
- The Catcher int heRye麦田守望者英文版.doc
- 农药登记残留试验待测残留物和植物源性食品膳食风险评估残留物目录(2020版).docx
- 甲醇羰基化法制备醋酸.pptx
- 超星网课尔雅《走近核科学技术》超星尔雅答案2023章节测验答案.pdf
文档评论(0)