Vue的简单入门 三

news2025/3/6 16:27:06

目录

侦听器

watch

注意

表单输入绑定

v-model

v-model修饰符​编辑

 lazy

number

Trim

模板引用

组件组成 

 组件引用三步走

组件的嵌套关系

header 

Main

Aside 

Aritice 

 Item

App.vue组件引入三个子组件 

组件的注册方式 

全局注册组件的方法

(1) Vue 2 语法

(2) Vue 3 语法

侦听器

watch

<template>
    <h3>侦听器</h3>
    <button @click="chanage">修改值</button>
    <p>{{message}}</p>
</template>
<script>
export default{
    data(){
        return{
            message:"Hello!"//响应式数据：数据一旦修改，页面得到相应。
        }
    },
    methods:{
        chanage(){
            this.message="World!"
        }
    },
    watch: {
    // 监视 message 属性的变化
    message(newValue, oldValue) {
        // 数据发生变化时，自动执行的函数。（两次修改的值相同则不算变化）
        console.log(newValue, oldValue);
        if (newValue === oldValue) {
            // 实际上，由于 Vue 的响应式系统，如果新旧值相同，这个 watch 函数通常不会被触发。
            // 所以，这个 alert 理论上应该不会出现。
            alert("两次值相同"); // 在正常情况下不可能执行
        } else {
            alert("值发生了变化");
        }
    }
}
}
</script>

运行效果：当点击修改值的按钮时，调用修改值的函数，触发监听事件，弹窗提示。 

注意

监听器函数名必须与侦听的数据对象保持一致

表单输入绑定

v-model

在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript中相应的变量。手动连接值绑定和更改事件监听器会很麻烦，v-model指令帮我们简化了这一步骤。

<template>
    <h3>表单输入绑定</h3>
    <from>
        <input type="text" v-model="message">
        <p>{{message}}</p>
    </from>
</template>
<script>
export default{
    data(){
        return{
            message:""
        }
    }
}
</script>

运行效果：文本框内输入的文本与下面的文本同步更新。 

 复选框示例：

<template>
    <h3>表单输入绑定</h3>
    <from>
        <input type="text" v-model="message">
        <p>{{message}}</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </from>
</template>
<script>
export default{
    data(){
        return{
            message:"",
            checked:true
        }
    }
}
</script>

运行效果：点击复选框时，若勾选则右侧变为true 

v-model修饰符

 lazy

失去焦点时才会触发

<template>
    <h3>表单输入绑定</h3>
    <from>
        <input type="text" v-model.lazy="message">
        <p>{{message}}</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </from>
</template>
<script>
export default{
    data(){
        return{
            message:"",
            checked:true
        }
    }
}
</script>

运行效果： 输入aaaa后，文本框失去焦点，或者按下回车键，<p>{{message}}</p>将会显现。

number

作用是将用户输入的内容自动转换为数值类型（Number）

不同输入场景的效果

(1) 输入有效数字

  • 输入内容："123.45"
  • 绑定结果：123.45（Number 类型）

(2) 输入无效内容（非数值开头）

  • 输入内容："abc123"
  • 绑定结果："abc123"（String 类型）

(3) 输入混合内容（数值开头）

  • 输入内容："123abc"
  • 绑定结果：123（Number 类型，仅提取开头的有效数字部分）

(4) 输入空值

  • 输入内容：""（空字符串）
  • 绑定结果：""（String 类型）

严格数字输入：
如果需要强制用户输入纯数字，建议结合 <input type="number"> 或使用第三方库（如 vue-input-number）。

Trim

去掉前后空格 在输入框内前后输入空格时，会自动去除

模板引用

内容改变：{{模板语法}}

属性改变：v-bind：指令

事件：v-on:click

<template>
    <h3>模板引用</h3>
    <div  ref="container" class="container">容器</div>
    <button @click="getelementhandle">获取元素</button>
</template>

<script>
export default {
    data(){
        return{
            content:"内容"
        }
    },methods:{
        getelementhandle(){
            console.log(this.$refs.container)
            console.log(this.$refs.container.innerHTML='hhh')
        }
    }
}
</script>

运行效果： 点击获取元素按钮时，触发函数，执行操作第一句是在控制台打印该标签，第二句将标签内的值改为hhh,并打印该值。

组件组成 

组件最大的优势就是可复用性

