什么是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>
标签:Vue,name,雪峰,sex,概念,vue2,address
From: https://www.cnblogs.com/xiaomubupi/p/18636688