Vue学习之路（Day 2）

这名没人用吧

于 2021-06-16 22:22:57 发布

阅读量141

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43866830/article/details/117856205

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue学习Day2

列表渲染
模板语法
- v-once
计算属性
侦听器
class和style的绑定

列表渲染

在Vue中，进行列表渲染使用的是v-for属性，可以理解为循环，具体使用如下：

	<body>
		<div id="demo">
			<div v-for="item, index in items"> <!-- index可以获得索引值，用key也可以-->
				{{ index }} : {{ item.information }}
			</div>
			<div v-for="obj, key in objects"> <!--key也可以获得对象中的属性值，index也可以-->
				{{ key }} : {{ obj }}
			</div>
		</div>
		
		<script type="text/javascript">
			var v = new Vue({
				el: '#demo',
				data: {
					items:[
						{ information: 'i1'},
						{ information: 'i2'},
						{ information: 'i3'}
					],
					objects:{
						name: '张三',
						age: 12,
						sex: '男'
					}
				}
			})
		</script>
	</body>

输出结果：
在这里插入图片描述
一般情况下，我们在写循环的时候都会加上一个key值，如下：

<div v-for="item, index in items" :key="index">
	{{ index }} : {{ item.information }}
</div>
<div v-for="obj, key in objects" :key="key">
	{{ key }} : {{ obj }}
</div>

模板语法

v-once

在Vue框架中，数据是用{{}}来进行插入的，这里如果设置了v-once语句后，一次性插入之后就不会再进行更新：

	<body>
		<div id="app">
			<div>{{msg}}</div>
			<div v-once>{{msg}}</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					msg:"hello world"
				}
			})
		</script>
	</body>

这里在控制台改变值后，会发现，添加了v-once的div中的内容不会发生改变：
在这里插入图片描述

计算属性

计算属性会将计算结果进行缓存，若数据未进行更新，就不会重新加载数据，这样子可以提高效率。

	<body>
		<div id="app">
			<!-- 一般写法 -->
			<div>{{data1+data2}}</div>
			<!-- 计算属性写法 -->
			<div>{{dataSum}}</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					data1:"hello world",
					data2:"hello vue"
				},
				computed:{
					dataSum:function(){
						// 会将计算的结果进行缓存,只要变量内容不改变，就不会重新计算
						return this.data1 + this.data2
					}
				}
			})
		</script>
	</body>

计算属性中含有get和set属性：

	<body>
		<div id="app">
			<div>{{data1}}</div>
			<div>{{data2}}</div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					data1:"hello world"
				},
				computed:{
					data2:{
						get:function(){
							return this.data1.split('').reverse().join('');
						},
						set:function(value){
							console.log(value)
							this.data1 = value;
						}
					}
				}
			})
		</script>
	</body>

在这里插入图片描述
进行数值的变动后：

侦听器

侦听器是用来监听数据是否发生了改变，当数据发生改变的时候，侦听器就会调用相应的方法，侦听器的是通过watch实现的：

	<body>
		<div id="app">
			{{ msg }}
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					msg:'hello world'
				},
				methods:{
					
				},
				computed:{
					
				},
				watch:{
					msg:function(val){
						console.log("更新的值:"+val);
					}
				}
			})
		</script>
	</body>

在这里插入图片描述

class和style的绑定

绑定属性我们使用的v-bind属性，在Vue.js中，对样式的绑定进行了增强，可以使用数组或对象的形式进行绑定：

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="{active:isActive}"></div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					isActive: true
				}
			})
		</script>
	</body>

在这里插入图片描述
将属性值设为false，样式就会失效：

样式还可以通过字符串、数组、对象的形式进行绑定：

	<body>
		<div id="app">
			<div :class="styleObj"></div>
			<div :class="styleArr"></div>
			<div :class="styleStr"></div>
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el:'#app',
				data:{
					styleObj:{style1:true, style2:false, style3:true},
					styleArr:['style1', 'style2'],
					styleStr:'style1 style2 style3'
				}
			})
		</script>
	</body>