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端口，会得到如下的显示
在这里插入图片描述

vue学习笔记系列（一）

基础知识

猜你喜欢