Vue初认知

对比laravel和Vue，都是为开发项目简单方便.laravel主要是为后台开发降低难度,提升效率.但是并不能实现前后端分离,导致项目大了,后端工程师很苦恼.一边实现API接口，一边开发页面，两者互相切换着做，而且根据不同的url动态拼接页面，这也导致后台的开发压力大大增加。前后端工作分配不均。不仅仅开发效率慢，而且代码难以维护。Vue框架就可以解决前后端分离实现并向开发,不仅提高了效率还提高了质量.

Vue小试牛刀

在这种背景下决定了解下Vue框架是啥玩意

1.安装Vue

博主是直接引用vue.js的

2.关于双向关联

3.事件绑定方法

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
        created(/*传参*/){
}

mounted:{在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
        mounted(){
                document.getElementById('AddSport').addEventListener('click',function(){
                    var sport = document.getElementById('sport');
                    if(sport.value){
                        app.sports.push(sport.value);
                        sport.value = '';
                    }
                });
            }

4.methods:{}方法 直接内部this 调用

methods:{
                        AddSport(){
                            if(this.sport){
                                this.sports.push(this.sport);
                                this.sport='';
                            }
                        }
                    },
    v-on:keyUp == @keyUp="AddSport"

5.属性绑定事件

title 绑定 v-bind:title ="title"  data{title:"title value"}
class 绑定 :class ={ active:isactive}  data{isactive:true} true控制启动

<!--nextpage-->

<!--nextpage-->
多class 绑定 :class="[class1,class2]"
data:{
    class1:"abcd"
    class2:"efgh" 命名
}

6.属性计算

computed:{
    myName(){
        return this.firstName+this.fullName+this.lastName;
    }
}
<p>my name is {{myName}}</p>

/* 减少在模板中的逻辑运算;可在模板中使用该函数所得到的值;捆绑关联
*  如果你不希望有缓存，请用方法来替代。
*/

methods:{
    myName(){
        return this.firstName+this.fullName+this.lastName;
    }
}
<p>my name is {{myName()}}</p>

未完待续。。。。