用了一段时间的 Vue，基本熟悉了讨论，看到 Vue2.0 已经发布，而且文档已经比较齐全，刚好学习和迁移一下
Vue2 的一份详细修编记录
https://github.com/vuejs/vue/issues/2873
vue-migration-helper
Vue 官方提供了一个有意思的工具可以对代码进行扫描，并提醒哪里需要进行代码的修改：
安装：
sudo npm install --global git://github.com/vuejs/vue-migration-helper.git
package.json 中的这个配置项会创建一个 /usr/local/bin/vue-migration-helper 文件
"bin": {
"vue-migration-helper": "index.js"
},
然后就可以直接调用：
# navigate to a Vue 1.x project directory
cd path/to/my-vue-project
# scan all files in the current directory
vue-migration-helper
# scan all files in specific sub-directories
vue-migration-helper src folder-a folder-b
具体修改：
这些是我在升级过程中遇到的点，显然 Vue2 并不兼容 Vue1，重构的比较全面
| Vue1 | Vue2 |
|---|---|
| 实例中的 ready 方法 | 使用 mounted 替代 |
| ajax 的回调方法中支持 this 调用 Vue 实例 | 不再支持，请使用 var vm = this 在 ajax 之前 |
| < img src="@{{imagePath}}"> 不再有效 | 请使用 < img v-bind:src="imagePath"> |
| 不再有效 | 请使用 |
| 参数变化 vm.$set('products', objectData) | 变为了 vm.$set(vm, 'products', objectData); |
| 实例中的data如果是对象，需要初始化 | 可以不用 |
有趣的知识点
这些语法并非是 Vue2 新有的，只是在学习过程中发现到的，比较有意思，就记录在这里：
Shorthands
computed property
和 Vue 实例中的属性值绑定 getter 关系的方法集，在每次调用 getter 属性的时候都会自动响应到的方法
var vm = new Vue({
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
Watchers
在异步操作的情况下，需要使用 Watcher 去监控一个数据，并作出相应的显示：
Event Modifiers
...
...
Key Modifiers
.trim
DOM Template Parsing Caveats
This will lead to issues when using custom components with elements that have such restrictions, for example:
...
The custom component
scope
终于反应过来，这个单词的中文翻译是：作用域
Props
component 在 HTML 上以属性的形式来进行值传递的方式：Every component instance has its own isolated scope. This means you cannot (and should not) directly reference parent data in a child component’s template. Data can be passed down to child components using props.
Vue.component('child', {
// declare the props
props: ['message'],
// just like data, the prop can be used inside templates
// and is also made available in the vm as this.message
template: '{{ message }}'
})
camelCase vs. kebab-case
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '{{ myMessage }}'
})
Prop Validation
Vue.component('example', {
props: {
// basic type check (`null` means accept any type)
propA: Number,
// multiple possible types
propB: [String, Number],
// a required string
propC: {
type: String,
required: true
},
// a number with default value
propD: {
type: Number,
default: 100
},
// object/array defaults should be returned from a
// factory function
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// custom validator function
propF: {
validator: function (value) {
return value > 10
}
}
}
})
Events interface
vm.$on('test', function (msg) {
console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"