认识vue

最新推荐文章于 2024-11-03 19:51:25 发布

猪八戒1.0

最新推荐文章于 2024-11-03 19:51:25 发布

阅读量696

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_58631644/article/details/129227821

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

认识vue.js框架

它是目前非常流行的一个框架。主要用于前端的MVVM的开发，也是前端的SPA开发框架，它是一个专门用于服务前端的一个框架能够实现SPA的框架目前有3个

1. vue.js

2. react.js

3. angular

M:model V:view VM:viewmodel

网页代码相当于view,上面的data相不于model,而这两者结合过程，我们叫viewmodel

下载网址

https://v2.cn.vuejs.org/Vue.js - The Progressive JavaScript Frameworkhttps://v2.cn.vuejs.org/

开发工具

前端的开发工具有很多

1. WebStorm这一款开发工具，好用，但是要钱

2. VSCode微软出品，必属精品，免费，不要钱

3. HbuilderX 国产软件，良心制作, 这一款开发工具后期不仅可以开发网页，不可以将我们的 webapp打包成安卓或ios程序，也可以发布为小程序

第一个vue程序

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		{{msg}}
	</div>
</body>
<script src="js/vue.js"></script>
<script>
	new Vue({
		el:"#app",
		data:{
			msg:"hello world"
		}
	});
</script>
</html>

在上面的代码里面，我们可以看到一个{{}}的东西，这是一种特殊的语法，这一种法允许在MVVM的视图区域里面去使用data当中的数据，也可以在{{}}去书写js代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		{{student.name}} {{student.class}}
		<ul>
			<li>{{play[0]}}</li>
			<li>{{play[1]}}</li>
			<li>{{play[2]}}</li>
		</ul>
	</div>
</body>
<script src="js/vue.js"></script>
<script>
	new Vue({
		el:"#app",
		data:{
			msg:"你好",
			student:{
				name:"猪八戒",
				class:"2班"
			},
			play:["抖音","电视剧","敲代码"]
		}
	});
</script>
</html>