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. 常用组件

  • 表格组件

  • 表单组件

  • 按钮组件

相关推荐
m0_7482552610 分钟前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
长风清留扬30 分钟前
小程序毕业设计-音乐播放器+源码（可播放）下载即用
javascript·小程序·毕业设计·课程设计·毕设·音乐播放器
web1478621072343 分钟前
C# .Net Web 路由相关配置
前端·c#·.net
m0_7482478044 分钟前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play