Vue学习笔记

vue简介

什么是Vue框架

Vue是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用

Vue的优势主要有哪些

• 轻量级、双向数据绑定、指令、插件

Vue、Angular和React三大前端框架的区别

1. Angular不支持组件化，而Vue和React都支持组件化开发
2. 只有Vue支持双向数据绑定
3. 三大框架都不支持低端浏览器

Visual Studio Code编辑器的特点是什么

1. 轻巧极速，占用系统资源较少
2. 具备语法高亮显示、智能代码补全
3. 自定义快捷键和代码匹配等功能
4. 跨平台
5. 主题界面的设计比较人性化
6. 提供了丰富插件

---

webpack打包工具

什么是webpack打包工具

1. webpack是一个模块打包工具，可以把前端项目中的js、cs、scss/less、图片等文件都打包在一起，实现自动化构建，给前端开发人员带来了极大的便利

webpack打包工具的下载安装及简单使用

1. 通过npm包管理工具全局安装webpack，例如npm install [email protected] -g
2. 打包js文件，例如webpack example.js -o app.js

在Vue项目开发时，使用webpack打包工具提高加载时间和性能，具体使用步骤如下

1. 在创建项目之前应先完成vue-cli脚手架工具的安装
2. 打开命令行工具，执行vue init webpack myapp创建项目
3. 在创建项目时，直接按回车使用默认值即可
4. 切换到项目目录，然后启动服务，执行命令npm run serve

---

vue开发基础

Vue实例

通过new关键字实例化，例如new Vue({})

Vue实例对象

• el：唯一根标签
• data：初始数据
• methods：定义方法
• computed：计算属性
• watch：状态监听
• filters：过滤器

Vue数据绑定

常用内置指令

• v-model：主要实现数据双向绑定，通常用在表单元素上
• v-text：是在DOM元素内部插入文本内容
• v-html：是在DOM元素内部插入HTML标签内容
• v-bind：可以实现单向数据绑定
• v-on：是事件监听指令，直接与事件类型配合使用
• v-for：可以实现页面列表渲染，常用来循环数组
• v-if：用来控制元素显示或隐藏，属性为布尔值

Vue事件及Vue组件

v-on绑定事件：在Vue中可以使用内置指令v-on监听DOM事件，并在触发时运行一些JavaScript代码，或绑定事件处理方法

事件修饰符

1. .stop：阻止事件冒泡
2. .prevent：阻止默认事件行为
3. l .capture：事件捕获
4. l .self：将事件绑定到自身，只有自身才能触发
5. l .once：事件只触发一次

vue组件

1. 组件特性

在Vue中，组件是构成页面中独立结构单元，组件主要以页面结构形式存在，不同组件也具有基本交互功能

• 能够减少重复代码的编写，提高开发效率
• 降低代码之间的耦合程度，使项目更易维护和管理
• 根据业务逻辑实现复杂的项目功能

2.注册局部组件

Vue.component()方法用于全局注册组件，除了全局注册组件外，还可以局部注册组件，通过Vue实例的components属性来实现

• Vue实例的components选项中，定义局部组件
• Vue实例的template选项中，定义页面结构

3.组件之间的数据的传递

组件之间的数据传递需要借助一些工具（如props属性）来实现父组件向子组件传递数据信息

• 通过props实现父组件向子组件数据传递
• 通过$emit实现子组件向父组件数据传递

4.组件切换

v-if与v-else ： Vue中的页面结构是由组件构成的，不同组件可以表示不同页面，适合进行单页应用开发

• 定义登录、注册两个页面组件
• 通过的is属性，绑定组件的名称comName
• 当点击页面中按钮时，切换comName为相应的值，实现组件切换

Vue生命周期

Vue实例为生命周期提供了回调函数，用来在特定的情况下触发，贯穿了Vue实例化的整个过程，这给用户在不同阶段添加自己的代码提供机会

