v-model的使用
基本使用
<input type="text" v-model="message">
v-model处理过程
1.v-bind value绑定
2.监听事件input事件 更新message的值
<input type="text" :value="message" @input="inputChange">
实现 v-model 案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<!-- <input type="text" v-model="message"> -->
<input type="text" :value="message" @input="inputChange">
<h2>{{message}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const App = {
template: '#my-app',
data() {
return {
message: "Hello World"
}
},
methods: {
inputChange(event) {
this.message = event.target.value;
}
}
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>
绑定其他表单
data() {
return {
intro: "Hello World",
isAgree: false,
hobbies: ["basketball"],
gender: "",
fruit: "orange"
}
},
绑定textarea
<label for="intro">
自我介绍
<textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
</label>
<h2>intro: {{intro}}</h2>
单选框
<label for="agree">
<input id="agree" type="checkbox" v-model="isAgree"> 同意协议
</label>
<h2>isAgree: {{isAgree}}</h2>
多选框
<span>你的爱好: </span>
<label for="basketball">
<input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
</label>
<label for="football">
<input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
</label>
<label for="tennis">
<input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球
</label>
<h2>hobbies: {{hobbies}}</h2>
<span>你的爱好: </span>
<label for="basketball">
<input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
</label>
<label for="football">
<input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
</label>
<label for="tennis">
<input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球
</label>
<h2>hobbies: {{hobbies}}</h2>
<span>喜欢的水果: </span>
<select v-model="fruit" multiple size="2">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>fruit: {{fruit}}</h2>
v-model修饰符：
lazy修饰符 只有input输入框失去焦点或者按空格是才触发
<input type="text" v-model.lazy="message">
number修饰符 number修饰符可以让输入的数字保持number的格式
<input type="text" v-model.number="message">
<h2>{{message}}</h2>
<button @click="showType">查看类型</button>
methods: {
showType() {
console.log(this.message, typeof this.message);
},
}
trim修饰符 在使用input时，用户在前后输入空格会存入字符串中 trim修饰符可以消除前后空格
<input type="text" v-model.trim="message">
<button @click="showResult">查看结果</button>
methods: {
showResult() {
console.log(this.message);
}
}
组件化开发
注册全局组件
使用app注册一个全局组件 app.compontent()
全局组件 意味着注册的这个组件可以在任何的组件模板中使用
<template id="component-a">
<h2>{{title}}</h2>
<p>{{desc}}</p>
<button @click="btnClick">按钮点击</button>
</template>
app.component("component-a", {
template: "#component-a",
data() {
return {
title: "我是标题",
desc: "我是内容, 哈哈哈哈哈",
};
},
methods: {
btnClick() {
console.log("按钮的点击");
},
},
});
<template id="component-b">
<div>
<input type="text" v-model="message"/>
<h2>{{message}}</h2>
</div>
</template>
app.component("component-b", {
template: "#component-b",
data() {
return {
message: "Hello World",
};
},
});
<template id="my-app">
<component-a></component-a>
<component-b></component-b>
</template>
const App = {
template: "#my-app",
};
const app = Vue.createApp(App);
app.mount("#app");
注册局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<template id="my-app">
<h2>{{message}}</h2>
<component-a></component-a>
</template>
<template id="component-a">
<h2>我是组件A</h2>
<p>我是内容, 哈哈哈哈</p>
</template>
<script src="../js/vue.js"></script>
<script>
const ComponentA = {
template: "#component-a"
}
const App = {
template: '#my-app',
components: {
ComponentA: ComponentA
},
data() {
return {
message: "Hello World"
}
}
}
const app = Vue.createApp(App);
app.mount('#app');
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
