博客


初入Vue的世界，对这个世界的路线和环境都还是处于未知和好奇中,



而在探索的过程中，只有写将地图和风景记录在旅游手册里，下次才能更好的翻阅。


var data = { a: 1 }
  // 直接创建一个实例
  var vm = new Vue({
    data: data
  })
  alert（vm.a） // => 1
alert(vm.$data === data） // => true

0.创建一个 Vue 实例时，可传入一个选项数据对象data、props、propsData、computed、methods、watch
选项DOM对象：el、template、render、renderError
选项 / 生命周期钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroy、errorCaptured
选项 / 资源directives、filters、components
选项 / 组合parent、mixins、extends、provide / inject
选项 / 其它name、delimiters、functional、model、inheritAttrs、comments

1.Vue 实例的数据对象（请注意是对象），被递归转成getter/setter才能响应数据变化；
2.只能 (含有零个或多个的 key/value 对)；
3.实例 var vm =new Vue({})创建后，可用vm.$data 访问原始数据对象
4.实际上data对象被Vue代理了，vm.data对象属性名 = vm.$data.对象属性名
5.长成这样的属性，vm.data对象属性名是取不到值的，已经不被代理，只能用vm.$data._data对象属性名取值
 _message: 'Hello'
$item：'_和$会和 Vue 内置的属性、API 方法冲突'
6.★当一个组件被定义，data 必须声明为返回一个初始数据对象的函数
   若依旧为对象，则会被所有实例共享其引用，唯有每次创建新实例调用data函数，获取到全新的数据对象才能和其他实例区分
7.当 new Vue ({})没有 指定关联的DOM元素，处于“未挂载”状态，vm.$mount() 可手动地挂载一个未挂载的实例
8.只有当实例被创建时 data 中存在的属性才是响应式的，才会触发Watch()函数，所以最好设置一些初始值
9.Object.freeze(obj)，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
10.vm.$el === document.getElementById('元素名')
11.父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件

 //定义一个名为 button-counter 的新组件
  Vue.component('button-counter', {
    props: ['title'],
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })
  new Vue({ el: '#components-demo' })

  var ComponentA = { /* ... */ }
  var ComponentB = { /* ... */ }
  new Vue({
    el: '#app',
    components: {
      'component-a': ComponentA,
      'component-b': ComponentB
    }
  })
 //局部注册的组件在子组件不可用，唯有此可用
  var ComponentB = {
    components: {
      'component-a': ComponentA
    },
    // ...
  }

 0.可复用，要名字，el不一样
 1.el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标(CSS元素/HTML元素)，可用vm.$el取值
 2.如果data不是函数，则data对象的数据会被所有实例访问，存在被修改的风险，如果是函数则每用一次组件，就会有一个它的新实例被创建
 3.不管是全局注册还是局部注册，都是通过Vue.component注册的
 4.问题在于怎么区别 全局和局部注册，直接注册是使用 Vue.component
 5.全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
 6.组件名 使用 短横线分隔命名 或者 首字母大写命名（最后使用短横线，直接在DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的）
 7.component 为可用组件的hash表
 8.通过 Prop 向子组件传递数据，当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性
 9.一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop
 10.在template里面 '' 和 ` `用途不同，后者叫做模板字符串 可用来插入多行的html元素
 11.props 用于接收父组件的数据，使用v-bind:属性名字 与其['属性名']对应为动态赋值，也可静态赋值 ‘属性名’="值"