vue基础篇
第一章 初识vue
1.1 vue是什么
vue是一个渐进式技术栈(progressive)
所谓渐进式就是可以一步步有阶段性的来使用。
他提供了现代web开发中常见的高级功能
1.解耦视图与数据(视图和数据分离)
2.可复用组件
3.前端路由
4.状态管理
5.虚拟DOM(virtual dom)虚拟节点
1.1.1 mvvm模式
与angular和Ember等前端知名框架一样
vue.js也是使用了MVVM(Model-View-ViewModel)模式
MVVM模式是由经典的软件架构MVC(model view control)衍生来的
当view（视图层）发生变化时，会自动更新到viewmodel（视图模型）
反之亦然，View和ViewModel之间通过双向绑定（data-binding）建立联系。
1.1.2 vue.js有什么不同
if(showBtn){
var btn=$('<button>click me<button>');
btn.on('click',function(){
console.log('clicked');
});
$('#app').append(btn)
}
这段代码就可以看出，视图代码和业务逻辑紧耦合在一起
随着功能的不断增加，直接操作dom会使代码越难维护。
而通过vue.js可以将视图和数据进行分离，只需要关心数据，视图部分vue会自己搞定。
以上代码可以改写为
<body>
<div id="app"></div>
<button v-if="showBtn" @click="handler()">click me</button>
<script>
new Vue({
el: '#app',
data() {
return {
showBtn: true
}
},
methods: {
handler() {
console.log('click')
}
}
})
</script>
</body>
1.2 如何使用vue.js
1.2.1 传统的前端开发模式
jquery+requireJS+artTemplate+Gulp
这套技术栈以jquery为核心，能够兼容大多数浏览器，这是企业比较关心的。
使用requireJS进行模块化开发可以解决代码依赖混乱的问题同时便于维护及团队协作。
artTemplate作为前端模板，采用预编译让性能有了质的飞跃。
使用自动化构建工具（gulp）可以合并压缩代码
1.2.2 vue开发模式
vue是一个渐进式的前端开发框架，根据项目需求可以从不同维度来使用
可以使用脚手架搭建,也可以直接通过script加载CDN
<body>
<div id="app">
<ul>
<li v-for="item in items" :key="item.id">{{item.name}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
items: [{
id: 1,
name: 'html'
},
{
id: 2,
name: 'css'
},
{
id: 3,
name: 'js'
},
]
}
}
})
</script>
</body>
列表的一个渲染示例
