Vue学习笔记（参考）

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.按键修饰符：将按键功能绑定到对应的事件上

表单操作

数据双向绑定：描述了数据在实例中和视图中进行了双向绑定，实例中的数据更新会影响视图中数据的展示，视图中的数据更新会同步到实例中！

数据：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-enter
• v-enter-active
• v-enter-to
• v-leave
• v-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

包含插槽的组件使用：

2、具名插槽

基本语法：声明具名插槽

具名插槽的使用

3、作用域插槽

基本语法：

父组件中使用插槽

4、第三方插件的使用

前端开发中Vue经常需要依赖第三方插件，如jQuery、swiper等等，第三方组件/模块都提供了基于Vue环境的插件可以下载安装使用

npm install jquery -S

页面中的使用方式：如果一个项目中只有不多几个组件使用jQuery直接在页面组件中引入使用

扩展：如果在一个项目中jQuery需要在大部分组件中使用，单页面引入的方式就会比较繁琐，我们可以在入口文件上，将jQuery挂载给Vue的原型对象，在任何Vue实例页面中都可以直接使用jQuery

// main.js
import Vue from "vue"
import $ from "jquery"

// 挂载到Vue的原型对象
Vue.prototype.$ = $

....

其他页面中的使用