话不多说,先上代码:
<!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 循环该数组,循环展示。
结果:
响应式:
为什么是响应式呢?浏览器界面F12打开开发这模式,后台输入app.movies.push('魔女宅急便'),页面及时显示响应内容。
更多推荐
绑定,双向,学习笔记,Vue
发布评论