《1-1【实例1-2】网页中输出Vue变量的值ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《1-1【实例1-2】网页中输出Vue变量的值ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（11页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1-1【实例1-2】网页中输出Vue 变量的值教学课件 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创 建 网 页
2、0102.html，实现要求的功能，并在网页中输出文本内容“Hello Vue”，该网页的代码如表1-3所示。表1-3 网页0102.html的代码序号 代码01020304050607080910111213141516171819202122232425网页中输出Vue变量的值 message/创建Vue的对象，并把数据绑定到前面创建好的根元素div var vm=new Vue(/创建Vue对象。el:#app,/el属性：通过el与div元素绑定，#app是id选择器 data:/data 属性:是Vue对象中绑定的数据 message:Hello Vue/message 自定义的变量
3、)浏览网页0102.html的结果如图1-3所示。图1-3 网页0102.html的浏览结果网页0102.html的输出内容与网页0101.html相同，但实现方式不同，网页0101.html使用JavaScript实现的，网页0102.html使用Vue实现的。从表1-3可以看出，应用Vue技术输出变量message的值，涉及以下3个方面，并且这3个方面缺一不可：（1）引入Vue库引入vue.js文件后，就会得到一个Vue构造器，用来创建Vue实例。（2）定义唯一根元素div message id值为app的元素是Vue实例控制的元素。（3）创建Vue实例，并把数据绑定到前面创建好的根元素div var vm=new Vue(el:#app,data:message:Hello Vue)vm表示Vue实例对象，el表示当前vm实例要控制的页面区域，即id为app的元素；data属性用来存放el中要用 到 的 数 据，message变 量 存 储 的 数 据 为“Hello Vue”，该变量存储的数据通过“”插值表达式渲染到页面，对应的代码如下：message 快乐学习！高效学习！祝学习进步！