Vue学习（一）——挂载点、模板、实例之间的关系

最新推荐文章于 2024-11-22 23:31:51 发布

Bambi12

最新推荐文章于 2024-11-22 23:31:51 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/Bambi12/article/details/83893743

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Vue.js的基础使用，包括Vue实例的创建、挂载点的设定、模板语法的应用等核心概念。通过实例演示了如何在页面上显示动态数据，适合初学者快速掌握Vue的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
   <title>Vue入门</title>
   <script src="./vue.js"></script>
</head>
<body>

	<!-- 挂载点、模板、实例之间的关系 -->
	<!-- el指定的dom元素即为Vue实例的挂载点 -->
	<!-- 挂载点中的内容为模板内容 -->
	<!-- Vue实例 -->
   <div id="root"></div>
   <script>
      new Vue({
	  el:"#root",    //指定要绑定的dom节点,挂载点
	  template:'<h1>{{msg}}</h1>',   //可以写在挂载点下，也可以写在这里
	  data:{
		msg:"Hello World"
	  }
     })
   </script>
</body>
</html>

注：学习笔记内容来自：https://www.imooc.com/learn/980
官网：cn.vuejs.org