入学vue

最新推荐文章于 2024-09-10 11:56:39 发布

斟茶冰冰yozi

最新推荐文章于 2024-09-10 11:56:39 发布

阅读量87

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_47800811/article/details/121363375

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何开始使用Vue.js，包括从官网下载Vue.js开发版本，安装HBuilderX IDE，新建Vue项目，通过<script>标签导入Vue，编写第一个简单的Vue界面，展示了如何在Vue实例中绑定数据并实现效果对比。

摘要由CSDN通过智能技术生成

下载

到官网Vue.js安装，选择开发版本（包含完整的警告和调试模式）。

官网下载安装HBuilderX（写vue方便的IDE）。

创建简单项目

新建

新建一个项目，把vue.js文件复制到项目下，创建一个.html文件。

导入

用<script>导入

码代码

写的第一个简单vue界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{a}}{{b}}
		</div>
		
		<script type="text/javascript">
			var data = {a : "Hello ~ ", b : "斟茶冰冰yozi"};
			var vm = new Vue({
				el : "#app",
				data : data
			});
			// data.a = "goodbye ~ ";
			// vm.$data.b = "yozi";
		</script>
		
	</body>
</html>

id为app的，data为数据源，把对象加入到Vue的实例中，el: id而data: 数据源。

data.a 可以实现改变a的值，vm.$data.b 也是改变对象的值。

实现效果对比

data.a = "goodbye ~ "; 改变a的数据：

vm.$data.b = "yozi"; 改变b的数据：

斟茶冰冰yozi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入学vue

下载到官网Vue.js安装，选择开发版本（包含完整的警告和调试模式）。官网下载安装HBuilderX（写vue方便的IDE）。创建简单项目新建新建一个项目，把vue.js文件复制到项目下，创建一个.html文件。导入用<script>导入码代码写的第一个简单vue界面<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
复制链接

扫一扫