Vue入门（一） 初识vue及数据驱动和组件化

• 旧浏览器逐渐淘汰，移动端需求增加
• 前端交互越来越多，功能越来越复杂
• 架构从传统后台MVC向REST API + 前端MVVM迁移

VueJS是什么

• 轻量级的MVVM框架
• 数据驱动+组件化前端开发
• Github 超过25K + 的STAR ,社区完善

对比Angular React

• Vue.js更轻量，gzip后只有26K(angular 56K，React 44K)
• Vue.js更容易上手，学习曲线平稳
• 吸收两家之长，借鉴了angular的指令和react的组件化

VUe.js的核心思想

1. 数据驱动
2. 组件化

数据驱动

1、通过MVVM的数据绑定实现自动同步

数据驱动

html代码

<div id="vue">
		Hello Vue{{message}}
</div>

Javascript代码

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

以上代码中{{message}}双向绑定的数据是指令 真正执行的时候被编译为v-text指令
在JS代码中 vm是ViewModel 定义的new Vue 是view data就是常说的Model

组件化
我们知道，每一个应用界面都可以看作是组件构成的
每一个组件都可以看做是一个ViewModel,界面又可以抽象为ViewModel Tree

在Vue.js中注册组件

// 扩展Vue来定义一个可复用的组件类
var MyComponent = vue.extend({
      template:'<p>{{message}}</p>',
      paramAttributes:['msg']
})

//全局注册该组件

Vue.component(‘my-component’ , MyComponent)

在Vue.js模板中使用组件

<my-component msg=hello"></my-component>

my-component组件的模板将会被填充到该元素中，而msg则会被作为数据传入组件实例