Vue(2.x)之hello world

    
    
    
    



hello vue.js

    {{message}}

image.png

控制台打印结果：（PS：注意拼写错误）

image.png

生命周期图：（很形象）

image.png

Vue.js 允许自定义过滤器：

hello vue.js

    {{message|capitalize}}

  var app = new Vue({
        el:'#app',
        data:{
            message:'abcdefg'
        },
        filters:{
            capitalize:function (value) {
                if (!value){
                    return ''
                }else {
                    value = value.toString();
                    return value.charAt(0).toUpperCase()+value.slice(1);
                }
            }
        }
    })

image.png

缩写：
v-bind

v-on

计算属性：

    
old:{{message}}
    
computed:{{reversedMessage}}

  var vm = new Vue({
        el:'#eg',
        data:{
            message:'hello'
        },
        computed:{
            reversedMessage:function () {
                return this.message.split('').reverse().join('')
            }
        }
    })

image.png

附原文作者介绍文章：Vue介绍