Vue (基础)

OLDERHARD2024-10-28 2:02

前端开发概述

1. 前端开发的三大核心

  • HTML ：负责网页的结构和内容，如标签 (form, table, a, div, span)。

  • CSS：负责网页的样式和布局，如颜色、字体、背景、宽度和高度等。

  • JavaScript：负责网页的行为与交互，处理用户输入和动态效果。

什么是 Vue？

2. Vue的简介

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

3. Vue的基本使用

快速入门

  1. 准备html页面，并引入Vue模块 (官方提供)

  2. 创建Vue程序的应用实例

  3. 准备元素 (div)，被Vue控制

    {{msg}}

    <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>
      手链价格为: 9.9 19.9 29.9
      复制代码 
      <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：

    <button v-on:click="money">点我有惊喜</button>   <button @click="love">再点更惊喜</button>
    复制代码 
      <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的基本使用

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

  • get

    复制代码 
      <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>
  1. 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. 项目创建与启动

  1. 创建项目：

    复制代码 
    npm init vue@latest

  2. 安装依赖：

    复制代码 
    npm install

  3. 启动项目：

    复制代码 
    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>

Element Plus

12. Element Plus简介

  • Element：是饿了么团队研发的，基于 Vue 3，面向设计师和开发者的组件库。

  • 组件：组成网页的部件，例如：超链接、按钮、图片、表格、表单、分页条等等。

13. 快速入门Element Plus

  1. 创建Vue项目并安装Element Plus：

    复制代码 
    npm install element-plus --save

  2. 在main.js中引入Element Plus组件库。

14. 常用组件

  • 表格组件

  • 表单组件

  • 按钮组件

相关推荐
崔庆才丨静觅14 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606115 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了15 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅15 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅16 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅16 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment16 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅16 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊16 小时前
jwt介绍
前端
爱敲代码的小鱼16 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05Linux下V2Ray安装配置指南06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07Claude Code Skills 实用使用手册08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09openclaw使用nginx反代部署过程 与disconnected (1008): pairing required解决10Vue-skills的中文文档