Vue初学总结 vue入门

最新推荐文章于 2023-07-07 20:00:49 发布

原创最新推荐文章于 2023-07-07 20:00:49 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这篇博客总结了Vue的基础指令，包括大胡子表达式{{}}用于显示数据，v-for用于循环遍历，v-show和v-if进行条件判断显示，v-model实现双向数据绑定，以及v-bind的用法。通过实例展示了这些指令的使用效果和应用场景。

Vue初学总结

常用指令

常用指令

大胡子表达式{{}}

下面展示一些 大胡子表达式的用法。
可以用来直接取data里的值、用来对值进行运算，进行三目运算，运行函数

<div id="vue">
	{{a}},{{b+c}},{{b*2}},{{d?'真':'假'}},{{2+3}},{{f()}}
</div>
<script type="text/javascript">
	new Vue({
		el: '#vue',
		data: {
			a:'hello',
			b:12,
			c:22,
			d:true
		},
		methods:{
			f:function(){
				return '方法'
			}
		}
	})
</script>

运行结果
在这里插入图片描述

v-for（循环指令）

下面展示一些 循环语句的用法。
v-for="(item,index) in a" 括号里两个参数为循环取出来的对象、下标
v-for=“item in a” 直接循环a集合

<div id="vue">
	<template v-for="(item,index) in a">{{item}}{{index}},</template>
	<hr >
	<template v-for="item in a">{{item}},</template>
</div>
<script type="text/javascript">
	new Vue({
		el: '#vue',
		data: {
			a:['a','b','c','d']
		}
	})
</script>

运行结果
在这里插入图片描述

v-show、v-if （判断是否显示）

下面展示一些 判断指令。
true显示，false隐藏

<div id="vue">
	<div v-if=true>if真</div>
	<div v-if=false>if假</div>
	<div v-show=true>show真</div>
	<div v-show=false>show假</div>
</div>

运行效果
在这里插入图片描述

v-show小结：
1、v-show仅仅控制元素的显示方式，通过display属性的none
2、频繁显示/隐藏时，使用v-show会更加节省性能上的开销

v-if小结：
1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。

v-model

下面展示一些 v-model的用法。
将test的值绑定到input里去。

<div id="app">
	<input v-model="test">
	{{test}}
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			test: '这是一个测试'
		}
	});
</script>

运行效果
在这里插入图片描述
data中test的值也会跟着input输入的值而改变

v-bind

v-model

更新ing