Vue概况与核心思想
- Vue本身不是前端框架
- Vue结合周边生态构成一个灵活的、渐进式前端框架
声明式渲染————-v-model
组件系统—————-component
客户端路由————-vue-router
大规模状态管理——-vuex
构建工具—————-webpack
核心思想
- 数据驱动
- 组件化
通过MVVM的数据绑定实现自动同步
Vue通过数据劫持和观察者-订阅者模式实现数据双向绑定,简单实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="aa"/>
<span id="bb">{{hello}}</span>
<script>
var obj = {};
Object.defineProperty(obj,'hello',{
get:function(val){
return val;
},
set:function(val){
document.getElementById('bb').innerHTML = val;
document.getElementById('aa').value = val;
}
});
document.getElementById('aa').onkeyup = function(e){
obj.hello = e.target.value;
};
obj.hello = "";
</script>
</body>
</html>
早期大家使用JQuery开发前端,后来业务不断增长,引入requireJS来实现模块化开发,提高团队合作。组件具有高内聚、高复用、可互换、可组合的优点,称为现在前端开发的趋势。
Vue 组件树