VUE学习之页面渲染数据
闲来无事来学习学习vue,web前端还是该好好学习学习
vue官方手册 : https://cn.vuejs.org/v2/guide/installation.html
非常棒的vue资源精选: http://vue.awesometiny.com/
整整一天时间没了,等会儿整理整理基础吧,百度整理的毕竟是人家的不在乎你看不看得懂,还是自己整理下看得懂就可以,后面要用到了基础语法什么的,再来看看,康庄大道
,直接上代码,我的vue纪录篇
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue.js</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <table style="text-align: center;border: solid 1px yellow" > <tr> <th>id</th> <th>类型</th> <th>昵称</th> <th>数量</th> <th>操作</th> </tr> <tr v-for="(vo,key) in lists"> <!--第六步--> <td>{{ vo.id }}</td> <td>{{ vo.type }}</td> <td>{{ vo.nickname }}</td> <td>{{ vo.num }}</td> <td> <button type="button" @click = "btn(vo)">删除</button> </td> </tr> </table> </div> <script> var app = new Vue({ el: '#app', //执行顺序:第一步 // data: { // lists: '' //第五步 // }, data:function () { return { lists: '', url:'' } }, mounted:function () { //打开页面就自动执行这个钩子函数 this.$nextTick(function () { this.greet() //第二步 }); }, // 在 `methods` 对象中定义方法 //yisi methods: { greet: function () { //第三步 let _this = this; $.get('http://192.168.4.109:8888/home/user/lucky_news').then(function(res){ _this.$set(_this,'lists',res.data); //把获取到的数据放入lists里面 // 第四步 },function(res){ console.log(res.code); }); }, btn:function(even){ alert(even.id) } } }); </script> </body> </html>
这串代码是我们比较常用的表格数据渲染,包括执行步骤,简单demo有误的地方还请指教,大恩不言谢
resource正确引入为什么这样写不行,有没有大佬指教
- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
- 本文网址:https://www.liaotaoo.cn/169.html
- 上篇文章:从零开始搭建vue-cli脚手架_超详细步骤
- 下篇文章:thinkphp5实现长轮询api接口