VUE第三篇 入门后续

举报
tea_year 发表于 2021/12/30 00:14:09 2021/12/30
【摘要】 <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue原理探析</title> <script src="js/vue.min.js"></script> </...

      <!DOCTYPE html>
      <html>
     	<head>
     		<meta charset="UTF-8">
     		<title>vue原理探析</title>
     		<script src="js/vue.min.js"></script>
     	</head>
     	<body>
     		<!--2.div的设计-->
     		<div id="vue_det">
     			<h1>site : {{site}}</h1>
     			<h1>url:{{url}}</h1>
     			<h1>alexa:{{alexa}}</h1>
     		</div>
     		<!--3.js的设计,将之前的代码分解.-->
     		<script>
     			//1.数据对象,实际是json格式;
     			var data={site:"CSDN中国",url:"www.csdn.net",alexa:88888};
     			//2.Vue对象的实例,需要实例化,new Vue({})
     			var vm=new Vue({
     				el:'#vue_det',
     				data:data
      			});
     			//3.测试引用是否相同的对象 ;
     			console.log(vm.site===data.site);
                             //从vm进行测试
      			vm.site="www.51cto.com";
     			console.log(data.site);
                             //从data数据端测试
      			data.alexa=9999;
     			console.log(vm.alexa);
     		</script>
     	</body>
      </html>
  
 

Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。

 

 

文章来源: aaaedu.blog.csdn.net,作者:tea_year,版权归原作者所有,如需转载,请联系作者。

原文链接:aaaedu.blog.csdn.net/article/details/85600711

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。