vue3知识点2.常⽤指令v-model：valuev-ifv-showv-forv-bi。。。
前⾔：
上⼀章已经学会如何创建vue实例了，这⼀章是vue的基础知识点，包括模板语⾔，以及常见的⼀些命令。最底部有运⾏好的全部代码链接。
常见报错：
hbuiderX不报错的话去浏览器运⾏。⼀些warn可以不⽤管。
没有任何渲染：
检查是否写了容器app
检查实例是否绑定了这个app。vm.mount(’#app’)
检查你的html代码是否写到了app容器外⾯
检查{{ }} ⾥⾯是否有格式错误。
假如你的浏览器仍然是{{ pop }}，没有渲染上可能原因：
双括号⾥⾯没有空出来空格{{pop}} ，有时不空出来也没事。
data那⾥该有的逗号没写，
vue实例data下⾯多半个“{”或者少半个“{”。
部分没有执⾏：渲染不上或者事件没有执⾏函数。
⼀定要注意你应⽤的变量是否和data⾥写的是⼀个，经常相近的单词会写错。
⽐如data⾥是arr，应⽤的时候很容易⾃⼰写成this.arrlist等。或者CV⼤法的代码（bushi）记得改 变量。
函数⾥要注意的：
data(){
return data
},//这个别丢
methods:{//冒号别忘了写
func0(){//()别忘了写
},
func:(){//这⾥多加了⼀个冒号，应去掉。
//和es5写法不要混了。
},
func1:function(){
//正确的es5写法
}
,//两个函数相邻这个逗号
func2(){
}//最后数数，别多⼀个少⼀个
}
不显⽰图⽚
到浏览器运⾏显⽰图⽚。
v-for遍历的时候，显⽰值不正确。
在遍历的时候，有两种的得到值的办法，⼀种是{{ value }}，另⼀种是在属性中写，title=“value”.
但这样写是不对的，经常会忘记给属性绑定上，才会得到变量的值value。正确写法 :title=“value”
<div v-for="value in namearr">
<input type="checkbox":id="value":value="value"v-model="checkedNames"/>
<label :for="value">{{ value }}</label><br />
</div>
要想让namearr的数据全显⽰出来，⽽不是显⽰value的话，标签⾥写{{ }}，属性要加上冒号才能表⽰value.
模板语⾔：
差值表达式/mastach语法：把变量绑定在标签内部{{ msg }}
⽂本差值中还可以写表达式⽤于判断：
{{ opop?“yes”:“no” }}
opop的值是true，则渲染yes，否则渲染no。opop:1，渲染yes.
{{num+1}}
data={ ok:”1”,num:10}
常⽤指令：
指令带有前缀 v-，以表⽰它们是 Vue 提供的特殊 attribute。
数据双向绑定v-model
表单输⼊绑定，不只应⽤于表单。 v-model="value1"它取代的是 :value=“value” ，有了v-model就不⽤绑定value了。
<div id="app">
<h4>vue的双向绑定的功能</h4>
<input type="text"v-model="value1"/>
<h3>{{ value1 }}</h3>
</div>
const data ={
value1:"balabalabal",
}
那么这个时候就会觉得input的value好像没作⽤了，或者感觉这俩作⽤⼀样，这是⼀个误区。
实际上v-model绑定的是value值，它实现的是视图和data的双向绑定，任何⼀个变，另⼀个都会实时改变。
视图层和数据层可以互相改变。
:value
:value只是绑定了初始的时候data⾥的值，给渲染到浏览器。
<input type="text":value="value1"/>
{{ value1 }}
data={
value1:123456
}
当我们改变输⼊框的值时，我们去掉3个改成123，渲染的value1不会发⽣变化。不能由视图层改数据层。
它只能由数据层渲染到视图，也就是说data⾥⾯改变了，视图层才会变化，反着不⾏。
data={
value1:123
}
假如只绑定了:value，如何实现数据的双向绑定呢？
:
value实现数据双向绑定
input事件可以实现。
简写：
<input type="text"@input="value1=$event.target.value":value="value1"/>
{{ value1 }}
data={
value1:123
}
京藏高速 堵车简写看不懂的看这个理解⼀下：
//html
<button @click='handleclick'>点击</button>
大众 新宝来
<button @click='handleclick1($event)'>点击1</button>
//js
methods:{
handleclick(e){
//e不⽤传参，e.target得到的就是点击对象比亚迪宋plus新能源2023款价格
console.log("我是点击的对象"+e.target)
//我是点击的对象[object HTMLButtonElement]
},
handleclick1:(e){
//传参$event后e就是$event，实际结果都是得到⿏标点击的button对象
console.log("我是点击的对象"+e.target)
/
/我是点击的对象[object HTMLButtonElement]
},
}
通过这个例⼦可以明⽩在函数⾥e.target就是得到事件对象的。
:value不能从由视图层改变到数据层改变。也就说，实现这⼀步就可以双向绑定了，那需要做的就是得到视图层的数据，把它赋给数据层。
数据层数据=视图层数据
我们需要⼀个事件，可以是点击事件，也可以是input事件，让他去调⽤函数，在函数⾥得到视图层的数据，e.target如上述是事件对象，那么在input⾥这个事件对象就是input标签，e.target.value就是视图层的数据
在函数中的得到数据层数据是this.data。
那为什么是this的data呢，这个记住就可以，vue在实例化的时候改变了this的指向，使this能够访问到data的数据。与this的其他指向⽆关。
还是why?
所以在函数中赋值即可：
this.msg = e.target.value;
input中的事件会在value改变的时候调⽤这个函数，⽤改变的value给msg赋值，使之能够实时渲染，这样就可以实现双向绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="js/vue.global.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text"@input="handleInput":value="msg"/>
<div>{{ msg }}</div>
</div>
</div>
</body>
<script type="text/javascript">
data ={
msg:'123',
}
const vm = ateApp({
data(){
return data
},
哈弗
东风标致206二手车methods:{
handleInput(e){
南京到长沙高铁this.msg = e.target.value;
},
}
})
</script>
</html>
改变框的值，msg渲染也可以改变。
那已经有v-model了，:value实现双向绑定有什么作⽤呢？
:value实现双向绑定的作⽤
当v-model不⽣效的时候替代v-model。
v-model双向绑定的依据是通过data⾥⾯的渲染到v-model上，必须直接改变data⾥的值才会和input框同步渲染。
<input type="number"value="One"v-model="aaa"/>
data={
aaa:1
}
有⼀种情况是当input的value值不通过data⾥的aaa改变，⽽是像下边⼀样通过⼀个事件函数⾃⾏改变，在视图层就⾃⾏变化了，没有通过aaa传值。此时v-model的值也能显⽰，但与input的value值不匹配。可能会出现多⼀位的情况.
当事件在视图层改变了value值的时候，v-model很可能失效。
<input type="number"oninput="if (value < 0) value = 0; if(value>1000) value=1000;"/>
这时我们就需要：value来控制。通过上⾯：value的双向绑定详解也能知道，:value是将数据层的值赋给
：value代替v-model的⽤法：
看这个例⼦：oninput改变了视图层的value值。v-model得出来的值与框⾥不⼀致。限定最⼤值1000后还⽐它多⼀位。
这是⽤v-model时,v-model绑定的商品数量
<tr v-for="item,index in goodslist":key='index'>
<td><input type="number"min="0"max="1000"
oninput="if (value < 0) value = 0; if(value>=1000) value=1000;"
v-model='unt'
>
</td>
<td>单个价格：{{ item.unt }} 单个数量--- {{ unt}}</td>
<td><button :disabled="unt<=0">删除</button></td>
</tr>
这是⽤:value。v-model绑定的谁，⽤：value就绑定谁，同时给input绑定上，函数名也是这个。
特别要注意的是@input=“value1=$event.target.value” :value="value1"⼀定要写在事件（oninput）的后⾯，否则会和v-model效果⼀样。
<tr v-for="item,index in goodslist":key='index'>
<td><input type="number"min="0"max="1000"
oninput="if (value < 0) value = 0; if(value>=1000) value=1000;"
onkeypress="return event.charCode >=48 && event.charCode <=57 "
@input="unt=$event.target.value)"
:
value="unt">
</td>
<td>{{ item.unt }} 数量--- {{ unt }}</td>
<td><button :disabled="unt<=0">删除</button></td>
</tr>