Vue.js的初步使用

Vue.js的初步使用

领导布置了一个新任务，这次尝试着前端使用bootstrap+vue.js后端用thinkphp5进行开发。
页面的样式布局直接使用的模板之家下载的bootstrap模板，因为没啥美感，还是直接下载使用来的快。
接下来是正式部分vue的使用：
在html头文件部分在线引入vue.js <script src="https://unpkg.com/vue/dist/vue.js"></script>或者将vue.js下载后本地引入[vue开发版](http://vuejs.org/js/vue.js) [vue最小版](http://vuejs.org/js/vue.min.js)

直接下载并用 script 标签引入，Vue 会被注册为一个全局变量。重要提示：在开发时请用开发版本，遇到常见错误它会给出友好的警告。
开发环境不要用最小压缩版，不然就失去了错误提示和警告!

然后在创建一个vue应用登陆页面 HTML 代码如下：

<div class="app-cam" id="lgapp">
      <form>
          <input hidden v-model="rmpwd" id="rmpwd">
          <input type="text" v-model="user.account" class="text" placeholder="请输入用户名">
          <input type="password" v-model="user.pwd" placeholder="请输入密码">
          <div class="switch" data-on="success" data-off="warning" style="float: right;margin-bottom: 1em">
              <span>记住密码</span>
              <input type="checkbox" name="my-checkbox" data-on-color="success" data-off-color="warning" v-bind:checked="rmpwd|getstatus"/>
          </div>
          <div class="submit"><input v-on:click="login" type="button"  value="登陆"></div>
        <ul class="new">
            <li class="new_left"><p><a href="#" v-on:click="fprgotpwd">忘记密码?</a></p></li>
            <li class="new_right"><p class="sign">新用户?<a href="#" v-on:click="regit">注册</a></p></li>
            <div class="clearfix"></div>
        </ul>
    </form>
  </div>

js代码

new Vue({
    el:'#lgapp',
    data:{
        user:{
            account:getCookie("cache_account"),
            pwd:getCookie("cache_pwd"),
        },
        rmpwd:getCookie("cache_pwd_checked"),
    },
    methods:{
        login:function () {
            var user=this.user,rd_remember=this.rmpwd;
            $.ajax({
                url:loginURL,
                type: 'post',
                dataType:'json',
                data: {
                    'user': user,
                },
                success: function(result){
                    if(result.status==1){
                        setCookie("cache_account",user.account,30);//记住账号

                        //记住密码
                        if(rd_remember=='true'){
                            setCookie("cache_pwd",user.pwd,30);
                            setCookie("cache_pwd_checked",true,30);//勾选状态
                        }
                        else{
                            setCookie("cache_pwd","",30);
                            setCookie("cache_pwd_checked",false,30);//勾选状态
                        }
                        window.location.href=result.url;
                    }
                    else {
                        $.alert({
                            title: '课程签到系统',
                            type: 'red',
                            content: result.msg,
                        });
                    }
                }
            })
        },
        fprgotpwd:function(){
            $.alert({
                title: '课程签到系统',
                type: 'red',
                content: '请联系管理员重置密码！',
            });
        },
        regit:function(){
            $.alert({
                title: '课程签到系统',
                type: 'red',
                content: '请向管理员申请账号！',
            });
        }
    },
    filters:{
        getstatus:function (rmp) {
            if(rmp=='true'){
                return true;
            }
            else{
                return false;
            }
        },
    }
    }）

filter过滤器 getstatus用于判断当前密码记住状态 rmpwd为cookie中获取记录

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

setCookie为设置cookie

function setCookie(c_name,value,expiredays)
{
    var exdate=new Date()
    exdate.setDate(exdate.getDate()+expiredays)
    document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

delCookie删除cookie

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

需要注意的是

<input hidden v-model="rmpwd" id="rmpwd">

rmpwd为hidden属性,所以要实时响应其值得改变时需要

$("#rmpwd").val(state).show().focus().blur().hide();

改变其值->显示->获取焦点->失去焦点->再隐藏