模板语法

插值语法

1、作用：将js中表达式放入页面
2、语法：

{{ js表达式 或 data中所有内容 }}

指令语法

1、作用：可以解析标签内容，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 2、语法：以v-bind为例：<a v-bind:href="url"/> ，其中url表示一个地址。简写为<a :href="baidu.url"/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板语法</title>
		<script type="text/javascript" src="./vue.js"></script>
		<script>Vue.config.productionTip=false </script>
	</head>
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h2>插值语法</h2>
			<h4>姓名：{{name}}</h4>
			<h4>年龄：{{age}}</h4>
			
			<h2>指令语法</h2>
			<a v-bind:href="baidu.url">点我百度</a>
		</div>
	</body>
	
	<script>
		const vm = new Vue({
			el:'#root',
			data:{
				name:'bug_killer',
				age:19,
				baidu:{
					name:'百度',
					url:'https://www.baidu.com/',
				}
			}
		})
	</script>
</html>

数据绑定

1、两种绑定方式：
（1）单向绑定：数据只能从data流向页面，v-bind
（2）双向绑定：在data或页面任意一方改变数据都能造成另一方的数据改变，v-model
2、案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="./vue.js"></script>
		<script>Vue.config.productionTip=false </script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root">
                        <!-- 单向数据绑定，如果在控制台修改name1，在页面也会发生变化；在页面修改name1，data数据不会改变 -->
			成员1姓名：<input type="text" v-bind:value="name1"> <br />
			<!-- 双向数据绑定，如果在控制台修改name2，在页面也会发生变化；在页面修改name2，data数据也会改变 -->
                        成员2姓名：<input type="text" v-model:value="name2"> <br />
		</div>
	</body>
	
	<script>
		const vm = new Vue({
			el:'#root',
			data:{
				name1:'bug_killer1',
				name2:'bug_killer2',
				age:19,
			}
		})
	</script>
</html>

Vue语法--模板语法与数据绑定

模板语法

插值语法

指令语法

数据绑定