vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
前言：
上一章已经学会如何创建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得到的就是点击对象
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 = Vue.