Vue.js学习笔记

Vue.js学习笔记

v-bind

绑定属性，代码：

• v-bind:href
• v-bind:src
• v-bind:class

var app3 = new Vue({
    el: '#app3',
    data: {
        target_location: 'https://baidu.com',
        target_name: '百度一下',
        img_location: '../img/bing-0615.jpeg',
        isActive: true
    }
});

    
    
    
    
    




    跳转到 {{target_name}}

    Click me!
    图片：
    

v-on

绑定动作：代码

• v-on.prevent

var app4 = new Vue({
    el: '#app4',
    data: {},
    methods: {
        onEnter: function () {
            console.log("mouse enter");
        },
        onLeave: function () {
            console.log("mouse leave");
        },
        onSubmit: function () {
            console.log("已经提交！");
        }
    }
});

    
    
    
    





    

        
        
        提交
    

    测试按钮

v-model

绑定数据：

• v-model.trim
• v-model.number
• v-model.lazy
• input
• select
• textarea

var app5 = new Vue({
    el: '#app5',
    data: {
        name: 'wang',
        price: 22,
        sex: 'M',
        hobby: [],
        from:1
    }
});

    
    
    
    




    

    
{{name}}
    {{name}}

    

    {{price}}

    男
    
    女
    \
    {{sex}}

    男
    
    女
    \
    {{hobby}}

    


    

    
        第一
        第二
    
    {{from}}

》》》Vue.js表单输入绑定

流程控制和计算属性

• v-if
• v-else-if
• v-else
• computed

var app7 = new Vue({
    el: '#app7',
    data: {
        role: 'hr-min',
        math: 90,
        Chinese: 100,
        English: 80,
    },
    computed: {
        sum: function () {
            return this.math + this.Chinese + this.English;
        },
        average: function () {
            return Math.round(this.sum / 3);
        }
    }
});

    
    
    
    




    

        管理员你好！
    
    

        人事你好！
    
    

        当前角色没有访问权限！
    

    


    

        

        

            
学科
            
成绩
        
        
        

        

            
数学
            

        
        

            
语文
            

        
        

            
英语
            

        
        

            
总分
            
{{sum}}
        
        

            
平均分
            
{{average}}