vue 页脚_我从未见过如此简洁易懂的Vue教程

我从未见过如此简洁易懂的Vue教程

这是一篇长文，按照我自己的逻辑重新整理一下,包含所有Vue的基础知识点。

但是我更建议你先简略的阅读官方的文档，因为本文具有一定的阅读门槛，同时我也竭尽所能把这门槛降到最低，同样你也可以把本文作为快速回忆教程。

发挥100%的专注力，调动体内所有的热情，你将做到很多令人惊叹的事情

什么是MVVM ？

对比以前的mvc或者mvp，就是把C或者p替换成vm。

vm就是上图，请仔细看一些细节，vm监听DOM，当数据改变的时候，vm会去自动更新视图。

面向未来的组件系统

实现了一些未来的w3c规范(暂不赘述)

Web 组件规范

Slot API

根 vue 实例

let viewModel = new Vue({

// 包含数据、模板、挂载元素、方法、生命周期钩子等选项

})

Hello Wrold 例子

Hello { { name }}!

// 这是我们的 Model

var model = {

name: 'Vue.js'

}

// 创建一个 Vue 实例或 "viewModel"

// 它连接 View 与 Model

var viewModel = new Vue({

el: '#app',

data: model

})

组件 Component 构造器

vue.extend()返回的只是一个构造器，我们需要通过vue.extend()的返回值和new关键字创建实例。

当我们注册为组件的时候，内部就已经帮我们创建好了实例。

Tip： 如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

let Footer = vue.extend({

template: '

我是页脚组件

'

})

// 注册为全局组件

Vue.component('v-footer', MyComponent)

// 创建根实例

new Vue({

el: '#app'

})

生命周期

上图的就是ViewModel的生命周期，仔细的看其实并不难。目前先了解一下。

在传统软件工程中，特别是QT类桌面端软件，都有软件的生命周期，还有比如Android的生命周期，React的生命周期。

目前的前端趋势正在向此方面靠近。

流程大致像这样

created()->beforeCompile()->compiled()->ready()

->attache