vue学习笔记系列(一)
基础知识
1、什么是vue框架?
简单小巧的核心,渐进式技术栈,可以应对任何规模的应用。
vue.js可以让web开发变得简单,颠覆传统的前端开发模式(前后端混合开发,维护困难),采用前后端分离和组件化的思想,提供了数据与业务分离的技术,能够高效进行对项目的维护。提供了现代web开发的常见高级功能。比如:
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
1.1 MVVM模式
与传统的开发不一样的是MVVM模式,即(Model-View-ViewModel)模式。此模式由经典的软件架构MVC衍生而来。即当View(视图)变化时,会自动更新到ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向数据绑定(data-binding)建立联系。
1.2 vue的不同之处
①传统的jQuery写法对比:
if(showBtn){
var btn = $('<button>Click Me</button>');
btn.on('click' , function(){
console.log('Clicked!');
});
$('#app').append(btn);
}
使用这种写法就不能够使得数据与视图分离,难以维护。而vue使用的是MVVM模式拆分视图层和数据层,我们关心的就是数据,其他的DOM事情vue帮你自动搞定。如下:
<div id = 'app'>
<button v-if = 'showBtn' v-on="handleClick">Click</button>
</div>
<script>
new Vue({
el:'#app',
data:{
showBtn:true
},
methods:{
handleClick:function(){
console.log('Click!');
}
}
})
</script>
1.3 如何使用Vue进行开发
①可以使用线上引入的方式
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
②可以使用工程化 cli 的方式构建(不适合初学者)
npm install -g @vue/cli
vue create my-project
使用此方式确保安装有node环境,打开控制台cmd输入以上命令, 如果没有下载node可到 node官网下载安装。安装成功后打开localhost:8081端口,会得到如下的显示
ps:笔者最近开通了微信公众号,大家可以关注一下哦,谢谢大家的支持!