一天搞定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>