Vue学习笔记二（双向绑定、循环、响应式）

编程入门行业动态更新时间:2024-10-28 04:17:44

话不多说，先上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>helloVueJS</title><!--引入vue--><script src="../js/vue.js"></script></head>
<body><div id="app"><h1>{{movies}}</h1><ul><li v-for="item in movies">{{item}}</li></ul><h2>{{message}}</h2></div><script>//ES6中   let(变量)const(常量)  var没有作用域//编程范式：声明式编程，传统JS是命令是编程const app = new Vue({el:'#app',  //关联元素data:{message:'你好！',movies:['千与千寻','天空之城','幽灵公主','哈尔的移动城堡']}})</script>
</body>
</html>

解释一下脚本代码：

在创建Vue对象的时候，传入了一些 {}

{}中包含 el 属性，该属性决定了这个Vue对象挂载到哪一个元素，上面这里挂在到了app这个id。

{}包含data属性，该属性通常包含了要显示的数据。

{}中包含数组时，可用v-for 循环该数组，循环展示。

结果：