1-3 1.4.4Vue的DOM选项ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《1-3 1.4.4Vue的DOM选项ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《1-3 1.4.4Vue的DOM选项ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1-3 1.4.4 Vue的DOM选项教学课件 Vue.js基础与应用开发实战（微课版）1.4.4 Vue的DOM选项文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口，它是一种与平台和语言无关的应用程序接口（API），它可以动态地访问程序和脚本，更新其内容、结构和www文档的风格。DOM是一种基于树的一套操作页面元素的API，它要求在处理过程中整个文档都表示在存储器中。DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。DOM又称为文档树模型，一个网页可以称为文档，网页中的所有内容都是节点，

2、网页中的标签称为元素，属性是指标签的属性。1el提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标，可以是CSS选择器，也可以是一个HTMLElement实例。在实例挂载之后，元素可以用vm.$el的形式进行访问。el只在使用new创建实例时生效。如果在实例化时存在el这个选项，实例将立即进入编译过程，否则，需要显式调用vm.$mount()手动开启编译。2template一个字符串模板作为Vue实例的标识使用，模板将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽。如果值以#开始，则它将被用作选择符，并使用匹配元素的innerHTML作 为 模 板。常 用 的 技

3、 巧 是 用 包含模板。出于安全考虑，应该只使用信任的Vue模板，避免使用其他人生成的内容作为模板。如果Vue选项中包含渲染函数，该模板将被忽略。3render字符串模板的代替方案，充分发挥JavaScript最大的编程能力。该渲染函数接收一个createElement方法作为第一个参数用来创建VNode。如果组件是一个函数组件，渲染函数还会接收一个额外的context参数，为没有实例的函数组件提供上下文信息。Vue选项中的render函数若存在，则Vue构造函数不会从template选项或通过el选项指定的挂载元素中提取出的HTML模板编译渲染函数。4renderErrorrenderError只在开发者环境下工作。当render函数遭遇错误时，提供的另外一种渲染输出，其错误信息将会作为第二个参数传递到renderError。这个功能配合hot-reload非常实用。例如：new Vue(render(h)throw new Error(oops),renderError(h,err)return h(pre,style:color:red,err.stack).$mount(#app)快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！