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的官方文档

 以下是具体思维导图:

你可能感兴趣的:(vue)