VUE学习之页面渲染数据

现在位置：首页 > 编程语言 > web前端 > VUE学习之页面渲染数据

VUE学习之页面渲染数据

龙行 web前端 2019-2-20 1281 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有误的地方还请指教,大恩不言谢