组件组成：

Template：承载所有的HTML标签的  html

Script：用来承载所有的业务逻辑 js

Style：所有的样式 css

 组件引用三步走

<template>
<!-- 第三步：显示组件 -->
<mycomponnet/>
<mycomponnet/>
</template>

<script >
//第一步：引入组件
import mycomponnet from "./components/testexport.vue"
export default{
    //第二部：注入组件
    components:{
        mycomponnet
    }
}
</script>
<!-- <script setup>
import mycomponnet from "./components/testexport.vue"
</script> -->

<style>

</style>

 在<style scoped>中scoped的作用是：生效作用域，只在当前组件内生效。否则就是全局样式。

组件的嵌套关系

 

下面代码将完成以上效果：

header 

<template>
    <h3>Header</h3>
</template>
<script>
export default{
    data(){
        return{

        }
    }
}
</script>
<style scoped>
h3{
    border: 5px solid black;
    width: 100%;
    height: 100px;
    text-align: center;
    box-sizing: border-box;
    line-height: 100px;
}
</style>

Main

<template>
    <div class="main">
        <h3>Main</h3>
    <Aritice/>
    <Aritice/>
    </div>

</template>

<script>
import Aritice from './aritice.vue';
export default{
    components:{
        Aritice
    }
}
</script>
<style scoped>
.main{
    float: left;
    border: 5px solid black;
    width: 70%;
    height: 600px;
    text-align: center;
    box-sizing: border-box;
    line-height: 100px;
}
</style>

Aside 

<template>
    <div class="aside">
        <h3>Aside</h3>
        <item/>
        <item/>
        <item/>
    </div>

</template>
<script>
import Item from './item.vue';

export default{
    components:{
        Item
    },
    data(){
        return{

        }
    }
}
</script>
<style scoped>
.aside{
    float: right;
    border: 5px solid black;
    width: 28%;
    height: 600px;
    text-align: center;
    box-sizing: border-box;
    line-height: 100px;
}
</style>

Aritice 

<template>
    <h3>Aritice</h3>
</template>
<script>
export default{
    data(){
        return{

        }
    }
}
</script>
<style scoped>
h3{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 50px;
    background: #999;
}
</style>

 Item

<template>
    <h3>item</h3>
</template>
<script>
export default{
    data(){
        return{

        }
    }
}
</script>
<style scoped>
h3{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
    box-sizing: border-box;
    margin-top: 50px;
    background: #999;
}
</style>

App.vue组件引入三个子组件 

<template>
<Header/>
<Aside/>
<Main/>

</template>

<script >
import Aside from "./components/pages/aside.vue";
import Header from "./components/pages/header.vue"
import Main from "./components/pages/main.vue";
export default{
    components:{
        Header,
        Main,
        Aside
    }
}
</script>

文件结构 

运行效果如图 

组件的注册方式 

一个VUE组件在使用前需要被注册，这样vue才能在渲染模块时找到其对应的实现。

组件的注册有两种方式：全局注册和局部注册。

全局注册组件的方法

(1) Vue 2 语法

在 main.js 或入口文件中使用 Vue.component()：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue';

// 全局注册组件
Vue.component('MyComponent', MyComponent);

new Vue({
  render: h => h(App),
}).$mount('#app');
(2) Vue 3 语法

在 main.js 中通过 app.component() 注册：

import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from '@/components/MyComponent.vue';

const app = createApp(App);

// 全局注册组件
app.component('MyComponent', MyComponent);

app.mount('#app');

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2310606.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

指纹细节提取（Matlab实现）

指纹细节提取（Matlab实现）

指纹细节提取概述指纹作为人体生物特征识别领域中应用最为广泛的特征之一&#xff0c;具有独特性、稳定性和便利性。指纹细节特征对于指纹识别的准确性和可靠性起着关键作用。指纹细节提取&#xff0c;即从指纹图像中精确地提取出能够表征指纹唯一性的关键特征点&#xff0c;是…
阅读更多...
STM32——串口通信 UART

STM32——串口通信 UART

一、基础配置 Universal Asynchronous Receiver Transmitter 异步&#xff0c;串行&#xff0c;全双工 TTL电平 &#xff1a;高电平1 低电平0 帧格式&#xff1a; 起始位1bit 数据位8bit 校验位1bit 终止位1bit NVIC Settings一栏使能接受中断。 之前有设置LCD&#xff0c;…
阅读更多...
PHP fastadmin 学习

