最基础的Vue 请求渲染数据，包括下拉加载更多，换分类。首先声明一点我写这个只是个人业余写的只为自己练习技术，页面是抓的二十次幂这个站点 https://www.ershicimi.com/

  • 首先我之前没有学过Vue 只是了解一些html和js的知识，然后自己写了一些接口，想学一下啊用Vue实现下请求渲染数据.
  • 我只用了两天时间实现的以下效果，感觉还行，我都是按照自己想法写的，可能不正规。
  • 说一下我实现了那些功能：axios实现请求API接口，渲染数据，点击不同分类请求不同的API，向下滑动加载更多。
    在这里插入图片描述
我的Vue体验方法

一 官方文档

  • 我照着官方文档的快速开始教程 走了一遍，把vue的语法渲染语法走了一遍(绑定对象的时候我理解错了，踩了些坑)。
  • 然后又搜了一下Vue推荐用 axios 模块发送http请求(本来我准备用jQ ajax写的)，自己尝试写了下demo。

二 目录结构以及运行方式
在这里插入图片描述

article/        
	static/
		css/
		img/
		js/
		  main.js  <!-- 存放一些公共变量 至少我是这样做的 -->
	index.html    <!-- 入口首页文件 -->
	author.html   <!-- 作者详细页文件 -->
	news.html    <!-- 详细页文件 -->

运行方式：可以在本地搭建apache服务器或者其他http服务器就行，把html文件都一起丢到根目录。 （ps：如果用vue-cli的方式，就自带Node.js的http服务器）

我的做法: 我是用的xampp 这个集成环境 中的apache来搭建的，具体步骤自己搜索，很简单的，安装一般都会报一个端口 被占用的错误，导致不能启动。

三 动手写代码

  • 写代码之前 vue的基础知识必须得知道
  • v-for :href :src 等等
  • 然后就是 vue的绑定 还有函数的写法，然后就是mounted 挂载
new Vue(
        {
            el: "#wrapper",   // 这是要绑定的id 可以绑定最外层的div的id
            data: {
            	infos: [],   // 主要列表信息  
            },
            methods:{
               // 主要函数方法
            },
            mounted(){
            // 挂载  就是一打开这个页面就执行这里面的函数, 有点像构造方法的意思 __init__ 
            // 注意要用this 这个关键字调用
            },
         },
     );

index.html  // 入口文件

// 首先引入 我刚开始体验vue 不会vue-cli的方式使用，但是最终一般都用vue-cli
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
// 感觉代码有点多 后面补充完整 代码也会贴出来
<body>
..
<div id="wrapper"">   //其实可以绑定在body里面  走一下vue教程就知道
<ul class="news-list">
	<li v-for="(info,index) in infos" :key="index">
	    <div class="img-box">
	    <a :href='"./news.html?uuid=" + info.md5_url' target="_blank"> // 注意这里的info.md5_url 用{{ }} 这种方式会报错，可能是"的原因， 所以我用了这种字符串拼接的方式
	    <img :src="info.cover"></a>
	    </div>
	    <div class="txt-box">
	    <h3>
	    <a :href='"./news.html?uuid=" + info.md5_url'>{{ info.title }</a>
	    </h3>
	    <p class="txt-info" target="_blank">{{ info.digest }}</p>
	    <div class="s-p">
	    <a :href='"./author.html?author_id=" + info.author_id' class="account">{{ info.author }}</a>
	    <span class="s2">{{ info.published_at }}</span>
	     </div>
	     </div>
     </li>                  `
     </ul>
</div>
...
</body>

<script>
	// var host_name = "http://127.0.0.1";   //后面我是把这个变量 放到了main.js 每个文件都需要用
    var current_cate = "0";   // 当前默认分类
    var current_page = 1;     // 当前默认页
    new Vue(
        {
            el: "#wrapper",
            data: {
                current: 0,  // 当前页码
                infos: [],   // 主要列表信息
            },
            methods: {
                loadInfoList: function (page, cate) {
                    var _this = this;   // 这里我有个疑惑， 我感觉每个函数里面都得有一个这样的变量才行 不能都直接用this  
                    // 20119/03 我看到阮一峰 关于闭包的解释 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
                    axios.get(hots_name + "/api/v1/article/get/list", {
                        params: {
                            page: page,
                            size: 10,
                            cate: cate,
                        }
                    })
                        .then(function (response) {
                            if(page>1){
                                // 如果不是首页 数据 依次添加在后面
                                for (var i = 0; i < response.data.data.length; i++) {
                                    var info = response.data.data[i];
                                    _this.infos.push(info)
                                }
                            }else {
                               // 是首页数据 就直接渲染
                                _this.infos = response.data.data;
                            }
                        })
                        .catch(function (error) {
                           // 请求发送失败
                            console.log(error);
                        });
                }, 
                addClass: function (index) {            // 点击分类操作
                    this.current = index;    // 点击添加 active 
                    current_cate = index;    // 当前是那个分类
                    current_page = 1;        // 每次点击分类 初始化当前页
                    // 点击加载新分类
                    this.loadInfoList(current_page, index)
                },
                loadMore: function () {
                    var _this = this;
                    // 监听鼠标事件加载更多 这一步是我当时 搜出来的
                    window.addEventListener('scroll', function () {
                        //变量scrollTop是滚动条滚动时，距离顶部的距离
                        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                        //变量windowHeight是可视区的高度
                        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                        //变量scrollHeight是滚动条的总高度
                        var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                        //滚动条到底部的条件 +1 的原因是因为我看过触发这个条件 有时候差1，反正总感觉我这个不完善。
                        if (scrollTop + windowHeight + 1 >= scrollHeight) {
//                            console.log("到底了")
                            current_page += 1;
                            _this.loadInfoList(current_page, current_cate)
                        }
                    })
                },
            },
            mounted() {
                // 初始化方法 加载首页数据 分类 和列表
                this.loadMore();  // 监听加载更多
                this.loadInfoList(current_page, current_cate);  
            }
        },
    );
</script>
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue