Vue js前端开发技术（第2版）.pptxVIP

第1章Vue入门;课程内容;Vue简述;为什么使用Vue.js;Vue.js的主要特点;Vue.js的优势;Vue.js下载及引用;npm安装;安装过程;Vue项目目录结钩;实例化Vue对象、数据和方法;演示创建Vue实例的过程;实例化Vue对象、数据和方法;演示数据挂载到DOM页面;

;MVVM模式;17;本章小结;第2章Vue数据绑定;课程内容;Vue模板语法;演示模板语法

;表达式;响应式声明渲染机制;演示响应式声明渲染;

;

;

;

;Vue双向数据绑定;

;

;

计算属性的setter和getter

默认是getter

需要时可提供setter

;

;

;

;

;

;

;

;第3章Vue指令;课程目标;课程内容;Vue指令;指令修饰符;指令详解;指令详解;v-for指令;v-for指令;!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

titlehello,world!/title

/head

body

scriptsrc=lib/Vue.js/script

divid=app-2

ol

liv-for=todointodos{{todo.text}}/li

/ol

;;v-on指令

v-on指令绑定一个事件监听器，v-on指令用于绑定HTML的单击事件用v-on:click缩写为@click。

;

;v-show指令

v-show的用法与前面的v-if类似，通过此指令控制元素的显示隐藏，即控制元素的display。

;Vue动态样式绑定;Vue动态样式绑定;Vue表单输入绑定;v-bind;参数特性;

综合案例演示数据排序

;综合案例演示数据排序;本章小结;;课程内容;4.1Vue事件处理器;4.1.1监听事件;4.1.2方法事件处理器;4.1.3内联事件处理器;;;;;4.2.1事件修饰符;;4.2.2按键修饰符;;;;4.2.3修饰键;;4.3综合案例;;;;;本章小结;第5章Vue组件;课程内容;什么是组件;

;组件使用;组件中的data必须是函数;

;Vue两大核心思想

组件化

数据驱动

组件本身也可以包含组件;使用props;【例5-9】动态Prop向子组件动态传递数据;【例5-10】演示props验证;使用Slot插槽内容分发;具名Slot插槽

如果有多个标签，可以使用具名插槽;Slot作用域插槽

;组件通信;子组件向父组件通信;使用$refs

在调用子组件的时候，可以制定refs属性。

;任意组件及平行组件通信;本章小结;第6章自定义指令;课程目标;课程内容;6.1自定义指令概述;6.1.1自定义全局指令;

;

;

;【例6-1】需要说明的是这里的el指的就是当前指令绑定的DOM元素，运行后光标定位在文本框中，直接获取焦点运行结果如图6-2所示：

;6.1.2自定义局部指令;

;一个指令的定义对象可以提供钩子函数，均为可选bind、inserted、update、unbind、componentUpdated，每个钩子函数的作用在自定义指令中已经介绍过。

钩子函数参数（下面代码中的inserted钩子函数的参数el）

;

其实除了el还有其他的钩子函数参数，指令钩子函数会被传入以下参数

el：指令所绑定的元素，可以用来直接操作DOM。

binding：一个对象，包含以下属性：

1.name：指令名，不包括v-前缀。

2.value：指令的绑定值，例如：v-my-directive=1+1中，绑定值为2。

;3.oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。

无论值是否改变都可用。

4.expression：字符串形式的指令表达式。例如v-my-directive=1+1中，表达式为1+1。

5.arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为foo。

6.modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}。

;vnode：Vue编译生成的虚拟节点。可以对数据进行双向绑定。

oldVnode：上一个虚拟节点，仅在