Vue基础

最新推荐文章于 2025-06-01 16:35:41 发布

Json_book

最新推荐文章于 2025-06-01 16:35:41 发布

阅读量483

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Json_book/article/details/123849457

版权

Vue 专栏收录该内容

3 篇文章

订阅专栏

Vue基础模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			1、想让vue工作,就必须创建一个Vue实例,且要传入一个配置对象；
			2、容器里的代码依然符合html规范,只不过混入了一切特殊的Vue语法;
			3、容器里的代码被称为Vue模板
		 -->
		<!-- 准备一个div -->
		<div id="nav">
			<!-- 插值语法,将Vue实例中的值插入到指定为止 -->
			<h1>插值语法->  {{name}}!</h1>
			<hr/>
			<!-- 指令语法 -->
			<a v-bind:href="url">跳转网页</a>
			<hr/>
			<!-- 多层级关系 -->
			<h1>我是{{name}}我在->{{company.addr}}->{{company.name}}工作</h1>
			<br/>
		</div>
		<script type="text/javascript">
			//关闭生产提示
			Vue.config.productionTip = false;
			//创建Vue实例
			new Vue({
				el: '#nav', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
				data: { //data中用于存储数据,数据供el指定的容器使用,值暂时写成一个对象。
					name: '张三',
					url:'http://www.baidu.com',
					company:{
						name:'超星',
						addr:'武汉市江夏区'
					}
				}
			});
		</script>
	</body>
</html>