• l beforeCreate：创建实例对象之前执行
• l created：创建实例对象之后执行
• l beforeMount：页面挂载成功之前执行
• l mounted：页面挂载成功之后执行
• l beforeUpdate：组件更新之前执行
• l updated：组件更新之后执行
• l beforeDestroy：实例销毁之前执行
• l destroyed：实例销毁之后执行

全局API

1.全局API的基本内容

• l Vue.use()：主要用于在Vue中安装插件，通过插件可以为Vue添加全局功能
• l Vue.extend()：用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展
• l Vue.set()：用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新
• l Vue.mixin()：用于全局注册一个混入，它将影响之后创建的每个Vue实例

2.全局API的简单使用

• l 通过Vue.directive()注册自定义指令“v-focus”，实现表单元素聚焦
• l 通过Vue.use()安装插件“MyPlugin”，定义宽度100px，高度100px；背景色为灰色的元素
• l 通过Vue.extend()创建Vue2子类，并获取子类中的特有属性
• l 通过Vue.set()动态设置Vue中data响应式数据“我是Vue.set添加的响应式属性obj.b”

实例属性

Vue实例属性的基本概念

• l vm.$props：接收上级组件向下传递的数据
• l vm.$options：设置Vue实例的自定义选项
• l vm.$el：用来访问vm实例使用的根DOM元素
• l vm.$children：用来获取当前实例的直接子组件
• l vm.$root：用来获取当前组件树的根Vue实例，如果当前实例没有父实例，则获取到的是该实例本身
• l vm.$slots ：动态获取插槽对象，插槽就是定义在组件内部的template模板
• l vm.$attrs：可以获取组件的属性，但其获取的属性中不包含class、style以及被声明为props的属性

Vue实例属性的简单使用

• l 通过vm.$props实现手机信息搜索功能
• l 通过vm.$options获取自定义数据“我是自定义数据”
• l 通过vm.$el将页面中根标签下的内容修改为“我是替换后的div标签”
• l 通过vm.$children获取子组件，并在浏览器控制台查看
• l 通过vm.$root获取根组件，并在浏览器控制台查看
• l 通过vm.$slots方式，编写简单页面结构
• l 通过vm.$attrs获取组件自定义属性，并在浏览器控制台查看结果

全局配置

全局配置对象的基本概念

•  在开发环境下，Vue提供全局配置对象
• l通过配置可以实现生产信息提示、警告忽略等人性化处理

全局配置对象属性的主要内容及简单使用

• l productionTip：打开或关闭生产信息提示信息， 设置false，表示关闭提示信息
• l silent：Vue全局配置对象中，silent可以取消Vue日志和警告，值类型为boolean，默认值为false，设为true表示忽略警告和日志，否则不忽略
• l devtools：在Vue全局配置中可以对该工具进行配置，将Vue.config.devtools设为true表示允许调试，否则不允许调试

组件进阶

mixins

在Vue中，mixins可以实现分发Vue组件中可复用的功能

• 组件中的mixins属性用来配置组件选项，其值为自定义选项
• Vue组件经过mixins混合之后会发生组件选项重用
• 如果vm实例的data函数中没有获取到message，再去mixin中获取
• mixins中的钩子将在组件自己的钩子之前调用

render()

在Vue中，可以使用Vue.render()实现对虚拟DOM的操作

• 注册组件my-component
• 在组件配置对象中调用render()函数
• 在渲染函数render()中调用createElement()函数创建元素

createElement()

•  createElement()函数返回的并不是一个实际的DOM，它返回的其实是一个描述节点（createNodeDescription）
• createElement()函数的使用非常灵活，它的第1个参数可以是一个HTML标签名或组件选项对象
•  第2个参数是可选的，可以传入一个与模板中属性对应的数据对象
•  第3个参数是由createElement()构建而成的子级虚拟节点，也可以使用字符串来生成文本虚拟节点，具体可以参考Vue的官方文档

---

 以下是具体思维导图：