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

Vue的简单入门 三

article 2025/3/6 15:49:40

目录

侦听器

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.kler.cn/a/573137.html

相关文章：

  • OCPP扩展机制与自定义功能开发：协议灵活性设计与实践 - 慧知开源充电桩平台
  • 确定信号分析：从傅里叶级数到信号带宽的Matlab实践
  • Zookeeper 的 Node（Znode） 是什么？Zookeeper 监听机制的特点是什么？
  • Mybatis控制台打印SQL执行信息(执行方法、执行SQL、执行时间)
  • ShareExpert SparseMoE的学习
  • Sass 模块化革命：深入解析 @use 语法，打造高效 CSS 架构
  • 如何在 WebSocketHandler 中控制连接的断开
  • 016.3月夏令营：数理类
  • js 之 lodash函数库 的下载与基础使用
  • 深圳区域、人口、地铁线
  • Amorphous Data如何在DigitalOcean上构建智能、经济的AI Agent
  • Matlab实现车牌识别
  • 【AI神经网络与人脑神经系统的关联及借鉴分析】
  • 数据结构（四）栈和队列
  • python代码注释方式
  • （数据结构）双向链表
  • 自己的网页加一个搜索框，调用deepseek的API
  • 2025-03-04 学习记录--C/C++-PTA 习题5-3 使用函数计算两点间的距离
  • JetBrains学生申请
  • 最新Spring Security实战教程（一）初识Spring Security安全框架