一天搞定Vue3——包含Axios、ElementUI Plus、Vuex的使用!!!

前言,本篇文章是依据bilibili博主(波波酱老师)的学习笔记,波波酱老师讲的很好,很适合速成!!!
在这里插入图片描述

本篇文章会与vue2进行对比学习,并且也有很多的JavaScript知识点，要提前掌握他们才能学的效果更佳,见效更快。🥳

文章目录

Vue基础
- Vue的底层原理
- el挂载点
- data数据对象
- methods方法
指令
- v-text
- v-html
- v-on
- v-show
- v-if
- v-bind
- v-for
- v-model
- - 其他指令
  - 自定义指令
事件和属性
- 事件修饰符
- 计算属性
- 侦听属性
- - 深度侦听
  - 过滤属性
生命周期函数
组件
- 组件创建和使用
- 全局组件
- 父子组件
- 单文件组件
- - 组件通信
  - 子组件向父组件传递数据
  - 全局事件总线
  - 企业级开发组件结构
- 脚手架搭建
- - 脚手架目录结构
  - render函数
路由
- 自定义插件
- 路由使用
- 深度路由
- 多级路由
- - 组件的数据传递
- 编程式路由导航
- 路由守卫
- - 全局路由守卫
  - 独享路由守卫和组内路由守卫
axios
- 全局安装JSON server
- - get请求快速入门
  - 提交请求
  - - 实现增加功能
    - 实现删除功能
  - 异常处理方式
  - 响应对象结构分析
- axios默认配置
EL组件库使用
- EL组件导入
布局组件
- Layout布局
- Container布局容器
- Button按钮
- - 普通按钮
  - 朴素按钮
  - 圆角按钮
  - 图片按钮
  - 按钮组
表单组件
- 单选框
- 复选框
- input文本框
- 下拉框
- 日期和时间
- 文件上传
Vue3
- Vue3的项目初始化
- - 如何初始化Vue3项目
  - 目录结构
  - Vue2和Vue3的区别
- 组合式API
- - setup函数
- 响应式函数
- - reactive
  - ref
  - - 对象类型
    - 简单类型
    - 数组类型
- 属性
- - 计算属性
  - - get和set写法
  - 侦听属性
  - - 对象类型侦听
    - 精确侦听
- 生命周期函数
- 组件通信
- - 父传子通信
  - 子传父通信
  - - 模版引用ref
    - 事件总线
Vuex
- 创建Vuex项目
- - 创建store对象
  - - 实现actions、mutations和state

Vue基础

Vue的底层原理

MVVN模型

M：模型（model）：对应的data中的数据
V：视图（View）：模版
VM：视图模型（ViewModel）：Vue事例对象

MVVM数据监视与代理

el挂载点

vue实例的作用范围是el选项命中的元素及其内部的后代元素
可以使用其他的选择器,建议使用id选择器
可以使用在其他双标签中,但是要注意不能使用在html标签和body标签

