vue3基础2 一些常用命令前言：上一章已经学会如何创建vue实例了，这一章是vue的基础知识点，包括模板语言，以及常

前言：

上一章已经学会如何创建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:(){
       
    },
    func1:function(){
		
	}
    ,
    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的值是true，则渲染yes,否则渲染no。opop:1,渲染yes.

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", }


![image-20211216151135228](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ad4fee966224103bb66fee3faf1379f~tplv-k3u1fbpfcp-zoom-1.image)

那么这个时候就会觉得input的value好像没作用了，或者感觉这俩作用一样，这是一个误区。

实际上v-model绑定的是value值，它实现的是视图和data的双向绑定，任何一个变，另一个都会实时改变。

视图层和数据层可以互相改变。

#### :value

:value只是绑定了初始的时候data里的值，给渲染到浏览器。

data={ value1:123456 }


![image-20211217004208085](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/164303b8f81645d3af079321cf0e5dd1~tplv-k3u1fbpfcp-zoom-1.image)

当我们改变输入框的值时，我们去掉3个改成123，渲染的value1不会发生变化。不能由视图层改数据层。

![image-20211217004400350](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/485f142d50534fb680e9e5cd24d90ec4~tplv-k3u1fbpfcp-zoom-1.image)

它只能由数据层渲染到视图，也就是说data里面改变了，视图层才会变化，反着不行。

data={ value1:123 }


![image-20211217004647637](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3579dab8ee2f4ab199616ffc9089f81d~tplv-k3u1fbpfcp-zoom-1.image)

假如只绑定了:value,如何实现数据的双向绑定呢？

#### :value实现数据双向绑定

input事件可以实现。

简写：

<input type="text" @input="value1=$event.target.value" :value="value1" /> {{ value1 }} data={ value1:123 }


简写看不懂的看这个理解一下：

<button @click='handleclick'>点击 <button @click='handleclick1($event)'>点击1

methods:{ handleclick(e){

    console.log("我是点击的对象"+e.target)
    
},
handleclick1:(e){	
    
	console.log("我是点击的对象"+e.target)
	
},

}


通过这个例子可以明白在函数里e.target就是得到事件对象的。

:value不能从由视图层改变到数据层改变。也就说，实现这一步就可以双向绑定了，那需要做的就是得到视图层的数据，把它赋给数据层。

 数据层数据=视图层数据

我们需要一个事件，可以是点击事件，也可以是input事件，让他去调用函数，在函数里得到视图层的数据，e.target如上述是事件对象，那么在input里这个事件对象就是input标签，e.target.value就是视图层的数据

在函数中的得到数据层数据是this.data。

那为什么是this的data呢，这个记住就可以，vue在实例化的时候改变了this的指向，使this能够访问到data的数据。与this的其他指向无关。

还是why?

