vue学习笔记系列（一）

青旅半醒 2022-03-12 02:28 294阅读 0赞

## 基础知识 ##

**1、什么是vue框架？**

简单小巧的核心，渐进式技术栈，可以应对任何规模的应用。  
vue.js可以让web开发变得简单，颠覆传统的前端开发模式（前后端混合开发，维护困难），采用前后端分离和组件化的思想，提供了数据与业务分离的技术，能够高效进行对项目的维护。提供了现代web开发的常见高级功能。比如：

*  解耦视图与数据
 *  可复用的组件
 *  前端路由
 *  状态管理
 *  虚拟DOM

**1.1 MVVM模式**  
与传统的开发不一样的是MVVM模式，即（Model-View-ViewModel）模式。此模式由经典的软件架构MVC衍生而来。即当View（视图）变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向数据绑定（data-binding）建立联系。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]  
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官网][node]下载安装。安装成功后打开localhost：8081端口，会得到如下的显示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 2]  
**ps：笔者最近开通了微信公众号，大家可以关注一下哦，谢谢大家的支持！**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70]: /images/20220312/8b293bd187a14cbb9534e333d2a8f075.png
[node]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 1]: /images/20220312/27948e84f3534b108df885e15a3baf62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 2]: /images/20220312/0803a5e22a05457f948cc80a6bdbd4e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjcyNDE3Ng_size_16_color_FFFFFF_t_70 3]: /images/20220312/e66668b1fb834c5faa4f0595c31329c0.png