Vue的简单入门 三

目录

侦听器

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');