Vue.extend定义
Vue.extend返回的是一个“拓展实例构造器”，也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用“拓展实例构造器”来生产组件实例，并挂载到自定义元素上。
注意：extend创建的是一个组件构造器，而不是一个具体的组件实例。所以他不能直接在new Vue中这样使用： new Vue({components: fuck}),最终还是要通过Vue.components注册才可以使用的。
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="app">
<todo :todo-data="groceryList"></todo>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue " type="text/javascript"></script>
<script>
/**
* 请注意，extend创建的是一个组件构造器，而不是一个具体的组件实例。
* 所以他不能直接在new Vue中这样使用： new Vue({components: fuck})
* 最终还是要通过Vue.components注册才可以使用的。
*/
// 构建一个子组件
var todoItem = Vue.extend({
template: ` <li> {{ text }} </li> `,
props: {
text: {
type: String,
default: ''
}
}
})
// 构建一个父组件
var todoWarp = Vue.extend({
template: `
<ul>
<todo-item
v-for="(item, index) in todoData"
v-text="item.text"
></todo-item>
</ul>
`,
props: {
todoData: {
type: Array,
default: []
}
},
// 局部注册子组件
components: {
todoItem: todoItem
}
})
// 注册到全局
Vue.component('todo', todoWarp)
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
</script>
</html>请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦
另外，无论是Vue.extend还是Vue.component 里面的data定义都必须是函数返回对象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接对data设置对象之外吧，如 new Vue({data: {}});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Vue中注册组件</title>
</head>
<body>
<div id="todoItem"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript"></script>
<script>
// 局部注册组件
var todoItem = Vue.extend({
data: function () {
return {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
},
template: `
<ul>
<li v-for='(d, i) in todoData' :key="i">
{{ d.text }}
</li>
</ul>
`
});
// 请注意，在实例化extends组件构造器时，传入属性必须是propsData、而不是props哦
new todoItem({
propsData: {
todoData: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
}).$mount('#todoItem')
</script>
</html>
Vue最佳实践
Vue 最佳实践，是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码，志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题
vue知识点总汇
keep-alive它是vue的内置组件在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
vue中使用v-for时为什么不能用index作为key？
Vue 和 React 都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设
Vue基于snabbdom做了哪些事
Snabbdom 核心代码大约只有 200 行。它提供了模块化架构，具有丰富的功能，可通过自定义模块进行扩展。在了解核心 patch 前，需要先了解 snabbdom 的模块化架构思想。
尤雨溪：Vue Function-based API RFC【转】
将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。组件 API 设计所面对的核心问题之一就是如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。
vue中修改Modal的重置功能怎么写？
工作中遇到弹出模态框形式的修改功能，模态框里面是Form表单,Form表单中的内容是从后台获取的，这时候用户修改完没有提交，而是想重置然后重新修改，怎么办呢？
详细分析Vue.nextTick()实现
刚开始接触Vue的时候，哇nextTick好强，咋就在这里面写就是dom更新之后，当时连什么macrotask、microtask都不知道(如果你也不是很清楚，推荐点这里去看一下，也有助于你更好地理解本文)，再后来，写的多了看得多了愈发膨胀了，就想看看这个nextTick到底是咋实现的
vue混入
混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。
Vue基础之计算属性
设想一个场景，你需要得到一个复杂运算/逻辑的返回值，利用模板内的表达又过长且难以阅读和维护，这时计算属性就可以很好的解决你的问题。看下面的例子：
vue 自定义指令
接下来我们来看一下钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。但有一些是没有相对应的指令进行操作。在这里以progress（h5的新标签进度条）为例，向大家介绍Vue的一个用于指令扩展的方法:directive(自定义指令)。