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库 script src=vue.js/script 引入vue.js文件后，就会得到一个Vue构造器，用来创建Vue实例。;（2）定义唯一根元素div div id=app p{{ message }}/p /div id值为app的元素是Vue实例控制的元素。;（3）创建Vue实例，并把数据绑定到前面创建好的根元素div script var vm=new Vue({ el: #app, data: { message: Hello Vue } }) /script;vm表示Vue实例对象，el表示当前vm实例要控制的页面区域，即id为app的元素；data属性用来存放el中要用到的数据，message变量存储的数据为“Hello Vue”，该变量存储的数据通过“{{ }}”插值表达式渲染到页面，对应的代码如下： div id=app p{{ message }}/p /div;快乐学习！高效学习！ 祝学习进步！;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，编写以下代码实现要求的功能。 div id=app {{ message }} /div script var vm=new Vue({ el: #app, data: { message: 请登录! } }) console.log(vm.$data); console.log(vm.message); console.log(vm.$data.message); /script;在Chrome浏览器中浏览网页0105.html，打开浏览器控制台，切换到【Console】选项卡，可以看到如图1-6所示的输出结果。;2．props props可以是数组或对象，用于接收来自父组件的数据。 例如： Vponent(props-demo-simple, { props: [size, myMessage] }) props可以是对象，对象允许配置高级选项，例如类型检测、自定义验证和设置默认值。;2．props 用户可以基于对象的语法使用以下选项： （1）type：可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数或者上述内容组成的数组。会检查一个prop是否为给定的类型，否则抛出警告。 （2）default：为该prop指定一个默认值。如果该prop没有被传入值，则换用这个默认值。对象或数组的默认值必须从一个工厂函数返回。;2．props （3）required：定义该prop是否是必