Vue.js入门 0x0 Hello World！

目录

MVVM模式

 模式拆分

Vue.js的开发模式

HelloWorld

 Vue生命周期

 插值与表达式

 过滤器

 指令与事件

     v-if

    v-bind

    v-on

语法糖

---

MVVM模式

    Vue.j s 在设计上使用 MVVM (Model-View-View Model) 模式。MVVM 模式是由经典的软件架构 MVC 衍生来的 。当 View （视图层）变化时，会自动更新到ViewModel （视图模型），反之亦然。 View 和 ViewModel 之间通过双向绑定（tdata-binding）建立联系。

 模式拆分

//JQuery
if(showBtn){
    var btn = $('Click me');
    btn.on('click',function(){
        console.log('Clicked!');
    });
    $('#app').append(btn);
}

    Vue.js 通过 MVVM 的模式拆分为视图与数据两部分，并将其分离。

    

        Click me
    

Vue.js的开发模式

 

    
        
        
    
    
        

            

                
{{book.name}}
            
        
        
        
    

HelloWorld

    
        
        
    
    
        

            
            
            
Hello,{{name}}
        
        
        
    

 Vue生命周期

    created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。需要初始化处理一些数据时会比较有用，后面章节将有介绍．
    mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始 。
    beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

var app = new Vue({
    el:'#app',
    data:{
        a:2
    },
    created:function(){
        console.log(this.a);//2
    },
    mounted:function(){
        console.log(this.$el);//

    }
  })

 插值与表达式

    使用双大括号（ Mustache 语法）“{{}}”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

    
        
        
    
    
        

            {{date}}
        
        
        
    

     在{{}}中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、三元运算等

{{isOK ?'确定':'取消'}}

 过滤器

     Vue. 支持在{{}}插值的尾部添加一小管道符 “|”对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

 

    
        
        
    
    
        

            {{ date | formatDate }}
        
        
        
    

     过滤器也可以串联，而且可以接收参数

{{message|filterA|filterB}}

{{message|filterA('arg1','arg2')}}

 指令与事件

    指令(Directives)是Vue.js模板中最常用的一项功能，它带有前缀v-，如 v-if、v-html、v-pre等。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上。

     v-if

    
显示这段文本

    v-bind

    链接
    

    v-on

    
这是一段文本
    点击隐藏

语法糖

    语法糖是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发。Vue.js的 v-bind 和 v-on 指令都提供了语法糖,也可以说是缩写,比如 v-bind,可以省略v-bind,直接写一个冒号 “ ：”