Vue学习01-初识Vue.js

最新推荐文章于 2024-05-08 13:18:09 发布

毛糖糖

最新推荐文章于 2024-05-08 13:18:09 发布

阅读量230

点赞数

文章标签： Vue.js

本文链接：https://blog.csdn.net/ZZ15901898915/article/details/103214334

版权

最近在学习Vue.js，将自己学到的一些知识记录下来，后期会不定期的更新。(Vue小白，有那些不对或者需要补充的地方，可以提出来，大家共同进步哟。)

一、Vue是什么？

Vue的官方文档中是这样介绍它的：简单小巧的核心，渐进式的技术栈，所谓渐进式，就意味着我们可以将其一步步的，阶段性的来使用Vue，将其嵌套进我们的应用程序中去。
Vue含有其本身的特点：
1）解耦视图与数据
2）可复用组件
3）前端路由
4）状态管理
5）虚拟DOM
(这些特点在目前这个阶段可能还有些比较难理解，在后期的学习中会慢慢体会)

二、 MVVM模式

与其他前端框架一样，Vue.js在设计上也使用的是MVVM(Model-View-ViewModel)模式
1）Model：数据层，服务器所请求的数据，界面数据提供者
2）View：视图层，即界面展示层，在前端开发中，通常是DOM层，用于将数据展示给用户
3）ViewModel：视图模型层，实现Data Binding以及Dom Listener，当Dom发生一些事件（点击、滚动、touch）等，监听这些时间并改变对应的Data
例如下面计数器的实例：
MVVM模式

三、Vue的生命周期

每个Vue实例创建时，都会经历一系列初始化的过程，也会调用相应的生命周期钩子，我们可以利用这些钩子，来完成不同阶段的业务逻辑。
Vue生命周期钩子中，比较常用的有：
1）created ：实例创建完成后调用，该阶段完成了数据的观测等，但尚未挂载， $e l 还不可用，在需要初始化一些数据时比较常用 2 ） m o u n t e d ：$ el挂载到实例上之后，一般我们第一个业务逻辑会从这里开始
3）beforeDestory ：实例销毁之前调用，主要解绑一些使用addEventListener监听事件等。
下图是官网中的图片：
Vue生命周期

四、Vue的安装

1.直接引入
官网直接下载引入，地址：Vue.js
2.CDN
1)对于制作原型或学习，你可以这样使用最新版本

2)对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏

3.NPM
$ npm install vue

五、第一段Vue.js程序

	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="app">
		<div>{{message}}</div>
		<ul>
			<li v-for="item in movies">{{item}}</li>
		</ul>
	</div>
</body>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			message:"我喜欢以下电影",
			movies:["变形金刚","爱宠大机密","狮子王"]
		}
	})
</script>

运行结果：
我喜欢以下电影
变形金刚
爱宠大机密
狮子王