Vue

[LastPoem]

Vue 关于计算属性和方法： 两者都能使用函数对数据进行修改操作等，但是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

因此。对于性能开销比较大的计算属性 ，如果没有缓存，将会使用大量资源。但是对于不希望使用缓存的地方，就使用方法。

[LastPoem]

Vue实例创建周期中的4个周期函数（钩子）

beforeCreated()创建之前 created()创建 beforeMount()模板在内存中已经编译，但是尚未挂载（渲染到页面中） mounted（）页面已经被模板渲染好

Vue组件运行阶段的2个周期函数

beforeUpdate()此时数据被更新了，但是页面中的数据还是旧的，还没和最新数据保持同步 updated()页面和Data数据已经保持一致了

Vue组件消亡的2个周期函数

beforeDestroy（）还未执行销毁过程。 destroyed（）

[LastPoem]

Vue组件

Vue创建组件的方式

第一种

 var tem1 = Vue.extend({
      template:'<h3>这是使用 Vue.extend 创建的组件</h3>' //指定组件要展示的HTML结构
    });
 Vue.component('myTem1',tem1);
 Vue.component('myTem1',Vue.extend({
        template : '<h3>这是使用 Vue.extend 创建的组件</h3>'
    }))
<div id="app">
        <!-- 如果要使用组件，直接把组件的名称以 HTML 标签的形式，引入到页面中-->
        <my-tem1> </my-tem1>
    </div>

第二种

Vue.component('组件名'，Vue.extend({
    template:"<p>This is my kingdom come</p>"
}))

第一个参数是组件名，第二个参数是组件内容。其中template就是在HTML页面中展示的内容。不管是那种方式创建出的组件，template只能包含一个根元素。

第三种

1.定义组件
     Vue.component('mycom3',{
            template : '#tem1'
     });

2.在被控制的 #app 外面使用 template 元素，定义组建的HTML模板结构
    <div id="app">

3. 引用组件
          <mycom3></mycom3>
    </div>

    <template id="tem1">
        <div>
            <h1>这是 template 元素</h1>
            <span>这种方式好用</span>
        </div>
    </template>

定义私有组件

在Vue实例中的component属性中 component：{ login：{ template：“

这是私有的login组件This is my kingdom come

” } },

组件中的data

Vue实例中的data可以是对象也可以是函数。 组件中可以有自己的data。但是组件的data必须是一个方法。并且这个方法必须返回一个对象。 这是为了防止多个组件中的对象串用（可以理解为互相污染）

[LastPoem]

directive自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

例：

当页面加载时，该input元素将获得焦点：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
//如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}
//然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：
<input v-focus>