vue2概念

什么是vue2。
1.JavaScript框架 [简化javascript的操作。]
2.简化Dom操作
3.响应式数据驱动. [当数据改变时，网页显示的内容也会随之改变。当网页内容改变时数据也会随之改变]

编写第一个Vue程序
前端编写代码时，也需要一个得心应手的工具。【1.hbuilder 2.vscode<专业> 3.webstorm】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue的插件 -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		  <!-- 2.创建一个dom容器。-->
		  <div id="app">
			  <!-- 插值表达式-->
			   {{name}}
			   <p>
				    {{name}}
			   </p>
			   {{people.sex}}
			   
			   <br>
			   {{ps[1].name}}
		  </div>
		  
		  {{name}}
	</body>
	<!-- 3.编写自己的js代码 -->
	<script>
	     //创建Vue类对象
		 let app=new Vue({
			 el:"#app", // 表示把Vue对象挂在到dom元素上。该元素内都可以使用vue中的成员
			 data:{ //表示数据。格式   key:value   数据与数据之间使用逗号,
				 name:"张学友",
				 age: 15,
				 people:{name:"刘雪峰",address:"北京",sex:"女"},  //复杂对象数据
				 ps:[
					{name:"刘雪峰1",address:"北京1",sex:"女1"},
					{name:"刘雪峰2",address:"北京2",sex:"女2"},
					{name:"刘雪峰3",address:"北京3",sex:"女3"}
				 ],
			 }
		 })
		
	</script>
</html>

posted on 2024-12-27 20:33  小木不痞  阅读(10)  评论(0)    收藏  举报

导航