前言

还是接着看这一章。

前面说了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学习记录

前言

总结

猜你喜欢