js数组里面可以放哪些元素呢（【Vue+JS】数组存放的多个对象在网页中以列表的形式显示）
导读：视频链接（P1-P2）： 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通...
视频链接（P1-P2）：
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
Vue是什么？
介绍
原生JS实现（命令式编码）
就一个命名一个命令严格执行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 展示人员列表的容器 --> <ul id="list"></ul> <script type="text/javascript"> //一些人的数据 let persons = [ {id:001,name:张三,age:18}, {id:002,name:李四,age:19}, {id:003,name:王五,age:20} ] //准备HTML字符串 let htmlStr= //遍历数据拼接HTML字符串 persons.forEach(p =>{ //使用模板字符串 htmlStr+=`<li>${p.id} - ${p.name} - ${p.age}</li>` }); //获取list元素 let list = document.getElementById(list) //修改内容操作DOM list.innerHTML=htmlStr; </script> </body> </html>Vue实现（声明式编码）
无需修改操作DOM ，提高开发效率
Vue的开发版本安装 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul id="list"> <!-- 以插值运算符的形式遍历输出 --> <li v-for="p in persons"> {{p.id}}-{{p.name}}-{{p.age}} </li> </ul> <!-- 本地引入vue标签文件 ，开发版本 --> <script type="text/javascript" src="https://www.cnblogs.com/PaturNax/p/js/vue.js"></script> <script type="text/javascript"> //一些人的数据封装到Vue实例的data函数中 var vm=new Vue({ //指定挂载元素 el:"#list", data:{ persons: [ {id:001,name:张三,age:18}, {id:002,name:李四,age:19}, {id:003,name:王五,age:20} ] } }); </script> </body> </html>页面效果：
实现原理的区别
虚拟DOM: 存放在内存的数据
JS Vue 原理 数据data通过innerHTML->真实DOM中 数据->虚拟DOM->真实DOM 结果 每次过滤与对比数据的效率低 ，因为要遍历 ，代码修改麻烦 当数据发生变化时 ，通过diff算法可以快速比较不同 ，本质是哈希表找Key有关于他们的实现原理也常作为面试题考点
面试题：Vue中为什么要使用key创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！