<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<input type="text" v-model="msg">
<p>{
{ msg }}</p>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
msg: "Hello"
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html><input v-model="sth" />
// 等同于
<input :value="sth" @input="sth = $event.target.value" />First use v-bind to bind a value, v-bind is used to bind variables, because value is its fixed attribute, value is followed by the name of the variable, and the value of input is actually the value of the sth variable.
At the same time, one thing is done is v-on, which is @input, and what is monitored is the effect of input. When you enter something in the input box, the element changes, and it listens to something in your input box.
Whether you input something or delete something, if the input box changes, it will trigger @input = "sth = $event.target.value", which is to get the specific value of the specific event.
- $event refers to the currently triggered event object.
- $event.target refers to the dom of the currently triggered event object
- $event.target.value is the value of the current dom (that is, the value in the middle of the input box, and then assign it to sth)
v-bind is used to process the variable binding in data() to the value in input, but if the input changes, the changed value will be given to sth in data. That is, changes from the top are sent to the bottom, and changes from the bottom are sent to the top.
The input input box is bound to the value of the message. The input is the event monitor, and then the input method is called. The event is passed in this method, which is to send the event to the message.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<input type="text" :value="msg" @input="input($event)">
<p>{
{ msg }}</p>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
msg: "Hello v-model"
}
},
methods:{
input(event){
this.msg = event.target.value
console.log(event.target.value,this.msg)
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
It can be seen that every time the value changes, its message is assigned successfully. event.target.value is actually the value in the dom, which is actually the specific value in the dom element. In fact, the value in the input box has changed and is given to msg.
Single button (radio) : A single selection result is bound to a v-model value
<input type="radio" value="go" v-model="msg">Go</input> Go is displayed to the user, and the value that is bound to msg is the value corresponding to value.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<input type="radio" value="go" v-model="msg">Go</input>
<input type="radio" value="vue" v-model="msg">Vue</input>
<p>{
{ msg }}</p>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
msg: ""
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="vue">
<input type="checkbox" value="swim" v-model="selected">游泳</input>
<input type="checkbox" value="gim" v-model="selected">健身</input>
<input type="checkbox" value="travel" v-model="selected">旅游</input>
<p>{
{ selected }}</p>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
selected: []
}
},
watch:{
selected(){
console.log(this.selected)
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
The above is the use of check boxes combined with v-moduel.
v-model : login case
Login case : get the user to enter the user name and password
<form action="#"> is the url to submit to, under normal circumstances it is https"//xxxxxx, # indicates that it is still on the original page, so that it will not jump around.
A highly encapsulated framework that reduces operations on dom, including components such as element ui, actually helps you do these things. Whether it is aesthetics or functionality, it will be very simple, and there is no need to use the old way of form to do it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@3"></script>
<style type="text/css">
</style>
</head>
<body>
<h1>欢迎来到管理页面后台</h1>
<div id="vue">
<form action="#">
用户名:<input type="text" v-model="form.username">
密码:<input type="text" v-model="form.password">
<button @click="loginBtn()">登入</button>
</form>
<p style="color:brown" v-if="notice">用户名密码不能为空！</p>
</div>
<script type="text/javascript">
const HelloVueApp = {
data(){
return{
form:{
username: "",
password: "",
},
notice: false
}
},
methods:{
loginBtn(){
if(this.form.username == "" || this.form.password == ""){
this.notice = true
}else{
this.notice = false
console.log(this.form)
}
}
}
}
//挂载到html当中
Vue.createApp(HelloVueApp).mount('#vue')
</script>
</body>
</html>
v-for must be mastered, because there must be a lot of lists and arrays of data in the front-end and back-end interactions. What is returned is json, and each element in json is an object. Take whatever data you want to use for this object. (iterating over arrays and objects)
v-if display or hide, including conditional judgment if else. v-show just does show hidden.