当前位置： 首页 > article >正文

Vue (基础)

article 2024/10/21 12:35:10

前端开发概述

1. 前端开发的三大核心

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

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

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

什么是 Vue？

2. Vue的简介

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

3. Vue的基本使用

快速入门

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

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

  3. 准备元素 (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的基本使用

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

  • 表格组件

  • 表单组件

  • 按钮组件


http://www.kler.cn/news/358718.html

相关文章：

  • 【Pycharm】显示内存不足the IDE is running low on memory解决方法
  • 微信小程序UrlEncode编码，解决传递中文乱码问题
  • 外贸营销邮件模板：打造高效客户沟通策略！
  • 全面击破工程级复杂缓存难题
  • 解读大数据治理：数据管理的新纪元
  • 创客项目秀 | 基于XIAO ESP32S3 Sense 的最小 DIY 相机
  • python获取当前鼠标位置的RGB值
  • 手机数据恢复技巧：适用于手机的恢复应用程序
  • 基于全志H616智能家居项目
  • java的第一个游戏界面
  • C#中正则表达式
  • PortQry下载安装使用教程（超详细），Windows测试UDP端口
  • [MyBatis-Plus]扩展功能详解
  • 如何重置MySQL的root密码
  • 一站式解决方案，打造科学化的城市防洪防汛管理系统
  • pdf文件太大如何变小？
  • PHP函数：preg_replace()和preg_replace_callback() 【详记】
  • Android 10.0 第三方app接收不到开机广播问题的解决以及开机自启动功能实现一
  • asp.net mvc return json()设置maxJsonLength
  • Day37 || 509. 斐波那契数 、70. 爬楼梯、746. 使用最小花费爬楼梯