学习Vue（1）——第一个Vue程序

最新推荐文章于 2024-09-13 16:30:45 发布

二木成林

最新推荐文章于 2024-09-13 16:30:45 发布

阅读量278

点赞数 1

分类专栏： # Vue 文章标签： Vue

本文链接：https://blog.csdn.net/cnds123321/article/details/104019283

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

说明

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

至于为什么要学Vue呢？一是因为Vue是热门的前端框架，而是可以通过Vue来实现前后端分离。

参考资料

官方文档：http://vuejs.org/v2/guide/syntax.html

中文文档: https://cn.vuejs.org/v2/guide/syntax.html

菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

Vue的安装

在使用之前，需要安装Vue.js。

1.下载vue.js用<script>标签引入

以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载链接：https://vuejs.org/js/vue.min.js

引入代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 引入Vue.min.js -->
		<script type="text/javascript" src="js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					msg:"Hello World!"
				}
			})
		</script>
	</body>
</html>

打开网页查看如下，即引入成功

2.使用CDN

建议下载到本地引入使用。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
		</div>

		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					msg: "Hello World!"
				}
			})
		</script>
	</body>
</html>

可能加载有些慢，所以建议本地引入。

第一个Vue程序

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

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

第一个Vue实例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习Vue</title>
		<!-- 使用CDN引入Vue.js -->
		<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 可以通过"{{属性名}}"来输出Vue对象的属性 -->
			<h1>属性字段msg：{{msg}}</h1>
			<!-- 可以通过"{{函数名()}}"来输出函数返回值，记住使用函数需要加小括号 -->
			<h1>函数方法print：{{print()}}</h1>
		</div>

		<script type="text/javascript">
			new Vue({
				// el这个参数必有,对应的是DOM元素,可以是id名称,表示vue挂载在id="app"的DOM元素上,id="app"所在的区域也是vue数据要渲染的区域
				el: "#app",
				// data参数用于定义字段属性,在这里只有一个名为msg的属性,值是"Hello World!"
				data: {
					msg: "Hello World!"
				},
				// mthod参数用于定义函数方法,可以通过return来返回函数值,多个函数用逗号(,)隔开
				methods: {
					// "print"指的是函数名,后面的function(){}是函数的具体内容
					print: function() {
						return "您好，Vue！";
					}
				}
			})
		</script>
	</body>
</html>

代码解释说明：