vue的渲染实例

  • 时间:2017-07-10
  • 浏览量:
  • 分类:[ Vue]
  • 作者:池剑锋

使用vue来与后台进行数据交互非常的方便,在这里我用json模拟了后台返回的数据然后使用vue来进行渲染。

知识点:

v-cloak:防止页面加载时出现 vuejs 的变量名 渲染完之后自动去掉(不要忘记加样式)

v-for:列表渲染

ajax:封装了get和post的方法。



css代码

 * {
            padding: 0;
            margin: 0;
        }

        ul {
            width: 690px;
            float: left;
            font-size: 12px;
            color: #838383;
            list-style: none;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        [v-cloak] {
            display: none;
        }

        li {
            list-style: none;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #F6F6F6;
            box-shadow: 1px 3px 9px #ccc;
            border-radius: 4px;
            overflow: hidden;
        }

        h2 {
            font-size: 15px;
            color: #312424;
            font-weight: bold;
        }

        .dateview {
            padding: 8px 0px 8px 18px;
            margin-top: 4px;
            font-size: 12px;
        }

        .dateview span {
            margin-right: 20px;
        }

        .es_img {
            width: 183px;
            float: left;
            overflow: hidden;
        }

        .es_img a {
            display: block;
        }

        .es_img img {
            width: 100%;
        }

        .es {
            float: left;
            width: 475px;
            margin: 10px 0px 0 10px;
            line-height: 20px;
        }

        .es a {
            background: #fd8a61;
            color: #fff;
            padding: 5px 10px;
            float: right;
            margin: 20px 0 0 0;
            border-radius: 3px;
        }



html代码

 <ul id="list-vm" v-cloak>
        <li v-for="item in test">
            <h2>{{item.title}}</h2>
            <p class="dateview">
                <span>{{item.time}}</span>
                <span>作者:{{item.name}}</span>
                <span>分类:[<a href="###">{{item.type}}</a>]</span>
            </p>
            <div class="es_img">
                <a v-bind:href='item.url==""?"javascript:":item.url'>
                    <img v-bind:src="item.img">
                </a>
            </div>
            <div class="es">
                <p>{{item.cont_describe}}</p>
                <a href="###" target="_blank">阅读全文</a>
            </div>
        </li>
    </ul>


javascript代码

 <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
        var config = {
            url: '', //若是线上服务器上这个作为域名

        }
        //get封装 分别是地址、要传的参数、成功、失败
        var get = function (site, data, successfun, errorfun) {
            var temp_errorfun = function (xhr, type) {
                console.log('Ajax error!');
                console.log(xhr);
                console.log(type);
            };
            if (errorfun) {
                temp_errorfun = errorfun;
            }
            $.ajax({
                type: 'GET',
                url: config.url + site + ".json",
                data: data,
                dataType: 'json',
                timeout: 5000,
                success: successfun,
                error: temp_errorfun
            });
        };
        // post封装
        var post = function (site, data, successfun, errorfun) {
            var temp_errorfun = function (xhr, type) {
                console.log('Ajax error!');
                console.log(xhr);
                console.log(type);

            };
            if (errorfun) {
                temp_errorfun = errorfun;
            }
            $.ajax({
                type: 'POST',
                url: config.url + site + ".json",
                data: data,
                dataType: 'json',
                timeout: 5000,
                success: successfun,
                error: temp_errorfun
            });
        };

        var list_vm = new Vue({
            el: '#list-vm',
            data: {
                test: []
            },
            methods: {

            }
        });

        get('test', {}, function (data) {
            if (data.code == '0') {
                list_vm.test = data.data;
            } else {
                alert("获取失败")
            }
        }, function () {
            alert("网络错误")
        });
    </script>



json(和html同级)

 {
    "data": [
        {
            "url": "",
            "title": "kali linux 安装nodejs",
            "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg",
            "name": "夕雨夕雾",
            "time": "2016-06-16 18:36:10",
            "type": "linux",
            "cont_describe": "kali linux 安装nodejs,kali是一个基于Debian的Linux发行版, 设计用于数字取证和渗透测试。"
        },
        {
            "url": "http://www.chijianfeng.com/",
            "title": "gulp笔记--编译less",
            "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg",
            "name": "夕雨夕雾",
            "time": "2016-06-03 17:50:48",
            "type": "gulp",
            "cont_describe": "Less 是一门 CSS 预处理语言,它对 CSS 增加了诸如变量、混合"
        },
        {
            "url": "",
            "title": "gulp笔记--安装",
            "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg",
            "name": "夕雨夕雾",
            "time": "2016-05-31 20:01:53",
            "type": "gulp",
            "cont_describe": "gulp 在windows 环境下的安装"
        },
        {
            "url": "http://www.chijianfeng.com/",
            "title": "avalon2实例--获取选中文字",
            "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg",
            "name": "夕雨夕雾",
            "time": "2016-05-31 19:17:09",
            "type": "avalonJs",
            "cont_describe": "avalon获取选中文字,兼容到ie9"
        },
        {
            "url": "",
            "title": " CSS3 笔记(三)",
            "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg",
            "name": "夕雨夕雾",
            "time": "2016-05-16 12:39:52",
            "type": "css",
            "cont_describe": "css3 的变形、过渡、动画的基本属性及其用法"
        },
        {
            "url": "",
            "title": "CSS3笔记(二)",
            "img": "http://www.chijianfeng.com/uploads/allimg/160926/1-1609260222350-L.jpg",
            "name": "夕雨夕雾",
            "time": "2016-05-16 13:10:32",
            "type": "css",
            "cont_describe": "css3中的文字效果,例如阴影、颜色填充、自动换行、文字描边、文字裁剪等"
        }
    ],
    "code": 0,
    "msg": "操作成功"
}


实现之后的效果

        blob.png

需要注意的是 测试的时候要放在本地或者线服务器进行测试。

上一篇:使用vue实现tab切换例子
下一篇:vue购物车实例
分享给好友