Vue官网教程-实例

时间：2018-08-22 21:02:15 阅读：154 评论：0 收藏：0 [点我收藏+]

技术分享图片

var vm = new Vue({
  // 选项
})

技术分享图片

去看一下经常使用的选项对象

el，就是指定Vue实例去接管哪里的

技术分享图片

提供的元素就是一个占位符，这个位置会被Vue生成的DOM替换掉。

template

技术分享图片

写一个带有模板template的vue实例

    <div id="app">
        
        <!-- #app原来的内容 -->
        <P>Hello</P>
        <span>1234</span>

    </div>


    <script>
        var vm = new Vue({
            el:‘#app‘,
            template:‘<div>Vue.js!</div>‘
        })
    </script>

可以看到，连注释都被替换掉了

技术分享图片

数据与方法

技术分享图片

也就是说data对象里面的所有属性，都是响应式的，它改变了，页面也会改变

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
//这样是复制了引用，指向的是同一个实例
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
//可以不是同vm.$data.a
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

上文说向 vue实例响应式系统里面加入了data的所有属性，所以这些属性直接使用即可。

技术分享图片

直接新增的属性，不会更新

技术分享图片

//created 钩子可以用来在一个实例被创建之后执行代码：
new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log(‘a is: ‘ + this.a)
  }
})
// => "a is: 1"

这就解释了，为什么vue都是使用function来声明。注意哦！选项里面都不许用箭头函数

技术分享图片