Vue 1

最新推荐文章于 2023-03-20 09:45:21 发布

ZYS_Future

最新推荐文章于 2023-03-20 09:45:21 发布

阅读量234

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46389594/article/details/104468432

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习Vue.js的第一天

Vue.js 是什么？

Vue (读音 /vjuː/，类似于 view)
是一套用于构建用户界面的渐进式JavaScript框架。Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层。它不仅易于上手，还便于与第三方库或即有项目进行整合。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue是一个用来开发Web界面的前端库，也是一个轻量级的工具。

引入Vue文件（核心库）

直接用<script>引入

<script src="vue.js"></script>

CDN 引入 (对于制作原型或学习，你可以这样使用最新版本)

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

第一个Vue项目 “Hello world"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="demo">
			{{msg}}    <!-- 两对大括号{{}}成为模板，用来进行数据的绑定显示在页面上。 -->
		</div>
		
		<script>
			//配置是否允许veu-devtools检查代码，方便调试，生产环境中需要设置为false.
			Vue.config.devtools=false;
			//阻止Vue启动时生成生产消息。
			Vue.config.productionTip=false;
			
			
			var x=new Vue({
				el:('#demo'),           //  element 元素    指定关联的选择器
				data:{                  //  存储数据
					msg:'Hello Vue!'    // 对象： 值
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述