[详细原因请看这位大佬的解释](https://blog.csdn.net/weixin_42554191/article/details/107194022)

所以在函数中赋值即可：

 this.msg = e.target.value;

input中的事件会在value改变的时候调用这个函数，用改变的value给msg赋值，使之能够实时渲染，这样就可以实现双向绑定。


改变框的值，msg渲染也可以改变。

![image-20211217021707320](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fc8334a849f647aab8a6aa505111c674~tplv-k3u1fbpfcp-zoom-1.image)

那已经有v-model了，:value实现双向绑定有什么作用呢？

#### :value实现双向绑定的作用

当v-model不生效的时候替代v-model。

v-model双向绑定的依据是通过data里面的渲染到v-model上，必须直接改变data里的值才会和input框同步渲染。

data={ aaa:1 }


有一种情况是当input的value值不通过data里的aaa改变，而是像下边一样通过一个事件函数自行改变，在视图层就自行变化了，没有通过aaa传值。此时v-model的值也能显示，但与input的value值不匹配。可能会出现多一位的情况.

当事件在视图层改变了value值的时候，v-model很可能失效。


这时我们就需要：value来控制。通过上面：value的双向绑定详解也能知道，:value是将数据层的值赋给

#### ：value代替v-model的用法：

看这个例子：oninput改变了视图层的value值。v-model得出来的值与框里不一致。限定最大值1000后还比它多一位。

这是用v-model时,v-model绑定的商品数量

单个价格：{{ item.price*item.count }} 单个数量--- {{ item.count}} 删除


![image-20211218112036172](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5ecf9fff545e4da8bdc4a87cd7b2f5ea~tplv-k3u1fbpfcp-zoom-1.image)

这是用:value。v-model绑定的谁，用：value就绑定谁，同时给input绑定上，函数名也是这个。  
特别要注意的是@input=“value1=$event.target.value” :value="value1"一定要写在事件（oninput）的后面，否则会和v-model效果一样。

{{ item.price*item.count }} 数量--- {{ item.count }} 删除


![image-20211218165448529](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6673c683a8a345bba06147d111a97363~tplv-k3u1fbpfcp-zoom-1.image)

#### 绑定单选框

由于是单选，所以不用像复选框一样在选中的值上绑定一个数组，可以绑定一个字符串即可，然后选中哪个，字符串表示的就是哪个单选的value值。

<body>
	<div id="app">
		<input type="radio" id="one" value="One" v-model="picked" />
		 <label for="one">One</label>
		  <br />
		<input type="radio" id="two" value="Two" v-model="picked" />
		<label for="two">Two</label>
		  <br />
		<span>单选值: {{ picked }}</span>
		
	</div>
</body>
<script type="text/javascript">
	data = {
		picked: ''
	}

	const vm = Vue.createApp({
	  data() {
	    return data
	  },
	  
	})
	vm.mount('#app')
</script>


![image-20211216214030968](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44b06c2f1a98401aa79bc872b7cb1f3c~tplv-k3u1fbpfcp-zoom-1.image)

#### 绑定复选框

checkbox会将鼠标选中项的value值自动添加到v-model绑定的数组中.

v-model绑定的是checkedNames: \[\]这个空数组，那么当我们点击input复选框时，打勾的（选中的）会进入这个数组中，并且我们可以用{{checkedNames }}让它显示出来。

Jack input给一个id,label一个for写id名，是为了点击label时，input框高亮，是为了让他们俩联系起来。与本题无关。


官网给出的例子：

</head>
<body>
	<div id="app">
         <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
		  <label for="jack">Jack</label><br />
		  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
		  <label for="john">John</label><br />
		  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
		  <label for="mike">Mike</label><br />
		  <br />
		  <span>选中的会放在v-model绑定的数组checkedNames这里: {{ checkedNames }}</span>		
	</div>
</body>
<script type="text/javascript">
	data = {
		checkedNames: []
	}

	const vm = Vue.createApp({
	  data() {
	    return data
	  },
	  
	})
	vm.mount('#app')
</script>


我们可以用v-for表示复选框。

给一个namearr代表各个复选框的值，点击的会进入另一个数组checkedNames。

<body>
	<div id="app">
		<div v-for="value in namearr">
			<input type="checkbox" :id="value" :value="value" v-model="checkedNames" />
			<label :for="value">{{ value }}</label><br />
		</div>
		 <span>checkedNames: {{ checkedNames }}</span>

	</div>
</body>
<script type="text/javascript">
	data = {
		namearr:["jack","jone","mike"],
		checkedNames: []
	}
	const vm = Vue.createApp({
	  data() {
	    return data
	  },
	  
	})
	vm.mount('#app')	
</script>


![image-20211216213156252](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/78e84cd96adc45d5a0369f6f5d0dceaf~tplv-k3u1fbpfcp-zoom-1.image)

![image-20211216213234819](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d67abdb36034560934ca3d045ca1202~tplv-k3u1fbpfcp-zoom-1.image)

#### v-if v-else-if v-else

利用v-if可以直接写判断语句，直接在标签里判断，当istrue=0时只显示pop,当=1时显示pop1,当都不是时，显示v-else的内容。它们仨只有一个显示，一般只用到v-if。

哪个为真显示哪个，三者中间不能有别的标签。

v-if的用法

我是else

const data = {
			istrue:1,
            pop:"我是if",
            pop1:"istrue=1,我是else if",
		}

```

![image-20211216152425623](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aebb2471f9a440939be3a204a6f7cae2~tplv-k3u1fbpfcp-zoom-1.image)

它可以控制元素的显示与隐藏 ,（通过移除dom标签控制，用于只判断一次的（例如刚进页面时）。

也就是，表面上它只显示了pop1,实际上也只有pop1标签存在，其余两个均被移除。去浏览器控制台看。

#### 元素显示与隐藏v-show

也是控制元素的显示与隐藏。（通过控制样式display：none）用于频繁切换显示与隐藏。

```
<p v-show="show">我是v-show</p>

data={
	show:true,
}

```

如果show:false,则标签会加一行样式display：none来控制它的隐藏。

根据这个特性，v-if和v-show在应用显示与隐藏时还有另一个区别：

v-if可以用于虚拟的template标签里面，v-show不可以，因为虚拟标签无样式。虚拟标签这个标签不会显示在页面检查里。

template

所以在template里只能用v-if控制显示与隐藏。

#### 循环语句v-for

```
<h4>创建数组，并且在页面中遍历数据 显示数据</h4>
<li v-for="item in arr">{{ item }}</li>

<h4>创建对象，并且在页面中遍历对象 显示数据</h4>
<li v-for="value in obj">{{ value }}---</li>

const data = { arr:[1,2,3,4,5], obj:{ name:'xiaoming', age:'19' }, }


![image-20211216162528574](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a415c5ecb6ae4f368e972c838238f0b4~tplv-k3u1fbpfcp-zoom-1.image)

还可以这样写：

{{item}}---{{index}}

{{value}}--{{key}}

{{obj.name}}===={{obj.sex}}

{{item}}

{{item}}


![image-20211216165743566](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b7109456de754161bf42b7f6866a2b08~tplv-k3u1fbpfcp-zoom-1.image)

例：创建数组 长度为5，在页面中遍历数组的时候只显示1,2,3索引处的值

索引{{item-1}}:{{ item }}


![image-20211216162759973](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82cf8cc61ea64e31b45ed81687a62c0d~tplv-k3u1fbpfcp-zoom-1.image)

var arr=[1,2,3,4,5,6]; var arr2=arr.slice(2,4)

arr2=[3,4]; arr=[1,2,3,4,5,6];

var arr1=[1,2,3,4,5,6]; var arr3=arr.splice(2,4); arr3=[3,4,5,6]


或者，只想显示一个数组的前两项，可以用v-if决定。

{{ value }} {{ index }}
```
</li>
```


![image-20211216194442362](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fb5fc087055c4692a5850842c2b81ace~tplv-k3u1fbpfcp-zoom-1.image)

#### 数组为空不显示做法

数组内有值就让他显示值，没有就显示数组为空。

应用if判断，长度不等于0就显示数组内容，=0就显示为空。

{{ value }} {{ index }}
```
</li>
```

数组为空


#### 属性绑定v-bind

用于属性的绑定，当属性需要变化时，用v-bind绑定属性。

例如 title ,src, index等属性都可以绑定变量。

v-bind写法等同于冒号。

例如 v-bind:src=“imgUrl” 等同于:src=“imgUrl”

2.2 v-bind,也可以写:

const data = {					imgUrl:"https://ps.ssl.qhimg.com/sdmt/432_324_100/t01ecdff6694bf22e0c.webp",
		}

```

![image-20211216152900981](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dea16a1e12b74bfeb194f8e0fb70e5d0~tplv-k3u1fbpfcp-zoom-1.image)

当属性，一半需要变量，另一半需要写死怎么写：

例如鼠标移上显示标题：要求有个前缀：美味的+变量

这时我们可以把死的数据写在单引号里。

```
v-bind:title="'美味的'+pop"

```

#### 添加样式 :class :style

:**class**

```

	<h2 :class="h2red">我是绑定红色的class</h2>


data = {
	h2red:red,
		}


red:{
	color:"red"
	}


data = {
	h2red:{
		color:"red"
		}
}

添加蓝色

我绑定了两个class

data={ a:'h2red bg', a:["h2red","bg"], //注意这里数组里是双引号的，上面h5的数组由于是个变量，不是带字符串的。 }

class还可以用数组绑定


:**style**

style

data={ color1={border:'1px solid blue'}, }

style多个绑定


![image-20211216173054078](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9272c600dc24443988c65931ffdbb571~tplv-k3u1fbpfcp-zoom-1.image)

#### v-html

data里面想写标签可以用,并且这个标签包含在div这个标签里面。

data={ html:'

我是p标签

' }


控制台：

![image-20211216172222962](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a8eac49ab064ab6bad077064debc742~tplv-k3u1fbpfcp-zoom-1.image)

如果不用v-html，直接用{{ }}引用的话，浏览器不会解析，浏览器上不会显示“我是p标签”，而是显示/

我是p标签/

。

#### v-on添加点击事件

V-on：也可以写成@

事件对象—标签

事件类型—click

事件侦听函数–function

V-on:click=func(num)

Methods:{

Func(num){

Console.log(num)

}

}

v-on:click="handelclick()" 表示侦听点击事件

点击事件

this的指定

点击我{{count}}

传参

{{ value }} {{ index }}


**handleClick ()**

点击事件函数都在methods里，给按钮绑定函数，点击按钮即可实现函数内容。

**handleClick1 (）**

比如我们想让handleClick1 ()实现点击一次按钮就加一，我们点击的这个按钮标签，就是点击事件的对象，需要用到this,this指的是事件对象，那这个对象在vue中就是data,，点击按钮实现count+1,需要写成this.count+=1。

this在methods里面代表的是data里面的数据和事件。

这句话有啥用嘞？

说明 当我们想在函数中得到data里面的数据时可以用this.xx获得，想得到某个事件时，用this指代事件对象。

那我们想在函数中得到html5的数据怎么办？可以用传参，也就是下面的handleClick2 (index)。

**handleClick2 (index)**

当我们需要参数时，可以传参，在调用函数时，把index传回函数即可。

**returnfunc（）**

methods的函数调用也可以不用事件，直接用{{}}能调用，把值return回去即可。

记得一定要写return。

### {{returnfunc()}}

data{ count:10, ret:'我是直接调用的函数' } const vm = Vue.createApp({ data() { return data }, methods:{ handelclick(){ console.log("已点击") }, handleClick1 (){ console.log(this) this.count+=1

		},
        handleClick2 (num){
			console.log("点击得到index"+num)
			
					   
		},
        
			
			
         returnfunc:function(){
             return this.ret;
         }
	  }
	}).mount('#app')


![image-20211216201659710](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f59d59bd822043c78df413b604c00d7a~tplv-k3u1fbpfcp-zoom-1.image)

![image-20211216201618521](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e5347fc094284c9c888c06d6f12ade73~tplv-k3u1fbpfcp-zoom-1.image)

[以上知识点全部代码链接](https://blog.csdn.net/yangyangdt/article/details/122021120)

通过上述可以完成的两个小案例。

1.[备忘录的做法](https://blog.csdn.net/yangyangdt/article/details/122021391)

2.[购物车增加和删除做法](https://blog.csdn.net/yangyangdt/article/details/122021592)。

vue3基础2 一些常用命令

前言：

常见报错：

模板语言：

常用指令：

数据双向绑定v-model

v-if的用法

2.2 v-bind,也可以写:

添加蓝色

我绑定了两个class

我绑定了两个class

{{ name }}

{{ name }}

class还可以用数组绑定

style

style

style多个绑定

v-on:click="handelclick()" 表示侦听点击事件

this的指定

传参

{{returnfunc()}}