1.1什么是Vue.js?
(1).简单小巧的核心,渐进式技术栈,
所谓的简单小巧是指Vue.js压缩后仅仅只有17kb,而渐进式就是你可以一步步地、有阶段性地使用Vue.js.
(2).提供了现代web开发中常见的高级功能
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
1.1.1 MVVM模式
简单的来理解,就是通过双向绑定来让视图层和视图模型保持一致,自动更新状态。
1.2如何使用Vue.js
这是两种v-for遍历方法的区别
<body>
<div id="app">
<ul>
<li v-for="(elem,i) of books" :key="i">{{elem.name}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{name:'《Vue.js实战1》'},
{name:'《Vue.js实战2》'},
{name:'《Vue.js实战3》'}
]
}
})
</script>
</body>
<body>
<div id="app">
<ul>
<li v-for="elem in books">{{elem.name}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
books:[{name:'《Vue.js实战1》'},
{name:'《Vue.js实战2》'},
{name:'《Vue.js实战3》'}
]
}
})
</script>
</body>