江苏华东建设基础工程有限公司网站成都旅游景点排名前十
目录
侦听器
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');
