Vue入门教程--Vue的第一个实例（article:1）

最新推荐文章于 2023-06-09 11:06:08 发布

DuCeh

最新推荐文章于 2023-06-09 11:06:08 发布

阅读量410

点赞数

分类专栏： Vue 文章标签： vue js 入门基础

本文链接：https://blog.csdn.net/Knight_vae/article/details/100116589

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Vue.js 初步入门

框架介绍

什么是vue

在这里插入图片描述

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

学习vue的前提

学习vue之前，必须要储备的基本知识有：

HTML
CSS
JavaScript(甚至要掌握ES6)
准备工作

首先要从官网下载最新版的vue，也可以是任意Vue2.x版本。
可以用<script>标签在线引入,也可以下载本地文件再引入。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Hello vue.js

以下是vue的第一个实例，我会用注释详细注明各个语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloVue</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script><!--用script引入本地vue-->
	</head>
	<body>
		<!--首先要定义一个本页的全局容器，
		用来做vue的依赖元素-->
		<div id="container">
			<!--这是一个p标签，里面用来填充文本，
			其中的{{####}}双花括号是表达式语句，
			类似于es6中的${}表达式-->
			<p>{{msg}}</p>
		</div>
	</body>
	<script type="text/javascript">
		// 新建一个vue对象,里面需要传入一个“选项对象”
		// 也可以理解成json对象
		new Vue({
			//el是element的缩写,传入vue依赖的元素
			el:"#container",
			//数据与,所有与UI交互的数据都可以放在这儿
			data:{
				msg:"hello vue.js"
			},
			//方法块,用来放置方法
			methods:{}
		});
	</script>
</html>

运行结果如图所示：
在这里插入图片描述

DuCeh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门教程--Vue的第一个实例（article:1）

Vue.js 初步入门框架介绍什么是vueVue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。学习vue的前提学习vue之前...
复制链接

扫一扫