vue2基础

最新推荐文章于 2024-07-18 14:55:00 发布

余月初贰

最新推荐文章于 2024-07-18 14:55:00 发布

阅读量581

点赞数 3

文章标签： vue.js 前端 javascript

mkbk

本文链接：https://blog.csdn.net/m0_68633696/article/details/125981693

版权

1.使用方法

直接用<script>标签引入

直接下载并用 <script> 标签引入，vue会被注册为一个全局变量

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../new.vue.js"></script>
	</head>
	<body>
		<div id="box">
			<!-- view层 -->
			{{10+20}}<!-- 大括号语法 -->
			{{myName}}
		</div>
		<script>
			var vm = new Vue({ //MVVM框架  vm层
				el: '#box',
				data: { //model层
					myName: '玛卡巴卡',
				}
			})
		</script>
	</body>
</html>

重点

理解什么是MVVM。
学会使用html来写vue
表示动态[key] :key
重点 v-bind 绑定的意思是一个vue的指令 v-bind:title的简写:title

2.vue绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../new.vue.js"></script>
	</head>

	<body>
		<div id="box">
			<!-- view层 -->
			<!-- 	{{10+20}}大括号语法
			{{myName}} -->
			<p :title='message'>鼠标停留几秒查看绑定的信息</p>
		</div>
		<script>
			var vm = new Vue({ //MVVM框架  vm层
				el: '#box',
				data: { //model层
					message: `页面加载于${new Date().toLocaleString()}`
				}
			})
		</script>

	</body>
</html>