Vue 模板语法

最新推荐文章于 2024-08-21 09:03:10 发布

肥猫披虎皮

最新推荐文章于 2024-08-21 09:03:10 发布

阅读量325

点赞数 1

分类专栏： Vue学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44863850/article/details/123389927

版权

Vue学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

插值语法

初识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'
			}
		})

结果
在这里插入图片描述

插值语法：功能：用于解析标签体内容。写法：{{xxx}} ,xxx是js表达式，可以直接读取data中的所有属性

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>