龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > VUE学习之页面渲染数据

VUE学习之页面渲染数据

龙行    web前端    2019-2-20    369    0评论    本文已被百度收录点击查看详情

闲来无事来学习学习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有误的地方还请指教,大恩不言谢

vue

resource正确引入为什么这样写不行,有没有大佬指教

评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/169.html
  • 上篇文章:从零开始搭建vue-cli脚手架_超详细步骤
  • 下篇文章:thinkphp5实现长轮询api接口
  • js jquery vuw
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部