vue笔记——02 初识Vue
程序员文章站
2022-03-29 08:20:00
...
vue笔记——02 初识Vue
一 vue是声明式编程，区别于JS的命令式编程。
1.1 原生js做法（命令式编程）
- 创建div元素，设置id属性
- 定义一个变量叫message
- 将message变量放在div元素中显示
- 修改message数据
- 将修改的元素替换到div
1.2 声明式编程
vue写法（声明式）
- 创建一个div元素，设置id属性
- 定义一个vue对象，将div挂载在vue对象上
- 在vue对象内定义变量message，并绑定数据
- 将message变量放在div元素上显示
- 修改vue对象中的变量message，div元素数据自动改变
二 Vue列表的展示（v-for）
开发中常用的数组有许多数据，需要全部展示或者部分展示，在原生JS中需要使用for循环遍历依次替换div元素。
在vue中，使用v-for可以简单遍历生成元素节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>vue列表展示</title>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<ul>
<li v-for="(item, index) in movies" :key="index">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el:"#app",//用于挂载要管理的元素
data:{//定义数据
message:"message",
movies:["商品1","商品2","商品3","商品4"]//定义一个数组
}
})
</script>
</body>
</html>
<li v-for="(item, index) in movies" :key="index">{{item}}</li>
item表示当前遍历的元item素。
index表示元素索引。
key 是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。