Vue前端框架基础+Element的使用( 三 ) _生活百科

视图代码
// 创建vue核心对象new Vue({el:"#app",data(){return {count:0}}});

1.3.4 v-for 指令

迭代器语法
<标签 v-for="变量名 in 集合模型数据">{{变量名}}</标签>
索引语法
<标签 v-for="(变量名,索引变量) in 集合模型数据">{{索引变量 + 1}} {{变量名}}</标签>
代码演示
- vue代码
  new Vue({el: "#app",data() {return {addrs: ["北京", "上海", "广州"]}}});
- 视图代码
  <div id="app"><div v-for="addr in addrs">{{addr}}<br></div><hr><div v-for="(addr, i) in addrs">{{i}} ---- {{addr}}</div></div>

1.4 生命周期

生命周期的八个阶段
状态阶段周期beforeCreate创建前created创建后beforeMount载入前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后
生命周期示意图

文章插图
生命周期函数
new Vue({el: "#app",data() {return {addrs: ["北京", "上海", "广州"]}},method:{show(){alert("");}},// 挂载完成时将被执行mounted(){alert("页面加载完成");}});

1.5 案例1.5.1 需求

使用Vue简化AJAX中的品牌数据展示案例

1.5.2 查询所有功能1.5.2.1 实现方式

页面加载完成后发送异步请求，获取列表数据，使用mounted()
后台收到请求调用对应service方法进行查询
将List集合转换为JSON数据
响应JSON数据
便利集合数据，展示表格，使用v-for

1.5.2.2 编码

引入Vue的JS文件
<script src="https://www.huyubaike.com/biancheng/js/vue.js"></script>
创建Vue对象
new Vue({el:"#app",data(){return{// 注意此处为数组brands:[]}},// 当前页面加载完成后发送AJAX请求，查询数据mounted(){// Axios无法直接使用原生的thisvar _this = this;axios({method: "get",url: "http://localhost:8080//brand-demo-ajax/selectAll"}).then(function (resp) {// 接收后台给到的数据，为JSON串，可自动反序列化为JavaScriptObjects_this.brands = resp.data;})}})
修改视图
<div id="app"><a href="https://www.huyubaike.com/biancheng/addBrand.html"><input type="button" value="https://www.huyubaike.com/biancheng/新增"></a><br><hr><table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><tr v-for="(brand, i) in brands" align="center"><td>{{i+1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.status}}</td><td><a href="https://www.huyubaike.com/biancheng/#">修改</a> <a href="https://www.huyubaike.com/biancheng/#">删除</a></td></tr></table></div>
完整代码展示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><a href="https://www.huyubaike.com/biancheng/addBrand.html"><input type="button" value="https://www.huyubaike.com/biancheng/新增"></a><br><hr><table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><tr v-for="(brand, i) in brands" align="center"><td>{{i+1}}</td><td>{{brand.brandName}}</td><td>{{brand.companyName}}</td><td>{{brand.ordered}}</td><td>{{brand.description}}</td><td>{{brand.status}}</td><td><a href="https://www.huyubaike.com/biancheng/#">修改</a> <a href="https://www.huyubaike.com/biancheng/#">删除</a></td></tr></table></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js"></script><script>new Vue({el:"#app",data(){return{// 注意此处为数组brands:[]}},// 当前页面加载完成后发送AJAX请求，查询数据mounted(){// Axios无法直接使用原生的thisvar _this = this;axios({method: "get",url: "http://localhost:8080//brand-demo-ajax/selectAll"}).then(function (resp) {// 接收后台给到的数据，为JSON串，可自动反序列化为JavaScriptObjects_this.brands = resp.data;})}})</script></body></html> 上一页 1 2 3 4 5 6 下一页经验总结扩展阅读波斯菊种子怎么种玄风命理|春木见水用土金平衡也可成太极抖腿能瘦腿吗 5招教你快速瘦大腿煮好的银耳汤怎么保存好后台播放是什么梗剑与远征荒鸦边界主神试炼怎么打胡杨长在沙漠里吗? 愚汉只知逞强，智者方懂示弱。八字测算婚姻真的有用吗粑粑为什么是黑色的,狗狗拉的粑粑是黑色的这些原因你要知道哦 2023年10月7日上学好不好 2023年10月7日上学行吗 2023年1月5日是打水井吉日吗 2023年农历腊月十四宜打水井吗美容专家Q&A教你秋冬怎样保湿护肤汽车班次是什么意思什么是汽车班次中年女同学自留地刚生下三胞胎，就要与闪婚老公离婚，女子称“要是知道我的苦衷就不会怪我” 地球之眼在哪里,地平线地球之眼在哪怎么除胶,胶水用什么可以去除掉? 一位老人给自己定的手机使用家规，句句在理刘邦他靠一张嘴为刘邦拿下了70多座城池，最后却被煮成肉汤！ 12月份西藏一般多少度 12月份去西藏有什么建议 7.Vue常用属性连接房屋框架用的什么钉 Vue3的新特性 2022-11-4 VideoPipe可视化视频结构化框架新增功能详解 20_Vue如何监测数组类型数据发生改变的？我的Vue之旅 09 数据数据库表的存储与获取实现 Mysql + Golang 荣耀50值得买吗_荣耀50性价比高吗 19_Vue如何监测到对象类型数据发生改变的？分布式事务框架 Seata 入门案例 Rock18框架之整体框架介绍

Vue前端框架基础+Element的使用( 三 )

经验总结扩展阅读