【vue2.x（一）】第一个vue程序

和光同其尘

已于 2022-03-20 12:38:21 修改

阅读量1.3k

点赞数

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

于 2022-03-14 22:44:02 首次发布

本文链接：https://blog.csdn.net/zhanyu1/article/details/123490686

版权

vue 专栏收录该内容

7 篇文章 7 订阅

订阅专栏

1. vue简介

Vue.js是一套构建用户界面的渐进式js框架。与其他重量级框架不同，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

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

作者：尤雨溪（前Google工程师，目前在阿里巴巴上班）

官网英文：https://vuejs.org/

官网中文：https://cn.vuejs.org/

学习vue框架，需要具备html、css、javascript基础。

2. vue开发工具

常用工具如下，我们选用vscode 或 hbuilderx。

Visual Studio Code（免费）
WebStorm（收费）
HBuilder X（免费）

3. 第一个vue程序

3.1. 下载vue2.x版本

进入https://cn.vuejs.org/v2/guide/installation.html ，选择开发版或生产版下载。
在这里插入图片描述

3.2. 实现第一个vue程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue程序</title>
		// 引入vue.js文件
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		// div块是vue模板
		<div id="app">
			<p>{{msg}}</p>
		</div>
		<script type="text/javascript">
			// 创建vue实例
			const app = new Vue({
				el:'#app', // el将vue实例与id=app的div进行绑定
				data:{     // data中定义的数据，供div使用
					msg:'Hello World vue.js'
				}
			})
		</script>
	</body>
</html>

微信扫码关注微信公众号【程序员战羽】获取更多技术内容

在这里插入图片描述

和光同其尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【vue2.x（一）】第一个vue程序

1. vue简介Vue.js是一套构建用户界面的渐进式js框架。与其他重量级框架不同，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，非常容易与其它库或已有项目整合。Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。作者：尤雨溪（前Google工程师，目前在阿里巴巴上班）官网英文：https://vuejs.org/ 官网中文：https://cn.vuejs.o
复制链接

扫一扫