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

  • 表格组件

  • 表单组件

  • 按钮组件

相关推荐
开心工作室_kaic39 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā39 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶：基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒，让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端：HTML （学习笔记）【1】
前端·笔记·学习·html
前端李易安4 小时前
Webpack 热更新（HMR）详解：原理与实现
前端·webpack·node.js
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10怎样让音频速度变慢？请跟随以下方法进行操作