Vue.js前端开发实战全套教学课件.pptx

Vue.js简介;Vue.js概述 ;Vue.js概述;什么是Vue.js;Vue.js的安装;直接下载并使用<script>标签引入;使用CDN方法;开发工具WebStorm简介;创建第一个Vue实例;总结;基础特性;Vue实例及选项;Vue实例及选项;Vue实例及选项;挂载元素;数据;数据;数据;方法;生命周期钩子函数;数据绑定;插值;插入HTML; 使用v-bind指令为HTML元素绑定class属性。; 使用v-bind指令的简写形式为图片绑定属性。;表达式; 明日科技的企业QQ邮箱地址为“4006751066@”，在双大括号标签中应用表达式获取该QQ邮箱地址中的QQ号。;过滤器;过滤器;过滤器;过滤器;过滤器;<p v-if="show">mingrisoft</p>;总结;条件判断与列表渲染;条件判断;条件判断;v-if指令;在<template>元素中使用v-if;v-else指令; 应用v-if指令和v-else指令判断2019年2月份的天数。; 将某学校的学生成绩转化为不同等级，划分标准如下： ①“优秀”，大于等于90分； ②“良好”，大于等于75分； ③“及格”，大于等于60分； ④“不及格”，小于60分。 假设刘星的考试成绩是85分，输出该成绩对应的等级。; 通过单击按钮切换图片的显示和隐藏。;v-if和v-show的比较;列表渲染;item in items;(item,index) in items; 应用v-for指令输出数组中的省份、省会以及旅游景点信息。; 在<template>元素中使用v-for指令，实现输出网站导航菜单的功能。;数组更新检测; 将2018年内地电影票房排行榜前十名的影片名称和票房定义在数组中，对数组按影片票房进行降序排序，将排序后的影片排名、影片名称和票房输出在页面中。;数组更新检测;数组更新检测;数组更新检测;应用v-for指令遍历对象;(value,key) in object;(value,key,index) in object;向对象中添加属性;<div id="box"> <ul> <li v-for="(value,key) in object">{{key}} : {{value}}</li> </ul> </div> <script type="text/javascript"> var demo = new Vue({ el : '#box', data : { object : { name : '张三', sex : '男', age : 25 } } }); demo.object = Object.assign({},demo.object,{ interest : '唱歌', address : '长春市' }); </script>;<div id="example"> <div v-for="n in 5">员工第{{n}}年工龄工资为{{n*salary}}元</div> </div> <script type="text/javascript"> var exam = new Vue({ el:'#example', data:{ salary:30 } }) </script>;应用v-for指令遍历整数;总结;计算属性与监听属性;计算属性;计算属性;计算属性;什么是计算属性;什么是计算属性;getter和setter;<div id="example"><p>姓名：{{fullname}}</p></div> <script type="text/javascript"> var exam = new Vue({ el:'#example', data:{ surname : '韦',name : '小宝'}, computed : { fullname : { get : function(){ return this.surname