Vue之vue.js声明式渲染

Html:

<div id="app">

{{ message }}

</div>

Vue:

var app = new Vue({

el: ‘#app‘,

data: {

message: ‘Hello Vue!‘

}

})

本例子由HTML模板（View）+Vue实例（ViewModel）组成。

创建Vue的实例，需传入一个选项对象，如：

数据（data）：Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

属性（props）： 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

挂载元素（el）：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

计算（computed）：声明计算，处理复杂逻辑

方法（methods）：声明方法，VM 实例可以访问这些方法，或者在指令表达式中使用。计算属性默认有getter，但也可以自定义一个setter。

computed和method比较：methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。computed 性能会更好，但是如果你不希望缓存，你可以methods。

为什么需要缓存？

假设我们有一个性能开销比较大的的计算属性 A ，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用 method 替代。

watch：观察和响应数据变化。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。

computed和watch比较：计算属性在大多数情况下更合适，但有时也需要一个自定义的 watch。watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这是计算属性无法做到的。

扩展（extended）：扩展到另一个组件。

minxin：混合实例对象可以像正常的实例对象一样包含选项。

parent：指定已创建的实例之父实例，在两者之间建立父子关系。

component：声明组件，包含 Vue 实例可用组件的哈希表。

生命周期：

实例

var app = new Vue({

el: ‘#app‘,

data: {

message : "xuxiao is boy"

},

beforeCreate: function () {

console.group(‘beforeCreate 创建前状态===============》‘);

console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined

console.log("%c%s", "color:red","data   : " + this.$data); //undefined

console.log("%c%s", "color:red","message: " + this.message)

}

}）