Vue.js第1篇：初识Vue

水晶果冻1125

于 2018-11-29 17:34:35 发布

阅读量246

点赞数

文章标签： Vue 实例

本文链接：https://blog.csdn.net/m0_37617778/article/details/84636012

版权

1、Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。（来源于官网）

2、学习前提

你已了解关于 HTML、CSS 和 JavaScript 的中级知识。如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的主意——掌握好基础知识再来吧！

3、安装

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>

Vue.js v2.5.17下载链接：https://pan.baidu.com/s/1dB5BcmOshbe8Pz11WBktyQ

在开发环境下不要使用压缩版本（vue.min.js），不然你就失去了所有常见错误相关的警告!

4、创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

Vue的示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue</title>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript">
		new Vue({
			//el发生行为的目的地
			//el:'#app',
			el:document.getElementById('app'),
			//template:装载的模板
			template:'<div><h1>大家好！{{text}}</h1></div>',
			//动态数据的声明
			data:function(){
				return {
					text:'hello vue'
				};
			}
		});
	</script>
	
</body>
</html>

options选项描述new Vue({options});