Vue学习之路（1）

最新推荐文章于 2024-07-10 14:03:37 发布

刘什么同学

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量78

点赞数 1

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_43217271/article/details/112614686

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue学习

传值的两种方式 v-bind

文本传值 {{data}}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test1</title>
	</head>
	<body>
		<div id="app">
			{{message}}
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					message:"hello world"
				}
			});
		</script>
	</body>
</html>

v-bind attribute * 推荐使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test2</title>
	</head>
	<body>
		<div id="app">
			<span v-bind:title="message">
			鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					message: '页面加载于' + new Date().toLocaleString()
				}
			});
		</script>
	</body>
</html>

判断 v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test2</title>
	</head>
	<body>
		<div id="app">
			<p v-if="seen">嘿嘿你看到我了</p>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					seen: true
				}
			});
		</script>
	</body>
</html>

循环 v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test2</title>
	</head>
	<body>
		<div id="app">
			<ol>
				<li v-for="list in lists">
					{{list.text}}
				</li>
			</ol>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					lists:[
						{text:'黑棋老师'},
						{text:'小住包'},
						{text:'kiki'}
					]
				}
			});
		</script>
	</body>
</html>

vm.lists.push({text:‘撒大大’}) – >

事件绑定 v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test5</title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="sayHello()">click me</button>
			<p>{{message1}}</p>
			<button v-on:click="reserves()">反转信息</button>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					message:'hello',
					message1: 'Hello lhq'
				},
				methods:{//方法必须定义在methods里面
					sayHello: function() {
						alert(this.message)
					},
					reserves: function() {
						this.message1 = this.message1.split('').reverse().join('')
					}
				}
			});
		</script>
	</body>
</html>

`v-model` 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test5</title>
	</head>
	<body>
		<div id="app">
			{{message}}
			<input v-model="message"/>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					message:'hello许佳琪'
				},
			});
		</script>
	</body>
</html>

刘什么同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之路（1）

vue学习传值的两种方式 v-bind文本传值 {{data}}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>test1</title> </head> <body> <div id="app"> {{message}} </div> <script src="htt
复制链接

扫一扫