2_vue学习记录
Posted gnuzsx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2_vue学习记录相关的知识，希望对你有一定的参考价值。
前言
还是接着看这一章。
前面说了vue对象有data用来表示属性，methods用来表示方法。
然后在html当中用{{}}来引用这些属性和方法的返回值。
这些都可以说，是vue这个实例，给html传递的数据。
这些数据要是改变了，那么html当中肯定也是要做出来相应的变化的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
//数据对象
var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
//VUE实例
var vm = new Vue({
el: '#vue_det',
data: data
})
//证明一下vm和data是相同的对象。
document.write(vm.site === data.site) // true
document.write("<br>")
//改变vue实例vm的属性，会影响到数据对象data
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
// 改变数据对象data的属性，会影响到vue实例vm的属性
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
</body>
</html>这一段代码是有点意思的。
new vue()是一个对象。这个不假的。
在javascript当中，先整出来一个data对象，有三个属性。
然后把这个data对象，扔给了vue的data属性。
第一步，就是证明了这两个对象，其实是一个对象。
不管是改变谁的属性，都是会一起改变的。
总结
把vue的属性，先在外面用一个对象定义出来。有趣有趣。
以上是关于2_vue学习记录的主要内容，如果未能解决你的问题，请参考以下文章