项目4 Vue内置指令

3.1使用Vue框架实现跑马灯效果3.2使用Vue框架实现购物车效果使用Vue内置指令twotasksV-on指令内容CONTENTSV-on的基本使用1语法糖2事件传参31.v-on的基本使用举例：监听按钮的点击事件按钮1，使用了v-on:click=“counter++”（内联事件处理）按钮2，将事件指向一个在methods中定义的函数（方法事件处理）注：v-on也有对应的语法糖：v-on:click可以写成@click2.语法糖3.事件传参当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么调用方法后的()可以不添加。情况二：如果方法本身有一个参数，调用方法后加（）但不传参，得到的是undefine。情况三：如果方法本身有一个参数，调用方法后不加（），那么会默认将原生事件event参数传递进去。情况四：如果需要同时传入某个参数，又同时需要event时，可以通过$event传入事件。3.事件传参$event：指当前触发的是什么事件（鼠标事件，键盘事件等）event.target：则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该DOM元素可以通过“event.target.属性”来获取该元素的属性值总结v-on的基本使用1语法糖2事件的传参3总结事件修饰符内容CONTENTS.stop阻止事件冒泡1.prevent阻止默认事件2.once事件触发一次3.caputer事件捕捉4.self自身触发事件5事件修饰符事件修饰符是自定义事件行为，配合v-on指令来使用，写在事件之后，用”.”符号连接修饰符说明.stop阻止事件冒泡.prevent阻止默认事件行为.capture事件捕获.self将事件绑定到自身，只有自身才能触发.once事件只触发一次1.stop事件修饰符默认的事件传递方式是冒泡;事件流传播的顺序应该是从发生事件的元素节点到DOM树的根节点；使用.stop修饰符阻止事件冒泡行为。2.prevent事件修饰符在实际开发中，如果<a>标签的默认行为与事件发生冲突，此时可以使用.prevent修饰符来阻止<a>标签的默认行为。3.once事件修饰符.once事件修饰符：只触发一次事件处理函数4.capture事件修饰符事件捕获的执行顺序是由外部结构向内部结构执行，与事件冒泡的顺序相反。capture修饰符用于为元素添加事件监听时使用事件捕获模式。5.self事件修饰符.self事件修饰符：用来实现只有DOM元素本身会触发事件。总结.stop事件修饰符1.prevent事件修饰符2.once事件修饰符3总结.capture事件修饰符4.self事件修饰符5使用Vue框架实现跑马灯效果任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用Vue框架实现跑马灯效果。1.提出任务1.为两个按钮绑定点击事件；2.定义事件处理方法；字符的截取与拼接；定时器的使用。任务要点：案例效果：2.分析任务实践使用Vue框架实现跑马灯效果3.实施任务4.归纳总结总结

substring(start[,end])方法：

截取从start位置到end位置之间的一个子字符串，不包括end位置上的字符。

箭头函数()=>箭头函数内部可以解决this指向的问题；箭头函数内部的this永远和外部的this保持一致箭头函数外部的this指向的是VM实例，箭头函数内部的this也指向VM实例。3.1使用Vue框架实现跑马灯效果3.2使用Vue框架实现购物车效果使用Vue内置指令twotasksV-text和v-html内容CONTENTSv-text指令1v-html指令2v-once指令31.v-text指令v-text作用和Mustache语法(也就是双大括号{{}})。比较相似：都是用于将数据显示在界面中，但是v-text不如{{}}灵活，v-text会把标签里的原有内容覆盖掉，所以不推荐使用。不能解析html标记v-text通常情况下，接受一个string类型。2.v-html指令某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}}来输出，会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。如果我们希望解析出HTML展示可以使用v-html指令该指令后面往往会跟上一个string类型会将string的html解析出来并且进行渲染2.v-html指令通过使用与不使用v-html效果对比，可以看到使用v-html后，会对html文本进行解析，而不会直接当成字符串处理，相当于JS中的innerHtml属性。3.v-once指令在某些情况下，不希望界面随意的跟随改变，这时候，我们就可以使用一个Vue的指令v-once:

