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:笔者最近开通了微信公众号,大家可以关注一下哦,谢谢大家的支持!

全部评论

相关推荐

评论
点赞
收藏
分享
牛客网
牛客企业服务