PHP fastadmin 学习

安装php环境安装mysql插件 修改 php.ini下载 phpstudy、fastadmin 错误 安装FastAdmin could not find driver 参考链接 安装插件 创建1.php <? phpinfo(); ?>运行 http://127.0.0.1/1.php 查看 POD 页面访问404 伪静态 Apache <IfModule mod_rewrite.c> O…
阅读更多...
Autojs无线连接vscode方法

Autojs无线连接vscode方法

1.获得电脑的IP 在电脑的CMD界面输入 ipconfig 然后找到ipv4的那一行&#xff0c;后面的即是你的电脑IP地址 2.打开vscode的autojs服务 安装autojs插件 在vscode界面按下ctrlshiftp 输入autojs 找到 点击 之后打开手机上的autojs 之后输入刚刚电脑上的地址 可以看到vsc…
阅读更多...
天津大学02-深度解读DeepSeek：部署、使用、安全【文末附下载链接】

天津大学02-深度解读DeepSeek：部署、使用、安全【文末附下载链接】

大模型风险与不当用例——价值观错位 大模型与人类价值观、期望之间的不一致而导致的安全问题&#xff0c;包含&#xff1a;• 社会偏见&#xff08;Social Bias&#xff09;LLM在生成文本时强化对特定社会群体的刻板印象&#xff0c;例如将穆斯林与恐怖主义关联&#xff0c;或…
阅读更多...
SPI驱动(三) -- SPI设备树处理过程

SPI驱动(三) -- SPI设备树处理过程

文章目录 参考资料&#xff1a;一、SPI设备树节点构成二、SPI设备树示例2.1 SPI控制器节点属性2.2 SPI设备节点属性 三、SPI设备树处理过程四、总结 参考资料&#xff1a; 内核头文件&#xff1a;include\linux\spi\spi.h内核文档&#xff1a;Documentation\devicetree\bindin…
阅读更多...
MARL零样本协调之Fictitious Co-Play学习笔记

MARL零样本协调之Fictitious Co-Play学习笔记

下列引用来自知乎作者Algernon 知乎link FCP作为ZSC领域两阶段训练方法的开创者 论文《Collaborating with Humans without Human Data》来自 NeurIPS 2021。这篇论文提出 Fictitious Co-Play (FCP) 来解决 ZSC 问题。论文认为&#xff0c;ZSC 的第一个重要问题是对称性&#x…
阅读更多...
idea中的查看git历史记录，不显示详细信息

idea中的查看git历史记录，不显示详细信息

一、正常情况显示 1、idea中git查看history正常显示如下图&#xff1a; 二、非正常情况下显示 1、idea中git查看history&#xff0c;现在不显示提交的历史文件详细信息&#xff0c;如下图&#xff1a; 三、解决方式 1、找到如下窗口中画红色框的黑色线条&#xff0c;鼠标放在…
阅读更多...
Redis——快速入门

Redis——快速入门

目录 Redis简介 安装配置(Windows) GUI工具RedisInsight的使用 十大数据类型&#xff08;5基本5高级&#xff09; 字符串String 列表List 集合Set(S) 有序集合SortedSet(Z) 哈希Hash(H) 发布订阅模式 消息队列Stream(X) 地理空间Geospatial(GEO) HyperLogLog(PF) …
阅读更多...
LLM 模型 Prompt 工程

LLM 模型 Prompt 工程

目录 1、Prompt 基础概念 2、Prompt 主要构成 3、Prompt 相关技术 3.1、思维链 3.2、自洽性 3.3、思维树 1、Prompt 基础概念 Prompt 工程是通过设计和优化自然语言提示&#xff08;Prompt&#xff09;&#xff0c;引导LLM生成符合特定任务需求的输出的技术。其核心目标是…
阅读更多...
Vue中实现大文件的切片并发下载和下载进度展示

Vue中实现大文件的切片并发下载和下载进度展示

Vue中实现大文件的切片下载 切片下载需要后端提供两个接口&#xff0c;第一个接口用来获取当前下载文件的总切片数&#xff0c;第二个接口用来获取具体某一个切片的内容。 界面展示 数据流展示 代码 接口 // 切片下载-获取文件的总切片数 export function getChunkDownload…
阅读更多...
开源表单、投票、测评平台部署教程

