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更新循环之后执行。在修改数据之后立即使用。