Vue.js：现代Web开发的利器

引言

在现代Web开发中，用户界面的构建变得越来越复杂和多样化。
Vue.js作为一款轻量级且灵活的JavaScript框架，凭借其易学性和强大的功能，成为了开发者的热门选择。
无论是小型项目还是大型应用，Vue都能帮助开发者快速构建出优雅的用户界面。
本篇文章将带您深入了解Vue的基本概念、常用指令、Axios的使用方法、工程化开发以及Element Plus组件库，助您在前端开发的道路上迈出坚实的一步。

前端开发概述

1. 前端开发的三大核心

HTML：负责网页的结构和内容，如标签 (form, table, a, div, span)。
CSS：负责网页的样式和布局，如颜色、字体、背景、宽度和高度等。
JavaScript：负责网页的行为与交互，处理用户输入和动态效果。

什么是 Vue？

2. Vue的简介

Vue是一个用于构建用户界面的渐进式JavaScript框架。它能够在页面中简洁地处理数据和视图之间的绑定。

3. Vue的基本使用

快速入门

准备html页面，并引入Vue模块 (官方提供)
创建Vue程序的应用实例
准备元素 (div)，被Vue控制

<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>

常用指令

4. Vue中的指令

指令是带有v-前缀的特殊属性，具有特定功能。以下是一些常用指令：

v-for：

列表渲染，遍历容器的元素或者对象的属性。

     <div id="app">
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr >
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!-- 哪个元素要出现多次，v-for指令就添加到哪个元素上 -->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            
        </table>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp } from
            'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建应用实例
        createApp({
            data() {
                return {
                    articleList: [
                        {
                            title: "医疗反腐绝非砍医护收入",
                            category: "时事",
                            time: "2023-09-5",
                            state: "已发布"
                        },
                        {
                            title: "中国男篮缘何一败涂地？",
                            category: "篮球",
                            time: "2023-09-5",
                            state: "草稿"
                        },
                        {
                            title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",
                            category: "旅游",
                            time: "2023-09-5",
                            state: "已发布"
                        }
                    ]
                }
            }
        }).mount("#app")//控制页面元素
    </script>
    ```

- **v-bind**：

动态为HTML标签绑定属性值，如设置 href，css样式等。
    ```html
    <div id="app">
        <a v-bind:href="url">OLDERHARD</a>
        <br>
        <a :href="url">OLDERHARD</a>

    </div>

    <script type="module">
        //引入vue模块
        import { createApp} from 
                'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    url: "https://www.itheima.com"
                }
            }
        }).mount("#app")//控制html元素
    </script>

    ```

- **v-if / v-else-if / v-else**：
  - 条件性的渲染某元素，判定为true是渲染，否则不渲染
  - 原理：基于条件判断，来控制创建或移除元素节点 
  - 适用场景：要么显示，要么不显示，不频繁切换的场景
``` html
<div id="app">

        手链价格为:  <span v-if="customer.level>=0 && customer.level<=1">9.9</span>  
                    <span v-else-if="customer.level<=4">19.9</span>
                    <span v-else>29.9</span>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer:{
                        name: 'olderhard',
                        level: 4
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>

v-show：
- 根据条件展示某元素，区别在于切换的是display属性的值
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景

<body>
    <div id="app">
        手链价格为:  <span v-show="customer.level>=0 && customer.level<=1">9.9</span>  
                    <span v-show="customer.level>=2 &&customer.level<=4">19.9</span>
                    <span v-show="customer.level>4">29.9</span>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    customer:{
                        name: 'olderhard',
                        level: 4
                    }
                }
            }
        }).mount("#app")//控制html元素
    </script>

v-on：

v-on：
<div id="app">
        <button v-on:click="money">点我有惊喜</button> &nbsp;
        <button @click="love">再点更惊喜</button>
    </div>

    <script type="module">
        //导入vue模块
        import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        //创建vue应用实例
        createApp({
            data() {
                return {
                    //定义数据
                }
            },
            methods:{
                money: function(){
                    alert("送魅魔啦！")
                },
                love: function(){
                    alert("美美爱你！")
                }
            }
        }).mount("#app");//控制html元素
    </script>

v-model：

在表单元素上创建双向数据绑定，可以方便的获取或设置表单项数据。

     <div id="app">

        文章分类: <input type="text" v-model="searchConditions.category"/>
        发布状态: <input type="text" v-model="searchConditions.state" />
        <button>搜索</button>

    </div>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data() {
                return {
                    searchConditions:{
                        category: "zaijian",
                        state: "魅魔"
                    }
                }
            }

        }).mount("#app")//控制html元素
    </script>

Vue 生命周期

5. 生命周期概述

生命周期：指一个对象从创建到销毁的整个过程。
生命周期的八个阶段：每个阶段会自动执行一个生命周期方法(钩子)，让开- 发者有机会在特定的阶段执行自己的代码。
但是对我们有用的就是mounted (挂载完成阶段)，在该函数中发送请求获取数据。写的位置，与data、methods同级。

Axios

6. Axios的介绍

Axios是一个基于Promise的HTTP库，用于发送异步请求，极大简化了原生Ajax的使用。

7. Axios的基本使用

引入Axios的js文件，使用Axios发送请求，并获取相应结果

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /* 发送请求 */
        axios({
            method: 'get',
            url: 'http://localhost:8080/article/getAll'
        }).then(result=>{
            //成功回调
            //result代表服务器响应的所有的数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据
            console.log(result.data);
        }).catch(err=>{
            //失败回调
            console.log(err);
        })
    </script>

post

<script>
    let article={
    title: "明天会更好",
    category: "生活",
    time: "2024-10-19",
    state: "草稿"
}
    /* 发送请求 */
    axios({
        method: 'post',
        url: 'http://localhost:8080/article/add',
        data:article
    }).then(result=>{
        //成功回调
        //result代表服务器响应的所有的数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据
        console.log(result.data);
    }).catch(err=>{
        //失败回调
        console.log(err);
    })
</script>

Axios-请求方式别名

为了方便起见，Axios已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url ,data , config)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- <script>
        /* 发送请求 */
        axios.get('http://localhost:8080/article/getAll'

        ).then(result=>{
            console.log(result.data);
        }).catch(err=>{
            console.log(err);
        })
    </script> -->
    <script>
        let article={
        title: "明天会更好",
        category: "生活",
        time: "2024-10-19",
        state: "草稿"
    }
        /* 发送请求 */
        axios.post('http://localhost:8080/article/add',article
        ).then(result=>{
            console.log(result.data);
        }).catch(err=>{
            console.log(err);
        })
    </script>

工程化开发

8. Vue的工程化

使用create-vue脚手架工具可以快速构建Vue项目。

9. 项目创建与启动

创建项目：
```
npm init vue@latest
```
安装依赖：
```
npm install
```
启动项目：
```
npm run dev
```

组件化开发与API风格

10. 单文件组件（SFC）

*.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件(SFC)。
Vue的单文件组件会将已给组件的逻辑(JS)，模板(HTML)和样式(CSS)封装在同一个文件里(*.vue)。

11. 组合式API与选项式API

选项式API（过于死板，不推荐使用）：

<script>
export default{
data(){
  msg:'上海'
}
}

组合式API（推荐）：

<script setup>
import {ref,onMounted} from 'vue';
  
//定义响应式数据
const count=ref(0);

//声明函数
function increment(){
    count.value++;
}

//声明钩子函数
onMounted(()=>{
    console.log('vue 已经ok...')
});
</script>

<template>
    <button v-on:click="increment">count:{{ count }}</button>
</template>
<style scoped>
</style>