Vue 模板语法-CFANZ编程社区

插值语法

初识Vue:
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法：
3、root容器里的代码被称为【Vue模板】
4、Vue实例和容器是一一对应得；
5、真实开发中只有一个Vue实例，并且配合组件一起使用
6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取date中的所有属性；
7、一旦date中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

<!-- 准备好一个容器 -->
		<div id="root">
			<h1>插值语法</h1>
			<h2>你好，{{name}}</h2>
		</div>
		
		
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:"#root",
			data:{
				name:'jack'
			}
		})

结果
在这里插入图片描述

V-bind模板语法

插入一个链接，使用v-bind方法

<body>
		<!-- 准备好一个容器 -->
		<div id="root">
			<h1>插值语法</h1>
			<h2>你好，{{name}}</h2>
           <h1>指令语法</h1>
		    <a v-bind:href="url">点击百度搜索</a>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:"#root",
			data:{
				name:'jack',
				url:"https://www.baidu.com/"
			}
		})
	</script>

结果
在这里插入图片描述
**注意：
** V-bind: 可以简写为：
若data里面有重名属性，默认以后面一个为主

v-bind