vue.js-day07

v-if，v-else，v-else-if
实现逻辑判断控制
代码
html：

<div id="app">
    <div v-if="role == 'admin'">
        管理员你好
    </div>
    <div v-else-if="role == 'hr'">
        hr你好
    </div>
    <div v-else>
        您没有管理权限
    </div>
</div>
js：

var app = new Vue({
    el:"#app",
    data:{
        role:'admin',
    }
    
})
全局和局部组件
组件是vue中的基本单位，定义好的组件在应用上类似于一个标签，在html中使用即可，具体定义在js文件中，包括模板和方法。
定义一个全局组件
js:

// 定义一个全局组件 其中alert为自定义的组件名
Vue.component('alert',{
    // <!-- template模板 -->
    template:'<button @click="on_click">ttt</button>',
    // <!-- 方法 -->
    methods:{
        on_click:function(){
            alert("Yo,");
        }
    }
});
//设定其作用域为app中
new Vue({
    el:'#app'
});

html:

<div id="app">
    <alert>

    </alert>
</div>    

这种方式定义的全局组件在整个js文件中全部可见，相当于html中的window对象，但在实际用时，全局组件比较少用，一般定义局部组件。局部组件先可以将模板和方法封装在一个对象中，然后在vue对象中作为components键中的一个自定义组件名（作为内部键）的值引入。如下：
js：

//封装组件内容为一个对象
var alert_component={
    // <!-- template模板 -->
    template:'<button @click="on_click">ttt</button>',
    // <!-- 方法 -->
    methods:{
        on_click:function(){
            alert("Yo,");
        }
    }
}
// 设置一个域:自定义组件componet作用范围
//
new Vue({
    el:'#seg1',
    //在seg1域中定义一个alert局部组件。
    components:{
        alert:alert_component,
    }
});
组件构建
组件构建及填充组件的血肉，充实他的功能。我的理解是在Vue中，组件类似于一个对象，有属性也有方法，通过bind设置组件的属性，通过v-on设置他的对应事件的处理函数如点击，也就是方法。在组件中定义变量是通过data这样一个函数来实现的，在data函数内部return一个对象，对象中的键值对就是要定义的变量，在mothods中使用这些变量时需要加上this.前缀，因为这些变量时component对象的。同时我感觉Vue在后台有某些机制运行，实时监测在html中双引号{{}}中变量的改变并实时刷新，代码
js：

Vue.component('up',{
    //模板   
    //Vue中的某种机制在后台运行中一直监听like_count的变化并实时更新
    //:class="{liked:liked}"的作用是绑定一个类liked_style，
    //当变量liked为真时，此类起效，否则失效。
    template:"<button :class='{abcd:uped}' @click=toggle_up>顶({{up_count}})</button>",
    //感觉相当于变量定义，    //这里的data和vue的不一样，这里是一个function
    data:function(){
        return{
            up_count:10,
            uped:false,//这个变量在内部mothod中看不到，变量属于组件，所以应该在mothod中加this前缀
        };
    },
    methods:{
        toggle_up:function(){
            //如果没有顶过则加加，否则减减
            if(!this.uped)
                this.up_count++;
            else
                this.up_count--;
            //取反标志
            this.uped=!this.uped;
        }
    }
});
//组件作用域
new Vue({
    el:"#app",
})