该指令后面不需要跟任何表达式该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。总结v-text指令1v-html指令2v-once指令3总结条件渲染内容CONTENTSv-if指令12v-else指令3v-show指令1.v-if指令v-if指令可以实现条件渲染这个指令与JavaScript的条件语句if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件v-if的原理：v-if后面的条件为true时,会渲染对应的元素及其子元素；v-if后面的条件为false时，不会渲染对应的元素以及其子元素。简单的案例演示：2.v-show指令v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：v-if和v-show对比v-if当条件为false时，不会有对应的元素在DOM中。v-show当条件为false时，元素还存在，仅仅是将元素的display属性设置为none而已。3.v-else指令v-else指令配合搭配v-if使用的，它必须紧跟在v-if后面，否则不起作用。3.v-show指令开发中如何选择呢？当需要在显示与隐藏之间切换很频繁时（一会显示，一会隐藏），使用v-show当只有一次切换时，通过使用v-if总结v-if指令1v-else指令2v-show指令3总结V-for指令内容CONTENTSv-for指令遍历数组1v-for指令遍历对象21.v-for指令遍历数组当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。v-for的语法类似于JavaScript中的for循环；格式如下：v-for=“iteminitems”的形式；其中items

是源数据数组，而item

则是被迭代的数组元素的别名。1.v-for指令遍历数组如果在遍历的过程中，我们需要拿到元素在数组中的索引值语法格式：v-for="(item,index)initems"其中的index就代表了取出的item在原数组的索引值。2.v-for指令遍历对象v-for可以用来遍历对象：比如某个对象中存储着你的个人信息，希望以列表的形式显示；对象本身就是一个key:value的形式，所以遍历对象时，可以有三个参数（value,key,index）对应着对象的属性值，属性和索引值。总结v-for指令遍历数组1v-for指令遍历对象2总结使用Vue框架实现购物车效果任务实现内容CONTENTS提出任务1分析任务2归纳总结4实施任务3本次课任务使用Vue框架实现购物车效果。1.提出任务点击“+”、“-”按钮可以增加、减少数量；点击“移除”按钮，可以从购物车中删除对应商品。根据商品数量和价格，计算出总价；若购物车中没有商品时，显示文字“购物车为空”任务要点：案例效果：2.分析任务商品数据的定义商品的遍历显示数据的格式化“+”、“-”按钮添加点击事件删除功能的实现事件处理方法-计算总计实践使用Vue框架实现购物车效果3.实施任务4.归纳总结总结3Vue的生命周期学习目标：理解什么是Vue生命周期掌握Vue生命周期钩子函数的功能06Vue的生命周期每个Vue实例创建后，都会经历一系列的初始化过程，Vue实例从创建到销毁的过程就是其生命周期；Vue的生命周期分为8个阶段，官方称其为生命周期钩子函数，钩子函数用来描述Vue实例从创建到销毁的整个生命周期；可以利用这些钩子函数在合适的时机执行业务逻辑，以满足功能需求。06Vue的生命周期钩子说明beforeCreate创建实例对象之前执行，（数据不能使用）created创建实例对象之后执行，（数据可以使用）beforeMount页面挂载成功之前执行，（无法访问DOM）mounted页面挂载成功之后执行，（可以访问DOM）beforeUpdate组件更新之前执行（数据与视图不一致）updated组件更新之后执行（数据与视图一致）beforeUnMount实例销毁之前执行，（可以操作DOM）UnMounted实例销毁之后执行，（无法操作DOM）综合案例–图书管理任务描述：实现简单的图书管理功能1.显示图书列表2.添加图书3.修改图书信息4.删除图书5.常用特性应用场景补充知识1：数组常用操作Vue包含一组操作数组的方法，这些方法为响应式，即会触发视图更新。这些方法如下：

push()-添加元素到数组的末尾，如：s.push('aaa');

pop()-删除最后一个元素，如：s.pop();

shift()-删除第一个元素，如：s.shift();

unshift()-添加元素到数组最前面，可以传多个值，如：s.unshift('aaa');

splice(start,num,...item)-用于插入/删除/替换元素，如：s.splice(2,0,'ccc'); start:从第几个元素开始，从0开始计数

num：需要删除或者替换的元素个数

..item：替换后，或者添加的元素

sort()排序（升序）

reverse()排序（降序）综合案例–图书管理补充知识1：数组常用操作综合案例–图书管理补充知识2：字符串截取与拼接——截取综合案例–图书管理slice()方法substring()方法补充知识2：字符串截取与拼接——截