开源表单、投票、测评平台部署教程

填鸭表单联合宝塔面板深度定制，自宝塔面板 9.2 版本开始，在宝塔面板-软件商店中可以一键部署填鸭表单系统。 简单操作即可拥有属于自己的表单问卷系统，快速赋能业务。即使小白用户也能轻松上手。 社区版体验地址：https://demo.tduckapp.com/home 前端项目地址： tduck-fro…
阅读更多...
GaussDB性能调优技术指南

GaussDB性能调优技术指南

​一、性能调优核心目标 ​降低响应时间&#xff1a;缩短单次查询或事务的处理时间&#xff08;如从秒级优化到毫秒级&#xff09;。 ​提高吞吐量&#xff1a;支撑更高并发请求&#xff08;如从千次/秒提升到百万次/秒&#xff09;。 ​资源高效利用&#xff1a;减少 CPU、…
阅读更多...
【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等等）

【后端开发】go-zero微服务框架实践（goland框架对比，go-zero开发实践，文件上传问题优化等等）

【后端开发】go-zero微服务框架实践&#xff08;goland框架对比&#xff0c;go-zero开发实践&#xff0c;文件上传问题优化等&#xff09; 文章目录 1、go框架对比介绍2、go-zero 微服务开发实践3、go-zero 文件上传问题优化 1、go框架对比介绍 国内开源goland框架对比 1 go-…
阅读更多...
C#—csv文件格式操作实例【在winform表格中操作csv】

C#—csv文件格式操作实例【在winform表格中操作csv】

C#—csv文件格式操作实例【在winform表格中操作csv】 实例一 实例效果 当在winform界面中点击读取按钮时 将csv中的所有数据读取出来放置在datagridview控件&#xff0c;可以在datagridview控件中编辑数据&#xff0c;当点击保存按钮时 将datagridview控件中的所有数据存储在…
阅读更多...
一周学会Flask3 Python Web开发-WTForms表单验证

一周学会Flask3 Python Web开发-WTForms表单验证

锋哥原创的Flask3 Python Web开发 Flask3视频教程&#xff1a; 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 我们可以通过WTForms表单类属性的validators属性来实现表单验证。 常用的WTForms验证器 验证器说明DataRequired(messageNo…
阅读更多...
23种设计模式一览【设计模式】

23种设计模式一览【设计模式】

文章目录 前言一、创建型模式&#xff08;Creational Patterns&#xff09;二、结构型模式&#xff08;Structural Patterns&#xff09;三、行为型模式&#xff08;Behavioral Patterns&#xff09; 前言 设计模式是软件工程中用来解决特定问题的一组解决方案。它们是经过验证…
阅读更多...
GPIO及其应用

GPIO及其应用

GPIO及其应用 文章目录 GPIO及其应用1.GPIO概括2.GPIO工作基本结构3.GPIO寄存器3.1寄存器总览3.2寄存器功能3.3BIT简写的代表 4.GPIO的电气特性4.1拉电流与灌电流4.2驱动大功率负载4.3电平逻辑兼容性 5.LED闪烁(实操)6.LED交替闪烁&#xff08;实操&#xff09;7.开关控制LED灯…
阅读更多...
NO1.C++语言基础|四种智能指针|内存分配情况|指针传擦和引用传参|const和static|c和c++的区别

NO1.C++语言基础|四种智能指针|内存分配情况|指针传擦和引用传参|const和static|c和c++的区别

1. 说⼀下你理解的 C 中的四种智能指针 智能指针的作用是管理指针&#xff0c;可以避免内存泄漏的发生。 智能指针就是一个类&#xff0c;当超出了类的作用域时&#xff0c;就会调用析构函数&#xff0c;这时就会自动释放资源。 所以智能指针作用的原理就是在函数结束时自动释…
阅读更多...
Vue 关于如何在vue中实现跨域请求问题

Vue 关于如何在vue中实现跨域请求问题

&#x1f4da;首先&#xff0c;让我们了解一下什么是跨域。当一个请求的URL的协议、域名、端口三者中任意一个与当前页面的URL不同&#xff0c;就称为跨域请求。 &#x1f512;为什么会出现跨域问题呢&#xff1f;这是因为浏览器的同源策略限制。同源策略是浏览器最核心的安全…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023