《Vue.js前端开发技术与实践（第二版）》 课件全套 李新荣 第1--11章 Vue项目开发ES6基础---前后端数据交互技术.pptx

第1章ES6-模块;目录;一、模块的概念;一、模块的概念;二、传统组织代码的方式;;;;三、ES6模块化规范;三、ES6模块化规范;四、JS文件何时成为模块;;五、导出与导入;五、导出与导入;六、命名导出与导入;;;;;七、默认导出与导入;;;默认导出示例;08;;THEEND;第3章初识Vue;Vue简介;Vue简介;Vue的特点与优势;Vue的使用案例;Vue的核心概念;MVVM模式;MVVM模式解释;;示例演示;传统方式示例;工程化项目示例;搭建Vue.js应用程序;前提条件;创建Vue3项目;运行项目;Vue3项目结构解释;Vue3项目结构解释;Vue3项目结构解释;Vue3项目结构解释;第4章Vue指令;??;hello;hello;style=color:red;元素;v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-once

v-memo

v-cloak;一、指令语法;二、操控DOM内容;1、全局属性id、class、title、style、hidden等等;在Vue中，动态的样式类在“v-on:class”中定义，静态的类名写在class样式中。;*表达式;在Vue中，动态的样式类在“v-on:class”中定义，静态的类名写在class样式中。;$event事件对象

.stop阻止事件冒泡

.capture事件流为捕获事件流

.self只接收自触发事件

.prevent阻止默认事件

;插槽slot;5、操控表单(v-model);student={?

??name:tom,//设置属性

??age:20,?//设置属性

??say:function(){

????alert(helloworld!)

??}//设置方法

};;;它带有前缀v-，主要职责是当其表达式的值改变时，相应地将某些行为应用在DOM上。;scriptsetup

??

/script

template

?div

??

?/div

/template

style

?

/style;;App.vue;import{createApp}fromvue;globals:{

defineProps:readonly,defineEmits:readonly,defineExpose:readonly,withDefaults:readonly,},;第5章Vue常用组合式API;模板引用;模板引用;;在v-for中使用模板引用;组件上的ref;组合式函数;特定功能相关的所有东西都放到一起维护方便。

比如功能A相关的响应式数据，操作数据的方法等放到一起。;设置如果功能复杂，代码量大，我们还可以进行逻辑拆分处理;组合式函数;插件(Plugins);插件;插件

插件是???个拥有install方法的对象，

也可以直接是一个安装函数本身。;安装函数install;插件应用场景主要包括以下几种：;状态管理;动态组件;动态组件实现;vue内置组件;第6章工程化的Vue项目;前端工程化工作流;包与模块的关系;组件与项目目录结构;;它带有前缀v-，主要职责是当其表达式的值改变时，相应地将某些行为应用在DOM上。;scriptsetup

??

/script

template

?div

??

?/div

/template

style

?

/style;;App.vue;import{createApp}fromvue;globals:{

defineProps:readonly,defineEmits:readonly,defineExpose:readonly,withDefaults:readonly,},;??第7章Vue组件通信;组件之间的关系;A组件（父）;数据通信;父子组件通信;父子通信Vue提供的技术;插槽slot;1、父组件向子组件传模板内容（父传子）

;1、父组件向子组件传模板内容（父传子）

;;3、子组件在渲染时将一部分数据提供给插槽（子传父）

;Props;1、父组件向子组件传数据;props;透传Attributes

;1、父组件向子组件传属性;script//使用普通的script来声明选项

exportdefault{

?inheritAttrs:false

}

/script;1、父组件向子组件传属性;在JavaScript中访问透传Attributes;事