Vue - 模板语法、数据绑定

鬼鬼骑士

已于 2022-10-11 12:49:00 修改

阅读量152

点赞数

分类专栏：笔记 Vue 成长阶段文章标签： vue.js 前端 javascript

于 2022-10-10 23:42:27 首次发布

本文链接：https://blog.csdn.net/qq_39123467/article/details/127254518

版权

笔记同时被 3 个专栏收录

324 篇文章 9 订阅

订阅专栏

成长阶段

272 篇文章 4 订阅

订阅专栏

Vue

18 篇文章 0 订阅

订阅专栏

文章目录

模板语法
数据绑定

模板语法

插值语法

在这里插入图片描述

指令语法

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- 全局多了一个vue构造函数 -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->

		<div id="root">
			<h1>插值语法</h1>
			<h3>你好，{{name}}</h3>
			<hr />

			<!-- <h1>指令语法</h1>
			<a v-bind:href="url">点我去我家学习</a> -->
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false //阻止Vue在启动时生成生产提示

			new Vue({
				el: '#root',
				data: {
					name: 'jack',
					url: 'http://www.baidu.com',
				},
			})
			//创建Vue实例
		</script>
	</body>
</html>

讲师笔记

在这里插入图片描述

扩展语法

在这里插入图片描述

数据绑定

单向绑定（v-bind）

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			单向数据绑定：<input type="text" v-bind:value="name" />
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// Vue.config.devtools = true

		new Vue({
			el: '#root',
			data: {
				name: '尚硅谷',
			},
		})
	</script>
</html>