Vue的创建

最新推荐文章于 2024-01-11 17:32:50 发布

Snaker.wang

最新推荐文章于 2024-01-11 17:32:50 发布

阅读量304

点赞数

分类专栏： Vue 文章标签： java

本文链接：https://blog.csdn.net/wdd199801140310/article/details/103531915

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue
               渐进式JavaScript框架
               采用自底向上的增量开发
               Vue核心关注视图

               MVVM：
                   Model ——> ViewModel ——> View
                   Model <—— ViewModel <—— View
                   视图的改变，会影响数据，反之亦然。

           Vue的基础语法：
               一、Vue的实现
                   1、引入Vue的JS文件，搭建好Vue环境
                       <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
                   2、准备DOM结构
                       <div id="id属性值"> </div>
                   3、实例化Vue组件
                       new Vue({
                           // 挂载元素
                           el:"#app", // el 是element的简写，绑定id为app的html代码片段
                           // 定义组件内部数据
                           data:{
                               // 数据格式是JSON格式的键值对
                               msg:"Hello Vue!"
                           }
                       });
                   4、获取组件中的数据
                       "mustache"语法获取数据：{{key}}
                       双花括号取值，key代表的是vue组件中data属性的key

	<body>
		<!-- 2、准备DOM结构 -->
		 <div id="app"> 
			{{msg}}
		 </div>
		
	</body>
	
	<script type="text/javascript">
		/* 3、实例化Vue组件 */	
		new Vue({
			// 挂载元素
			el:"#app", // el 是element的简写，绑定id为app的html代码片段
			// 定义组件内部数据
			data:{
				// 数据格式是JSON格式的键值对
				msg:"Hello Vue!"
			}
		});
		
	</script>