Vue学习笔记

最新推荐文章于 2025-05-23 16:22:38 发布

weixin_37693463

最新推荐文章于 2025-05-23 16:22:38 发布

阅读量676

点赞数 10

分类专栏： vue 文章标签： vue.js 学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_37693463/article/details/145845493

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

1、什么是Vue？

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。(官方:https://cn.vuejs.org/)
在这里插入图片描述

2、快速入门

①准备
准备html页面,并引入Vue模块(官方提供)
创建Vue程序的应用实例
准备元素(div)，被Vue控制
②构建用户界面
准备数据
通过插值表达式渲染页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <!-- 引入vue模块 -->
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        /* 创建vue应用实例 */
        createApp({
            data(){
                return {
                    // 定义数据
                    msg: 'hello vue3'
                }
            }
        }).mount("#app");
    </script>
</body>
</html>

3、常用指令

指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

指令	作用
`v-for`	列表渲染，遍历容器的元素或者对象的属性
`v-bind`	为HTML标签绑定属性值，如设置href，css样式等
`v-if/v-else-if/v-else`	条件性的渲染某元素，判定为true时渲染，否则不渲染
`v-show`	根据条件展示某元素，区别在于切换的是display属性的值
`v-model`	在表单元素上创建双向数据绑定
`v-on`	为HTML标签绑定事件指令

注意：v-if 与v-show的区别?
v-if 是根据条件判断是创建还是移除元素节点(条件渲染)
v-show 是根据css样式display来控制元素的显示与隐藏

4、Vue生命周期

生命周期的八个阶段:每个阶段会自动执行一个生命周期方法(钩子),让开发者有机会在特定的阶段执行自己的代码

创建前（beforecreate）
创建后（created）
载入前（beforeMount）
挂载完成（mounted）
数据更新前（beforeUpdate）
数据更新后（updated）
组件销毁前（beforeUnmount）
组件销毁后（unmounted）

5、Axios简介

介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
引入Axios的js文件(参照官网)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
GET:
axios.get(url).then((res)=>i.}).catch((err)=>{.})
POST:
axios.post(url,data).then((res)=>{.}).catch((err)=>{..} )

6、npm 命令的含义

npm:Node Package Manager，是NodeJs的软件包管理器
npm install xxxx 从远程仓库获取并安装js

7、Vue项目-创建

创建一个工程化的Vue项目，执行命令:npm init vue@latest
执行上述指令，将会安装并执行create-vue，它是Vue官方的项目脚手架工具。
在这里插入图片描述

8、Vue组件书写两种风格

选项式API
组合式API：推荐

<script setup>
    import { onMounted, ref } from 'vue';
    const count = ref(0); // 声明响应式变量
    function increment() { // 声明函数
        count.value++;
    }
    onMounted(() => { // 声明钩子函数
        console.log('Vue Mounted ...');
    })
</script>
<template>
    <button @click="increment">count: {{ count }}</button>
</template>

setup:是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
ref():接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value
onMounted():在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

9、拦截器

在请求或响应被 then 或 catch 处理前拦截它们
请求成功：配置请求头
请求失败：请求错误处理
响应成功：响应数据处理
响应失败：响应错误提示

//导入axios npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀 ，baseURl
const baseURL ='http://localhost:8080'
const instance = axios.create({baseURL})
//添加响应拦截器
instance.interceptors.response.use(
	result =>{
		//http响应状态码为2xx会触发该函数
		return result.data;
	},
	err =>{
		//http响应状态码为2xx会触发该函数
		return Promise.reject(err);
	},
)
export default instance;