1.vue初识

最新推荐文章于 2022-03-14 08:32:46 发布

7TribeZ

最新推荐文章于 2022-03-14 08:32:46 发布

阅读量137

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/wildand/article/details/108322034

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--view-->
		<div id="vue_app">
			<h1>{{message}}</h1>
			<h1>{{title}}</h1>
					
		</div>
		
		<div id="vue_det">
		    <h1>site :{{site}} </h1>
		    <h1>url : {{url}}</h1>
		    <h1>{{details()}}</h1>
		</div>
		
		<script type="text/javascript">
				//console.log(vue)
					
				var app=new Vue({
					el:'#vue_app',
					//Model
					data:{
						title:"hello Vue!",
						message:"hello World"
					}
				})
				var vm = new Vue({
				        el: '#vue_det',
				        data: {
				            site: "菜鸟教程",
				            url: "www.runoob.com",
				            alexa: "10000"
				        },
				        methods: {
				            details: function() {
				                return  this.site + " - 学的不仅是技术，更是梦想！";
				            }
				        }
				    })
				console.log(app)
		</script>
	</body>
</html>

数据驱动，双向数据绑定。根据js部分的 el来查找innerHTML,然后将里面的变量替换掉。

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

7TribeZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.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> <!--...
复制链接

扫一扫

专栏目录