<script>var app = new Vue({el:"#app",	//id选择器el:".app",	//class选择器el::"div",	//标签选择器data:{message:"el挂载点"}})
</script>

data数据对象

vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,应当遵守JS语法

<div id="app">{{message}}{{preson.name}}{{preson.age}}<ul><li {{city[0]}}></li><li {{city[1]}}></li><li {{city[2]}}></li><li {{city[3]}}></li></ul>
</div>
<script>var app = new Vue({el:"#app",data:{message:"data数据对象",}person:{	//对象属性name:"天下无贼"age:"188"},city:["北京","上海","广州","深圳"]	数组属性}})
</script>

methods方法

不要写尖头函数，因为会改变this指向

指令

v-text

设置标签的文本值内容
默认写法会替换全部内容,使用插值表达式{{}}就是他的简写形式
内部支持写表达式

<div id="app"><h2 v-text="message"></h2>	<!--输出的是"v-text属性"--><h2 v-text="message">我会被覆盖</h2>	<!--这个输出的也是"v-text属性",没有"aaa"的原因是因为v-text覆盖掉了--><h2 v-text="message+'!!!'"></h2>	<!--支持字符串拼接表达式-->
</div>
<script>var app = new Vue({el:"#app",data:{message:"v-text属性",aaa:"aaa"},})
</script>

v-html

设置标签的html对象
内容中有html结构会被解析成标签
解析文本的时候使用v-text,需要解析html结构的时候使用v-html

<div id="app"><p v-html="message"></p>
</div>
<script>var app = new Vue({el:"#app",data:{message:" <a herf="www.baidu.com">v-html</a> "},})
</script>

v-on

为元素绑定事件
绑定的方法定义在methods属性当中
方法的内部通过this关键字可以访问定义在data中的数据

<div id="app"><p>{{message}}</p><button v-on:click="do">v-on触发</button><button @click="do">v-on简写触发</button>	<!--简写形式-->
</div>
<script>var app = new Vue({el:"#app",data:{message="你好"},methods:{do:function(){//方法逻辑this.message+="我不好"	//使用[this.]关键字拿到当前对象}}})
</script>

v-on简写可以为@

传递自定义参数,事件修饰符

<div id="app"><button @click="do(p1,'你好')"></button><button @keyup.enter="do2"></button>
</div>
<script>var app = new Vue({el:"#app",data:{},methods:{do:function(p1,p2){console.log("v-on自定义参数"+p1+p2);},do2:function(){console.log("键盘enter键事件修饰符");}}})
</script>

写一个计数器小案例

<div id="app"><button @:click="sub">-</button><span>{{message}}</span><button @click="add">+</button>
</div>
<script>var app = new Vue({el:"#app",data:{message:0},methods:{add:function(){if(this.message<10){this.message++;}else{alert("别点啦最大了!!!")}},sub:funct(){if(this.message>0){this.message--;}else{alert("别点啦最小了!!!")}}}})
</script>

v-show

根据后面表达式的真假来决定元素的显示和隐藏
原理是修改了元素的display来实现隐藏
指令后面的内容,最终都会被解析成布尔值
值为true元素显示,值为false元素隐藏

<div id="app"><P v-show="true">通过设置布尔值来决定v-show</P><P v-show="isShow">通过isShow来决定</P><button @click="do">改变isShow值</button><P v-show="age>=18">通过元素值来决定</P>
</div>
<script>var app = new Vue({el:"#app",data:{age:17,isShow:false},methods:{do:function(){this.isShow =!this.isShow;}}})
</script>

v-if

根据表达式的增加切换元素的显示状态
本质上是操作Dom元素来切合显示状态
频繁的切换v-show因为消耗的性能较小,但是占用内存较高.反之使用v-if

<div id="app"><P v-if="isShow">这个是v-if的案例</P><button @click="do">改变isShow值</button>
</div>
<script>var app = new Vue({el:"#app",data:{isShow:true},methods:{do:function(){this.isShow =!this.isShow;}}})
</script>

v-bind

为元素绑定属性
语法模板v-bind:属性名=表达式
简写形式直接:属性名

<div id="app"><a v-bind:href="message">点我以下</a><button @click="do">改变isShow值</button>
</div>
<script>var app = new Vue({el:"#app",data:{message:"www.baidu.com",}})
</script>

v-for

根据数据生成列表结构
语法模板v-for="(item,index)in 数据"(item代表每一项,index是索引)

<div id="app"><ul><li v-for="item in arr">v-for案例:{{item}}</li></ul><h2 v-for="(item,ixdex) in arr">{{"index":index}}{{item.name}}</h2>
</div>
<script>var app = new Vue({el:"#app",data:{arr:[1,2,3,4,5],obj:[{name:"aaa"},{name:"bbb"}]	//对象数组}})
</script>

v-model

获取和设置表单元素的值(双向数据绑定)
绑定的数据会和表单元素值相关联
绑定的数据和表单元素的值是双向绑定的

<div id="app"><input type="text" v-model="message"><h2>{{message}}</h2>
</div>
<script>var app = new Vue({el:"#app",data:{message:"v-model"},methods:{}})
</script>