001_Vue入门

2022-02-10 13:00:13 作者：互联网

1. Vue是一个国产的前端框架, 作者尤雨溪。

2. Vue官方网址: https://vuejs.org/。

3. Vue(读音/vjuː/, 类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层, 不仅易于上手, 还便于与第三方库或既有项目整合。另一方面, 当与现代化的工具链以及各种支持类库结合使用时, Vue也完全能够为复杂的单页应用提供驱动。

4. 渐进式框架: 声明式渲染——>组件化应用构建——>客户端路由——>状态管理——>项目构建。

5. 声明式渲染

6. 组件化应用构建

7. 路由

8. 传统开发模式和Vue开发步骤

8.1. JavaScript和JQuery开发HelloWorld

8.2. Vue开发HelloWorld

9. HelloWorld案例

9.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>基于vue的Hello World案例</title>
	</head>
	<body>
		<div id="app">
			插值表达式:
			<div>{{msg}}</div>
			<div>3 + 2 = {{3 + 2}}</div>
			<div>{{msg + "-------" + 3 + 2}}</div>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			/**
			 * Vue开发的基本步骤
			 * 1. 需要提供标签用于填充数据
			 * 2. 引入vue库文件
			 * 3. 使用vue开发功能
			 * 4. 把vue提供的数据, 填充到标签里
			 */
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "Hello World"
				}
			});
		</script>
	</body>
</html>

9.2. 运行效果