vue自学笔记

{ { message }}

var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })

处理用户输入：

{ { message }}

反转消息

var app5 = new Vue({
el: ‘#app-5’,
data: {
message: ‘Hello Vue.js!’
},
methods: {
reverseMessage: function () {
this.message = this.message.split(’’).reverse().join(’’)
}
}
})

根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics

生命周期

#beforeCreate
在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。

#created
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

#beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。

#mounted
el 被新创建的 vm. e l 替 换 ， 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 ， 当 m o u n t e d 被 调 用 时 v m . el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.