vue3基础2 一些常用命令

前言：

上一章已经学会如何创建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://img-blog.csdnimg.cn/img_convert/ce6b2d0f27d978d0d59ed3eaf660a1ea.png)

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

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

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

#### :value

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

data={
value1:123456
}


![image-20211217004208085](https://img-blog.csdnimg.cn/img_convert/214b7cd52cb66f46f579b0ad9d877309.png)

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

![image-20211217004400350](https://img-blog.csdnimg.cn/img_convert/83e7942d92397bec454eed9dc0bb7d76.png)

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

data={
value1:123
}


![image-20211217004647637](https://img-blog.csdnimg.cn/img_convert/c67d73a95e4e7295e964a2d1204dbb1a.png)

假如只绑定了: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赋值，使之能够实时渲染，这样就可以实现双向绑定。

</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://img-blog.csdnimg.cn/img_convert/b0e118a8f06171f393c155115417f120.png)

![image-20211216213234819](https://img-blog.csdnimg.cn/img_convert/24e0ae530bfc6a2b5c8e77f4aa2629e6.png)

#### 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://img-blog.csdnimg.cn/img_convert/1f3dd089e7c50bab47ab0b2debf868b0.png)

它可以控制元素的显示与隐藏 ,（通过移除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://img-blog.csdnimg.cn/img_convert/bbbcd425d6fd90da38cf75e35ffa37fe.png)

还可以这样写：

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

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

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

{{item}}

{{item}}


![image-20211216165743566](https://img-blog.csdnimg.cn/img_convert/efa18bfc1978c847002daabce07178d4.png)

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

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


![image-20211216162759973](https://img-blog.csdnimg.cn/img_convert/0fcec9238e0260c2c8c0c418d9360037.png)

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://img-blog.csdnimg.cn/img_convert/8a32d3f88ba6c9940dfc8af6a94620c5.png)

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

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

应用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://img-blog.csdnimg.cn/img_convert/ea76a0fbc7ad13481f115cd7d106c512.png)

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

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

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

```
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://img-blog.csdnimg.cn/img_convert/2a0aa0a8e416903bdda50d018b4be590.png)

#### v-html

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

data={
html:'

我是p标签

'
}


控制台：

![image-20211216172222962](https://img-blog.csdnimg.cn/img_convert/f794f1d632cf3477c7bb2a2b06dedd28.png)

如果不用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的指定

传参

{{ 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://img-blog.csdnimg.cn/img_convert/a319b8da3048abb15f440e0f9cf9776c.png)

![image-20211216201618521](https://img-blog.csdnimg.cn/img_convert/0a8f10e93db7b7c225992f9adc0ddbab.png)

[以上知识点全部代码链接](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)。

posted @ 2021-12-19 12:13 yangyangdt 阅读(371) 评论(0) 收藏举报

刷新页面返回顶部

yangyangdt

vue3基础2 一些常用命令

前言：

常见报错：

模板语言：

常用指令：

数据双向绑定v-model

v-if的用法

2.2 v-bind,也可以写:

添加蓝色

我绑定了两个class

我绑定了两个class

{{ name }}

{{ name }}

class还可以用数组绑定

style

style

style多个绑定

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

this的指定

传参

{{returnfunc()}}

公告