初识vuejs

一个不懂前端的php不是一个好民工。

这几年一直以为在php程序猿中我js(jquery)是不错的。写交互、特效都可以搞定。这就面临一个问题，技术评级时候我该按前端去评还是后端去评。好啦。闲话不多说了。

为什么要选择vue去学习，返回json数据然后去循环就可以了，不需要像jquery那样在js中去拼接html。当然如果你想兼容ie8以下的浏览器，jquery还是很好的选择。

	<header class="header">
            <span class="pt15"><img class="logo" src="<?php echo Yii::app()->request->baseUrl . IMGAGES_URL ?>/mobile/logo.png"></span>
            <span class="changearea">
                <a href="<?php echo $this->createUrl('mobileactivity/city'); ?>" class="city">{{ city.name }}</a>
            </span>
            <span class=""><img class="citylogo" v-bind:src='city.logo'></span>
        </header>
        <div class="listimgtext">
            <ul class="ulimgtext" id='ulimgtext' >
                <li class="liimgtext" v-for="item in list.list">
                    <div class="left wb30"><a class="listimg" href="/index.php?r=mobileactivity/detail&id={{item.id}}"><img v-bind:src="item.image"></a></div>
                    <div class="right wb60">
                        <p><a class="listtitle" href="/index.php?r=mobileactivity/detail&id={{item.id}}">{{item.title}}</a></p>
                        <span class="listdate">活动时间：{{item.starttime}} ~ {{item.endtime}}</span>
                        <p class="listdate">地点：{{item.city}}</p>
                    </div>
                    <div class="clear"></div>
                </li>
            </ul>

        </div>
        <input type="hidden" class="liimgtextval" value="{{list.count}}">
        <input type="hidden" class="citydata" id="citydata" value="{{ city.id }}" dataid="{{ city.id }}" dataname="{{ city.name }}">

html部分，这里重点说下<img>部分，直接src={{city.logo}}在谷歌浏览器console中是报错的，需要绑定 v-bind:src='city.logo'这样才好
再说下li标签，看到v-for了吗，就是在这里循环的，熟悉smarty，或者thinkphp的小伙伴们看着语法是不是很熟悉

var pageData = {
    i: 1,
    height: 0,
    over: false
}

//if (!city) {
var vm = new Vue({
    el: 'html',
    data: {
        city: {
            id: '',
            name: '',
            logo: ''
        },
        list: {
            list: {},
            count: ''
        }
    },
    
    // 页面加载的时候会自动执行ready
    ready: function () {
        var city_id = getQueryString('city');
        if (!city_id) {

		//获取当前城市
            	this.$http.get(cityListUrl).then(function (response) {
                for (item in response.data.positioning) {
                    this.city.id = item;
                    this.city.name = response.data.positioning[item];
                }

		//获取当前城市的logo
                this.$http.get(currenCity + this.city.id).then(function (response) {
                    this.city.logo = response.data.info.image;
                })
                var page = getQueryString('page');
                var page = page ? page : 0;
                this.$http.get(listUrl + "&city=" + this.city.id + "&page=" + pageData.i).then(function (response) {
                    this.list.list = response.data.info.data;
                    this.list.count = response.data.info.count;
                })
                var stop = true;
                var p = 0, t = 0;
                window.onscroll = function () {
                    p = getScrollTop();
                    if (t <= p) {//下滚  
                        hideFooter();
                        if (getScrollHeight() - (getScrollTop() + getClientHeight()) <= 10) {
                            if (stop == true) {
                                stop = false;
                                if (pageData.over) {
                                    return false;
                                }
                                //
                                stop = true;
                                //load();
                                addLoading('ulimgtext');
                                pageData.i++;
                                vm.$http.get(listUrl + "&city=" + vm.city.id + "&page=" + pageData.i).then(function (response) {
                                    removeLoading();
                                    if (response.data.info.data.length == 0) {
                                        pageData.over = true;
                                        //loadingToOver();
                                    } else {
                                        vm.list.list = vm.list.list.concat(response.data.info.data);
                                    }
                                })
                                //
                            }
                        }
                    } else {
                        //$(".ulimgtext").css("padding-bottom","60px");
                        showFooter();
                    }
                    setTimeout(function () {
                        t = p;
                    }, 0);
                };
            })
        } else {
            //return false;
            //var city = getQueryString('city');
            var city_id = city_id ? city_id : 999999;
            if (city_id == 0) {
                this.city.name = "全国";
            }
            this.$http.get(currenCity + city_id).then(function (response) {
                this.city.logo = response.data.info.image;
                this.city.name = response.data.info.name;
            })
//根据city获取城市名称和图标。暂时缺接口
            var page = getQueryString('page');
            var page = page ? page : 0;
            this.$http.get(listUrl + "&city=" + city_id + "&page=" + pageData.i).then(function (response) {
                    this.list.list = response.data.info.data;
                    this.list.count = response.data.info.count;
                })


            var stop = true;
            var p = 0, t = 0;
            window.onscroll = function () {
                    p = getScrollTop();
                    if (t <= p) {//下滚  
                        hideFooter();
                        if (getScrollHeight() - (getScrollTop() + getClientHeight()) <= 10) {
                            if (stop == true) {
                                stop = false;
                                if (pageData.over) {
                                    return false;
                                }
                                //
                                stop = true;
                                //load();
                                addLoading('ulimgtext');
                                pageData.i++;
                                vm.$http.get(listUrl + "&city=" + city_id + "&page=" + pageData.i).then(function (response) {
                                    removeLoading();
                                    if (response.data.info.data.length == 0) {
                                        pageData.over = true;
                                        //loadingToOver();
                                    } else {
                                        vm.list.list = vm.list.list.concat(response.data.info.data);
                                    }
                                })
                                //
                            }
                        }
                    } else {
                        //$(".ulimgtext").css("padding-bottom","60px");
                        showFooter();
                    }
                    setTimeout(function () {
                        t = p;
                    }, 0);
                };
        }
    }
});

el为作用域，我是在整个页面中，所以写的html,data里面的属性要注意一下，比如city中的logo，我开始写的logo:{},图片可以显示，但是在console中报错，logo就是图片地址不是对象，所以算是字符串，后改成logo:''错误消失。this.list.list = response.data.info.data;this.list.count = response.data.info.count;即为data中的list赋值，并且直接可在html中显示。

小弟也刚刚学习，希望大佬们多多指点