文章目录

  • Vue 基础知识
    • 一 Vue介绍
      • 1.1 什么是Vue?
      • 1.2 安装方式
      • 1.3 声明式渲染
    • 二 Vue实例
      • 2.1 创建Vue
      • 2.2 生命周期
        • 2.2.1 图解
        • 2.2.2 重点理解
        • 2.2.3 上手实验一下
      • 2.3 Vue项目结构
      • 2.4 数据区域
    • 三 模板语法
      • 3.1 插值
        • 3.1.1 文本
        • 3.1.2 Html
        • 3.1.3 Attribute
        • 3.1.4 绑定 HTML Class
      • 3.2 指令
        • 3.2.1 v-if
        • 3.2.2 v-on
        • 3.2.3 v-for
        • 3.2.4 v-show
        • 3.2.5 v-model
    • 四 计算属性与侦听器
      • 4.1 计算属性
      • 4.2 侦听属性
      • 4.3 过滤器
    • 五 AXIOS
      • 5.1 特性
      • 5.2 使用
      • 5.3 案例
      • 5.4 拦截器

Vue 基础知识

前言：本人之前是用的Angualr+NG-ZORRO 开发的前端框架，所以与Vue框架有相同之处

一 Vue介绍

1.1 什么是Vue?

Vue (读音 vjuː，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 安装方式

  • html
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • npm
npm install vue
#安装webpack
npm install -g webpack
# 安装脚手架
npm install vue-cli -g
# 初始化一个项目
vue init webpack myproject

1.3 声明式渲染

  • DOM状态只是数据状态的一个映射
  • 所有的逻辑尽可能在状态的层面去进行
  • 当状态改变了，view会被框架自动更新到合理的状态
  • 命令式：需要以具体代码表达在哪里做什么？它是如何实现的
  • 声明式：只需要声明在哪里需要做什么？不需要关心具体怎么实现的

二 Vue实例

2.1 创建Vue

var vm = new Vue({// 选项
})
  • 当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。
  • 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
  • 我们可以理解他是一个对象，一个对象会有他的生命周期。

2.2 生命周期

2.2.1 图解

  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。（由生走向死亡）

2.2.2 重点理解

  • Vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
  • 我们可能用的最多的钩子函数： created，mounted。
  • created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  • mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
  • 一般creadted钩子函数主要是用来初始化数据。
  • 一般mounted钩子函数是用来向后端发起请求拿到数据以后做一些业务处理。
  • 注意这里不要与计算属性搞混了，computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。

2.2.3 上手实验一下

  • 创建一个Vue项目
vue init webpack MyVue-Object
  • 修改Vue
<!--* @Description:Vue 生命周期* @version: 1.0* @Author: shu* @Date: 2021-12-11 18:13:07* @LastEditors: 修改者填写* @LastEditTime: 2021-12-11 18:25:10
-->
//模板
<template>
<div >
生命周期
</div>
</template><script>
export default {// 组件名，方便其他地方引入name: 'HelloWorld',// 数据区data () {return {msg: 'Welcome to Your Vue.js App'}},beforeCreate: function () {console.log('调用了beforeCreat钩子函数')},created: function () {console.log('调用了created钩子函数')},beforeMount: function () {console.log('调用了beforeMount钩子函数')},mounted: function () {console.log('调用了mounted钩子函数')}
}
</script>
  • 观察结果

2.3 Vue项目结构

  • 编辑器：VsCode2021
  • 结构

项目简介
基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含：基础库: vue.js、vue-router、vuex、whatwg-fetch
编译/打包工具：webpack、babel、node-sass
单元测试工具：karma、mocha、sinon-chai
本地服务器：express
目录结构├── README.md            项目介绍├── index.html           入口页面├── build              构建脚本目录│  ├── build-server.js         运行本地构建服务器，可以访问构建后的页面│  ├── build.js            生产环境构建脚本│  ├── dev-client.js          开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新│  ├── dev-server.js          运行本地开发服务器│  ├── utils.js            构建相关工具方法│  ├── webpack.base.conf.js      wabpack基础配置│  ├── webpack.dev.conf.js       wabpack开发环境配置│  └── webpack.prod.conf.js      wabpack生产环境配置├── config             项目配置│  ├── dev.env.js           开发环境变量│  ├── index.js            项目配置文件│  ├── prod.env.js           生产环境变量│  └── test.env.js           测试环境变量├── mock              mock数据目录│  └── hello.js├── package.json          npm包配置文件，里面定义了项目的npm脚本，依赖包等信息├── src               源码目录 │  ├── main.js             入口js文件│  ├── app.vue             根组件│  ├── components           公共组件目录│  │  └── title.vue│  ├── assets             资源目录，这里的资源会被wabpack构建│  │  └── images│  │    └── logo.png│  ├── routes             前端路由│  │  └── index.js│  ├── store              应用级数据（state）│  │  └── index.js│  └── views              页面目录│    ├── hello.vue│    └── notfound.vue├── static             纯静态资源，不会被wabpack构建。└── test              测试文件目录（unit&e2e）└── unit              单元测试├── index.js            入口脚本├── karma.conf.js          karma配置文件└── specs              单测case目录└── Hello.spec.js
  • 如果作为开发人员，我们只需关注下面的模块信息

2.4 数据区域

  • 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生响应，即匹配更新为新的值。
<!--* @Description:Vue 生命周期* @version: 1.0* @Author: shu* @Date: 2021-12-11 18:13:07* @LastEditors: 修改者填写* @LastEditTime: 2021-12-11 18:37:00
-->
//模板
<template>
<div >
生命周期{{msg}}
</div>
</template><script>
export default {// 组件名，方便其他地方引入name: 'HelloWorld',// 数据区data () {return {msg: '欢迎来到Vue'}},beforeCreate: function () {console.log('调用了beforeCreat钩子函数')},created: function () {console.log('调用了created钩子函数')},beforeMount: function () {console.log('调用了beforeMount钩子函数')},mounted: function () {console.log('调用了mounted钩子函数')}
}
</script>

三 模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

3.1 插值

3.1.1 文本

  • 格式：{{值}}
  • 数据绑定最常见的形式就是使用Mustache语法 (双大括号) 的文本插值。
  • 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<!--* @Description: vue初体验，插值表达式* @version: 1.0* @Author: shu* @Date: 2022-01-09 11:19:16* @LastEditors: 修改者填写* @LastEditTime: 2022-01-09 11:28:18
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app">{{msg}}</div><script>//创建Vue实例const vm = new Vue({// 绑定Dom元素，元素选择器el: '#app',data: {msg: "欢迎来到Vue学习！！！"}})</script></body></html>

3.1.2 Html

  • 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
<!--* @Description: v-html指令，渲染html* @version: 1.0* @Author: shu* @Date: 2022-01-09 11:19:16* @LastEditors: 修改者填写* @LastEditTime: 2022-01-09 11:28:18
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div id="app" v-html="msg"></div><script>//创建Vue实例const vm = new Vue({// 绑定Dom元素，元素选择器el: '#app',data: {msg: "<h1> 我是你</h1>"}})</script></body></html>

3.1.3 Attribute

  • Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令
<!-- 完整语法 -->
<a v-bind:href="url">...</a><!-- 缩写 -->
<a :href="url">...</a><!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

<!--* @Description: v-band指令，属性值绑定* @version: 1.0* @Author: shu* @Date: 2022-01-09 11:19:16* @LastEditors: 修改者填写* @LastEditTime: 2022-01-09 11:28:18
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body><div><input  id="app" :placeholder="msg" /></div><script>//创建Vue实例const vm = new Vue({// 绑定Dom元素，元素选择器el: '#app',data: {msg: "请输入信息！"}})</script></body></html>

3.1.4 绑定 HTML Class

<divclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>data: {isActive: true,hasError: false
}

3.2 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

3.2.1 v-if

<!--* @Description:Vue v-if* @version: 1.0* @Author: shu* @Date: 2021-12-11 18:13:07* @LastEditors: 修改者填写* @LastEditTime: 2021-12-11 20:43:17
-->
//模板
<template>
<h1 v-if="flag">按钮</h1>
<h1 v-else>Oh no 												


											

官网学习Vue（一）Vue基础篇相关推荐
	

    
						
  1. Vue学习之路（基础篇）
		
    Vue学习之路(基础篇)
    
		
    2. 
						
  2. vue实战入门基础篇二：从零开始仿门户网站实例-开发框架搭建
		
    上一篇:vue实战入门基础篇一:从零开始仿门户网站实例-前期准备工作 vue实战入门基础篇二:从零开始仿门户网-2022-2-23 21:00:27 一.目录 第一篇:前期准备工作 第二篇:开发框架搭 ...
    
		
    3. 
						
  3. vue实战入门基础篇五：从零开始仿门户网站实例-关于我们实现
		
    上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录 第 ...
    
		
    4. 
						
  4. 菜鸟学习笔记：Java基础篇7（包装类、时间相关类、文件类、异常处理类）
		
    菜鸟学习笔记:Java其他常用类 基本数据类型包装类 时间处理和文件处理相关类 Date时间类 SimpleDateFormat Calendar日历类 文件类 异常机制 异常的概念 Java异常处理 ...
    
		
    5. 
						
  5. 菜鸟学习笔记：Java基础篇6（数组、字符串）
		
    菜鸟学习笔记:Java常用类(数组.字符串) 数组 概述 数组的定义 二维数组 数组查找和排序 查找 排序 数组运用--字符串 不可变字符序列(String) 可变字符序列(StringBuilder ...
    
		
    6. 
						
  6. Spring AOP官网学习
		
    Spring AOP官网学习 5.1 AOP概念 让我们从定义一些核心的AOP概念和术语开始.这些术语并不是spring特有的.不幸的是,AOP术语不是特别直观. 1.Aspect(方面):跨多个类的 ...
    
		
    7. 
						
  7. Spring官网学习(一)概述
		
    文章目录 1.Spring官网简介 2.Spring总览 2.1.什么是Spring 2.2.Spring的发展历程 3.Spring的设计理念 3.1.Spring的优点 4.IOC和AOP浅析 4 ...
    
		
    8. 
						
  8. knockout+html绑定,Knockout.Js官网学习（style绑定、attr绑定）
		
    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
    
		
    9. 
						
  9. 菜鸟学习笔记：Java基础篇5（抽象类与接口、回调函数、内部类）
		
    菜鸟学习笔记:Java面向对象篇下 抽象类 接口 回调函数 内部类 成员内部类 匿名内部类 抽象类 通过前面知识的学习,抽象类这个概念应该不难理解,但比较容易和后面要说的接口混淆,而且在面试中也比较爱 ...
    
		
    10. 
						
  10. 菜鸟学习笔记：Java基础篇4（面向对象三大特征）
		
    菜鸟学习笔记:Java面向对象篇中 继承 概念 方法重写(override) Object类 Super关键字 组合 final关键字补充 封装 访问控制符 多态 继承 概念 继续上一篇的例子: #m ...
    
		
    11. 
		


					

最新文章
	

    
						
  1. java开源写字板_简单的写字板 - 努力喵的个人空间 - OSCHINA - 中文开源技术交流社区...
		
    2. 
						
  2. IntelliJ IDEA maven库下载依赖包速度慢的问题(包制百病)
		
    3. 
						
  3. forum.php 重定向,解析php 版获取重定向后的地址(代码)
		
    4. 
						
  4. CodeForces - 1494D Dogeforces(贪心+构造)
		
    5. 
						
  5. 新建maven（servlet项目） 引入不了HttpServlet
		
    6. 
						
  6. 多边形的时针方向与法线方向
		
    7. 
						
  7. c++opencv显示中文_OpenCV如何入门秘籍
		
    8. 
						
  8. 05 吸收应用-会整理还不够？教你吸收、联想、输出、应用
		
    9. 
						
  9. java计算点在圆内外_java – 在O((n s)log n中计算圆交叉点)
		
    10. 
						
  10. 计算机专业西交大和哈工大,本科毕业打算深造，西交、北邮、哈工大学计算机选哪所？北邮更好...
		
    11. 
						
  11. 零基础学UI设计教程之图标的设计形式讲解
		
    12. 
						
  12. 用ffmpeg将mp3转为wav
		
    13. 
						
  13. java 消除png 锯齿_java Graphics2d消除锯齿，使字体平滑显示
		
    14. 
						
  14. [杂记]LeTeX模板——ppt
		
    15. 
						
  15. 双线性插值算法的详细总结
		
    16. 
						
  16. Instruction set
		
    17. 
						
  17. 如何用光盘安装服务器系统教程,光盘、硬盘怎么安装系统（图文教程）
		
    18. 
						
  18. JAVA-extends
		
    19. 
						
  19. Spring Boot 中的异步调用
		
    20. 
						
  20. 大数据和云计算的区别和关联
		
    21. 
		

	


热门文章
	

    
									
  1. 开发常用命令(Mac版本)
			
    2. 
						
  2. Semantic Segmentation--ICNet for Real-Time Semantic Segmentation on High-Resolution Images论文解读
			
    3. 
						
  3. matlab trapz二重积分函数_小小知识点（十二）利用MATLAB计算定积分
			
    4. 
						
  4. 11-Little prince's trip to Java-偶数魔方阵之双偶魔方阵
			
    5. 
						
  5. 设计模式之装饰器模式详解
			
    6. 
						
  6. 数据可视化：绘制图表（一）——柱状图
			
    7. 
						
  7. html5插入animate动画
			
    8. 
						
  8. 计算机网络--五层协议的体系结构
			
    9. 
						
  9. 纵谈地图应用中标识定位
			
    10. 
						
  10. 对候选人得票的统计程序。设有3个候选人，每次输入一个得票的候选人的名字，要求最后输出各人得票结果。
			
    11.