VUE 记录学习

G芳心纵火

已于 2022-05-24 11:08:05 修改

阅读量162

点赞数 2

文章标签：学习 vue.js 前端前端框架

于 2022-05-24 11:00:11 首次发布

本文链接：https://blog.csdn.net/m0_59885200/article/details/124941616

版权

之前在学习vue的时候，觉得自己已经明白了但其实还有很多细节没有去深研究，在实际的工作开发中还是遇到很多问题今天就系统的记录一下vue的知识体系，持续更新ing...

前言
概述：Vue是一款前端渐进式框架，可以提高前端开发效率。

特点：

Vue通过MVVM模式,能够实现视图与模型的双向绑定。

简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

mvvm模型：

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

MVVM模型

Vue.js三种安装方式
此处引荐下大佬的文章讲的非常详细
vue.js 三种方式安装(vue-cli)_muzidigbig的博客-CSDN博客_vue安装

一、 Vue导入

案例：

二、Vue基本语法

1.钩子函数

概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

语法

补充：Vue声明周期和钩子函数

在这里插入图片描述

（1）什么是vue生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

（6）简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；

2. 插值表达式

概述:*插值表达式用户把vue中定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

语法：{{ 变量名/对象.属性名 }}

3.显示数据(v-text和v-html)

v-text和v-html专门用来展示数据, 其作用和插值表达式类似.v-text和v-html可以避免插值闪烁问题.

当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据

语法：

区别：

4.数据双向绑定数据(v-model)

概述：

Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
文本框/单选按钮/textarea, 绑定的数据是字符串类型
单个复选框, 绑定的是boolean类型
多个复选框, 绑定的是数组
select单选对应字符串，多选对应也是数组

4.1.绑定文本框:

4.2.绑定单个复选框 :

在这里插入图片描述

4.3.绑定多个复选框:

在这里插入图片描述 4.4.form表单数据提交:

例子:传json格式跟formData格式的两种情况

<template>
<div class="from_box">
<form action="">
<input type="text" placeholder="请输入昵称" v-model="formMess.account">
<input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
<input type="text" placeholder="请输入手机号" v-model="formMess.phone">
</form>
<span class="but" @click="onSubmit()">提交</span>
</div>
</template>

<script>
import axios from 'axios';

export default {
name: "from",
data() {
return {
   formMess:{
   "account":"",
   "act_pwd":"",
   "phone":""
   }
};
},
methods: {
onSubmit() {
/* json格式提交： */
// let formData = JSON.stringify(this.formMess);

/* formData格式提交： */
let formData = new FormData();
for(var key in this.formMess){
formData.append(key,this.formMess[key]);
}

axios({
   method:"post",
   url:"xxxxxxx",
   headers: {
       "Content-Type": "multipart/form-data"
   },
   withCredentials:true,
   data:formData
   }).then((res)=>{
console.log(res);
});
}
}
};
</script>


<style scoped lang="less">
.from_box{
form{
width:90%;
margin: auto;
border:.01rem solid gray;
display: flex;
flex-wrap: wrap;
input{
width:80%;
height:.5rem;
margin-bottom: .2rem;
border:.01rem solid black;
height:.5rem;
}
}
.but{
font-size: .14rem;
margin-left:5%;
}
}
</style>

5.事件处理(v-on)

5.1.事件绑定(v-on)

概述： Vue中也可以给页面元素绑定事件.

Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

5.2.事件修饰符

概述：**事件修饰符主要对事件的发生范围进行限定

语法：<button @事件名.事件修饰符="函数名/vue表达式">点我</button>

分类：.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件
.prevent ：阻止默认事件发生
.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行
.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once ：只执行一次

案例：