Vue学习笔记

秋༦

已于 2022-04-08 10:59:20 修改

阅读量1.8k

点赞数 2

文章标签： vue

于 2022-04-08 10:58:22 首次发布

本文链接：https://blog.csdn.net/qq_68438647/article/details/124035502

版权

vue简介

什么是Vue框架

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

Vue的优势主要有哪些

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

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

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

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

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

webpack打包工具

什么是webpack打包工具

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

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

通过npm包管理工具全局安装webpack，例如npm install webpack@4.27.x -g
打包js文件，例如webpack example.js -o app.js

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

在创建项目之前应先完成vue-cli脚手架工具的安装
打开命令行工具，执行vue init webpack myapp创建项目
在创建项目时，直接按回车使用默认值即可
切换到项目目录，然后启动服务，执行命令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代码，或绑定事件处理方法

事件修饰符

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

vue组件

组件特性

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

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

2.注册局部组件

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

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

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

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

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

4.组件切换

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

定义登录、注册两个页面组件
通过<component>的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组件中可复用的功能