Vue.js基础与应用开发实战(微课版)教材配套课件完整版电子教案.pptx

Vue.js基础与应用开发实战(微课版)教材配套课件完整版电子教案.pptx

Vue.js基础与应用开发实战(微课版);【实例1-2】网页中输出Vue变量的值;【操作要求】 (1)引入Vue库。 (2)定义唯一根元素div。 (3)使用两对花括号{{}}绑定Vue对象中的变量,在网页中输出 Vue变量message的值,其值为字符串“Hello Vue”。 (4)创建Vue的对象,并把数据绑定到创建好的根元素div。 (5)创建Vue对象,通过el与div元素绑定。 (6)定义data属性,在该属性定义message变量,在该变量中存放 Vue对象中绑定的数据。;【实现过程】 使用HTML编辑器Dreamweaver创建网页0102.html,实现要求的功能,并在网页中输出文本内容“Hello Vue”,该网页的代码如表1-3所示。;表1-3 网页0102.html的代码;浏览网页0102.html的结果如图1-3所示。;从表1-3可以看出,应用Vue技术输出变量message的值,涉及以下3个方面,并且这3个方面缺一不可: (1)引入Vue库引入vue.js文件后,就会得到一个Vue构造器,用来创建Vue实例。;(2)定义唯一根元素div

id值为app的元素是Vue实例控制的元素。;(3)创建Vue实例,并把数据绑定到前面创建好的根元素div;vm表示Vue实例对象,el表示当前vm实例要控制的页面区域,即id为app的元素;data属性用来存放el中要用到的数据,message变量存储的数据为“Hello Vue”,该变量存储的数据通过“{{ }}”插值表达式渲染到页面,对应的代码如下:

;快乐学习!高效学习! 祝学习进步!;1.4.3 Vue实例对象的数据选项;一般地,当模板内容较简单时,使用data选项配合表达式即可。涉及到复杂逻辑时,则需要用到methods、computed、watch等方法。 1.data data是Vue实例的数据对象,Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化。简单来说,data应该只能是数据,不推荐观察拥有状态行为的对象。一旦观察过,就无法在根数据对象上添加响应式属性。因此??荐在创建实例之前,就声明所有的根级响应式属性。;【实例1-5】通过vm.$data访问Vue实例的数据对象 【操作要求】 创建Vue实例,通过vm.$data访问Vue实例的数据对象,并使用不同方法访问Vue实例的数据对象。;【实现过程】 创建网页0105.html,编写以下代码实现要求的功能。

;6.watch Vue提供了一种通用的方式(watch函数)来观察和响应Vue实例上的一个表达式或者一个函数计算结果的数据变化,回调函数得到的参数为新值和原值。表达式只接受简单的键路径,对于更复杂的表达式,用一个函数取代。 watch函数是一个对象,其键是需要观察的表达式或函数,值是对应回调函数,值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性。 在变更(不是替换)对象或数组时,原值将与新值相同,因为它们的引用指向同一个对象/数组。Vue不会保留变更之前值的副本。;【实例1-8】应用Vue的watch方法 【操作要求】 应用Vue的watch方法输出与观察变量的新值与原值。 【实现过程】 创建网页0108.html,编写以下代码应用Vue的watch方法输出与观察变量的新值与原值。;

;快乐学习!高效学习! 祝学习进步!;1.4.4 Vue的DOM选项;文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口,它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和档的风格。DOM是一种基于树的一套操作页面元素的API,它要求在处理过程中整个文档都表示在存储器中。 DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作。DOM又称为文档树模型,一个网页可以称为文档,网页中的所有内容都是节点,网页中的标签称为元素,属性是指标签的属性。;1.el 提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标,可以是CSS选择器,也可以是一个HTMLElement实例。在实例挂载之后,元素可以用vm.$el的形式进行访问。el只在使用new创建实例时生效。 如果在实例化时存在el这个选项,实例将立即进入编译过程,否则,需要显式调用vm.$mount()手动开启编译。;2.template 一个字符串模板作为Vue实例的标识使用,模板将会替换挂载的元素,挂载元素的内容都将被忽略,除非模板的内容有分发插槽。 如果值以#开始,则它将被用作选择符,并使用匹配元素的innerHTML作为模板。常用的技巧是用上面的代码中,当x的值更新到5时,触发unwatch(),来取消观察。单击按钮时,x的值仍然会变化,但是不再触发watch的回调函数。;2.vm.$set( target, propertyName/index, value ) 返回设置的值,这是全局Vue.set的别名,参考Vue.set方法。 3.vm.$get( expression ) 为Vue实例传递一个表达式来获得结果,如果表达式抛出错误,该错误会被截获并返回undefined。;4.vm.$add( key, value ) 为Vue实例及其$data对象添加一个顶层属性。由于ES5的限制,Vue无法侦测到对象中属性的增加或者删除,所以当需要动态添加/删除属性的时候使用此方法和vm.$delete,但该方法要谨慎使用,因为该方法会使得当前vm对所有watcher进行一次脏检查。 5.vm.$delete( target, propertyName/index ) 这是全局Vue.delete的别名,参考Vue.delete方法。;6.vm.$eval( expression ) 对一个表达式求值,该表达式可以包含过滤器。 7.vm.$mount( [elementOrSelector] ) 返回vm实例自身,如果Vue实例在实例化时没有收到el选项,则它处于“未挂载”状态,没有关联的DOM元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。 如果没有提供elementOrSelector参数,模板将被渲染为文档之外的的元素,并且必须使用原生DOM API把它插入文档中。 这个方法返回实例自身,因而可以链式调用其它实例方法。;8.vm.$forceUpdate() 迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。 9.vm.$nextTick( [callback] ) 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注