day01基础
官方网站地址：https://vuejs.org
中文网站地址：https://cn.vuejs.org
中文官方文档：https://cn.vuejs.org/v2/guide/
vue是一套用于构建用户界面的渐进式框架，是一个基于JavaScript的渐进式开发框架，Vue能给前端开发提高开发运行效率，核心只关注视图层。
常见的Vue选项都包含(了解)：
-
el：element缩写，表示标签的意思，描述了Vue实例和网页中的那个标签进行绑定 -
data：数据的意思，表示实例中包含的所有数据 -
props：properties的缩写，表示实例/绑定标签的属性 -
watch：监听器，专门用来监视实例中某些变量中是否发生了数据变化 -
computed：计算属性，专门用来对实例中的某个特定数据进行自动运算 -
methods：方法，函数的意思，专门用来在实例中声明函数 -
components：组件，封装可以重用的代码块 -
filters：过滤器，封装条件过滤数据的函数 - ...
插值表达式
固定语法格式：{{ 变量名称 }}，也称为mastach语法
指令
v-text：用于渲染展示文本数据
v-html：用于渲染展示文本数据，并在渲染的同时解释执行标签语法
v-once：用于和展示数据的操作语法配合使用，在页面中完成一次性数据加载
v-show：用于根据条件控制元素显示/隐藏
v-if：用于根据条件控制元素显示/隐藏，同时支持程序流程控制
v-for：用于支持程序流程控制，循环渲染输出数据
v-bind：用于动态绑定目标元素的属性，将属性值进行动态数据控制
v-on：用于给目标节点添加事件控制的指令
...
样式处理
- 行内样式：通过
style属性进行控制展示的样式 - 外部样式：通过
class属性进行控制的样式
day02语法进阶
vue获取事件对象
如果事件函数没有被接受任何参数事件函数的第一个形式参数，就是系统自动注入的事件对象
vue接受参数
$event 固定语法，vue提供的显式事件对象
vue操作事件对象
1.stop ：用于阻止事件冒泡。
2.prevent ：用于阻止默认行为。
3.capture ：更改事件触发为捕获触发机制。
4.self ：绑定节点上的事件，只能由自身触发，不 能被捕获触发或冒泡触发。
5.once ：绑定在节点上的事件只生效一次。
6.按键修饰符：将按键功能绑定到对应的事件上
<!-- 给input输入框绑定了按键抬起事件，抬起按键时触发事件 -->
<!-- enter+ctrl -->
<input type="text" @keyup.enter.ctrl="search">
表单操作
数据双向绑定：描述了数据在实例中和视图中进行了双向绑定，实例中的数据更新会影响视图中数据的展示，视图中的数据更新会同步到实例中！
数据：
Vue实例中通过data选项定义了数据！网页视图中渲染展示了数据！双向：实例中的数据渲染到网页页面中(方向)、网页页面中的数据同步更新到实例中(方向)
绑定：使用过程中，实例中的数据和网页视图中的数据就是同一份数据！
表单数据绑定
数据双向绑定(MVVM)主要体现在表单数据中，通过v-model指令进行的数据绑定操作！
表单修饰符：
-
.trim：用于剔除表单元素中输入数据的两侧无效空格 -
.number：用于将表单中输入的数据转换成数值；如果不能转换就什么都不做 -
.lazy：用于让表单中的数据延迟数据同步，延迟到失去焦点
Vue中提供了实例函数$set()和全局函Vue.set()用于查询语法中的数据主动更新
//基本语法
vm.$set(目标对象，属性，值)
Vue.set(目标对象，属性，值)
// Vue提供了自己的实例函数$set，用于通过索引直接添加数据
this.$set(this.names, 4, "佩奇")
// Vue提供了通用函数set,用于通过索引直接添加数据
Vue.set(this.names, 5, "乔治")
数据劫持☆
Vue2.x版本中，底层通过原生对象Object.defineProperty()完成数据的声明，将这样的声明方式称为数据劫持；被劫持的数据进行查询和编辑时是可以被监听处理的！
day03功能进阶
生命周期
生命周期(lifecycle)：描述了一个组件从创建、初始化、[运行 <=> 阻塞]、最终一直到销毁的完成过程
- 创建过程：实例化过程，包含创建实例对象、初始化实例数据、加载DOM结构以及挂载数据的过程
- 运行过程：数据双向绑定情况下，数据的同步更新和自动渲染的过程
-
销毁过程：实例最终运行结束，卸载实例对象释放系统资源（应用较少）
引用图解：
image.png
1、beforeCreate()：初始化实例之前(一次)
2、created() - 常用：创建Vue完成后(一次)
3、beforeMount()：加载虚拟DOM之前(一次)
4、mounted() - 常用：加载虚拟DOM完成(一次)
5、beforeUpdate()：更新数据前
6、updated()：更新数据后
7、beforeDestroy()：销毁组件前(一次)
8、destroyed()：销毁组件后(一次)
侦听器
vue中用来监控变量数据的组件，监控的数据变量数据发生变化，侦听器对应的函数就会执行，函数内部可以针对数据进行业务或运算。
用watch语法：watch{ 侦听的变量：{ handler（变化后m，变化前n）{ 处理函数 } }}
watch:{
/* 侦听的变量: { handler() {处理函数}}*/
user: {
handler(newVal, oldVal) {
alert("当前登录用户发生变化:" + newVal + "<--" + oldVal)
}
}
含义文本：
官方：watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
小白话：
项目开发时，如果某个数据(简单变量、复杂对象)的变化必须要进行数据运算或者业务处理时，优先推荐使用侦听器，例如：登录用户身份信息改变和渲染展示就可以使用侦听器来自动化完成！
计算属性
1、计算属性的调用，和普通变量的使用一样，不要添加后面的括号
2、计算属性本质上是一个函数，可以和普通属性变量一样使用，所以
才有了计算属性这样的名称
用computed 语法：
computed: {
subTotal() { // 计算属性：本质上是一个函数，可以当成属性变量一样去使用
return this.price * this.count
}
}
面试题
1、计算属性 和 普通函数
当数据发生变化，计算属性会自动调用并缓存结果、普通函数必须通过函数名称进行调用直接执行代码
当数据没有发生变化，计算属性不会重复执行函数代码(直接使用上一次运算缓存的结果数据)；普通函数会再次执行代码(无谓消耗资源)
2、计算属性 和 侦听器/侦听属性
相同的地方是当目标数据发生变化时，都会自动调用并执行相关函数
计算属性本质上就是函数的运行结果；侦听器仅仅是监听了数据变化；
- 当需要针对每个数据的变化执行不同的业务操作或者数据运算时，建议使用侦听器
- 登录用户数据发生变化，需要有一个友好安全性提示
- 侦听器：
watch: { user: {....} }，优先推荐普通变量的监听 - 计算属性：
computed: { user() {...} }，计算属性的函数式操作可以使用侦听器替代
- 当多个变量中数据的变化互相关联时，建议使用计算属性
- 用户全名：姓变量 + 名变量
- 侦听器：
watch: {firstName: {...}, lastName:{...}}，需要侦听两个变量 - 计算属性：
computed: { fullName() {return this.firstName + this.lastName}}优先推荐
过滤器
vue的过滤器组件用来对页面视图中展示的数据进行格式化处理。
过滤器分两种：全局过滤器：可以被所有Vue组件/实例使用，私有过滤器：只能被当前组件/实例使用。
// 私有过滤器
const vm = new Vue({
....,
filters: {
过滤器名称(待处理数据) { // 定义私有过滤器
return ...
}
}
})
// 全局过滤器
Vue.filter('过滤器名称', function(待处理数据) {
return xxxxx
})
动画过渡
基本过渡动画，是通过Vue框架提供的6个基本类名称实现自动动画
v-enterv-enter-activev-enter-tov-leavev-leave-active-
v-leave-to
第三方动画库
需要借助Animate.css官方网站：https://animate.style，引入和使用animate.css
day04组件基础
组件声明和使用
全局组件
// 所有的Vue实例之前，可以通过固定语法声明全局组件
Vue.component(组件名称, {
template: "", // 组件包含的html/css网页视图
data() { // 组件中包含的对象数据
return {}
},
methods:{},
watch: {},
computed: {},
components: {},
beforeCreate() {},
create() {},
beforeMount() {},
mounted() {},
....
})
局部组件
// `Vue`实例中，或者组件中的components配置选项中声明的组件
const vm = new Vue({
el: "#app",
data: {},
methods: {},
...
components: {
Navbar: {
template: '', // 局部组件html/css网页视图
data() { // 局部组件数据
return {}
},
methods: {}, // 局部组件的函数
watch:{},
computed:{},
components: {},
beforeCreate() {},
created() {},
....
}
}
})
vue-cli脚手架
脚手架官方网站：https://cli.vuejs.org/zh/
安装： npm install @vue/cli -g
查看安装结果： vue --version
创建项目： vue create 项目名称
进入项目并启动：
cd 项目名称
npm run serve
验证是否启动成功：浏览器中访问http://localhost:8080
day05组件传值
组件中的数据传递，主要有三种
- 嵌套关系 父组件 传递数据给 子组件，主要通过组件自定义属性完成
自定义属性：
export default {
...
props: ["自定义属性"]
...
}
- 嵌套关系 子组件 传递数据给 父组件，子组件主要通过自定义事件的方式，完成数据给父组件的传递
自定义事件：
// Vue框架中，主要通过Vue实例进行声明和触发
vm.$emit("自定义事件名称", 传递给事件的数据)
// 驼峰命名法
vm.$emit("fromChildEvent")
// 短横线命名法
vm.$emit("from-child-event")
- 没有关系 组件 传递数据给 其他组件，通过一个中间组件（专门用于数据传递：事件中心）完成数据的传递过程
开发一个事件中心：编写demo01ct/src/utils/vm.js
/**
* 事件中心
* 专门用于多个组件之间通过自定义事件传递数据
*/
import Vue from "vue"
// 创建一个空Vue对象，专门用于提供vm实例，不做其他任何事情
const vm = new Vue({})
// 导出vm对象
export default vm
组件引用事件中心vm.js来实现数据传递
（待补充）
day06组件开发进阶
插槽
1、匿名插槽
基本语法
// 封装的组件内：Comp.vue
<template>
<div>
<div>
自定义内容
</div>
...
<!-- 组件中预留的插槽位置，使用组件时传入的内容，会自动替换到指定的位置 -->
<slot></slot>
...
</div>
</template>
包含插槽的组件使用：
<template>
<Comp>
<!-- 闭合标签内部的内容，用于替换插槽中的内容-->
<button>编辑</button>
</Comp>
</template>
<script>
import Comp from "./components/Comp"
export default {
components : {
Comp
}
}
</script>
2、具名插槽
基本语法：声明具名插槽
<!-- MsgBox.vue-->
<template>
<div class="container">
<header>
<slot name="header"></slot> <!-- 具名插槽-->
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot> <!-- 具名插槽-->
</footer>
</div>
</template>
具名插槽的使用
<template>
<MsgBox>
<template v-slot:header>
替换插槽slot name=header的内容
</template>
<p>
普通内容，不包含在template标签中，用于替换匿名插槽的内容
</p>
<template #footer>
缩写语法，用于替换slot name=footer插槽的内容
</template>
</MsgBox>
</template>
<script>
import MsgBox from "./components/MsgBox.vue"
export default {
components: {
MsgBox
}
}
</script>
3、作用域插槽
基本语法：
<!-- List.vue -->
<template>
<!-- 附带插槽的组件-->
<div class="list-container">
<ul class="title">
<li>序号</li>
<li>姓名</li>
<li>操作</li>
</ul>
<ul v-for="user in userList" :key="user.id">
<li>{{user.id}}</li>
<li>{{user.name}}</li>
<li
<!-- 三、可以给slot插槽标签添加自定义属性、给父组件传递数据 -->
<slot :row="user" :my-id="user.id"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['userList']
}
</script>
<style scoped>
</style>
父组件中使用插槽
<template>
<!-- 三、作用域插槽 -->
<List :userList="users">
<!-- 作用域插槽，通过template标签v-slot指令接受插槽数据-->
<!-- v-slot="prop" prop中是什么数据？-->
<!-- prop中是slot标签的属性和值的对象数据 -->
<template v-slot="prop">
<button class="edit" @click="edit(prop)">编辑</button>
<button class="delete" @click="del(prop)">删除</button>
</template>
</List>
</div>
</template>
4、第三方插件的使用
前端开发中Vue经常需要依赖第三方插件，如jQuery、swiper等等，第三方组件/模块都提供了基于Vue环境的插件可以下载安装使用
npm install jquery -S
页面中的使用方式：如果一个项目中只有不多几个组件使用jQuery直接在页面组件中引入使用
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<button @click="myScale">使用JQuery实现的动画</button>
</div>
</template>
<script>
// 引入jquery
import $ from "jquery"
export default {
name: 'App',
components: {
},
methods: {
myScale() {
// jQuery选择器、jQuery动画
$("img").animate({width: 300, height: 300}, 2000)
}
}
}
</script>
<style>
</style>
扩展：如果在一个项目中jQuery需要在大部分组件中使用，单页面引入的方式就会比较繁琐，我们可以在入口文件上，将jQuery挂载给Vue的原型对象，在任何Vue实例页面中都可以直接使用jQuery
// main.js
import Vue from "vue"
import $ from "jquery"
// 挂载到Vue的原型对象
Vue.prototype.$ = $
....
其他页面中的使用
<script>
export default {
name: 'App',
components: {
},
methods: {
myScale() {
// jQuery选择器、jQuery动画
this.$("img").animate({width: 300, height: 300}, 2000)
}
}
}
</script>
