Vue.js

一般少用全局components

事件处理器

v-on

例1: 点击事件

按钮
按钮   

组件（component）

例1:

过滤器(filters)

例1:

  
{{message | toupper}}
 

计算属性(computed)

例1:

    

        
今年3月3日发卖的任天堂新一代主机Switch的价格是:{{price}}円.
            含税价格:{{priceInTax}}円.折合人民币{{priceChinaRMB}}元
    

    

监视属性(watch)

例1:

    

        
今年3月3日发卖的任天堂新一代主机Switch的价格是:{{price}}円.
            含税价格:{{priceInTax}}円.折合人民币{{priceChinaRMB}}元
            加价10000円
    

    

Class绑定

例:

    

    
变色1
    
变色1
    改变class

Class对象绑定

    
    

        
文本
        改变class
    
    

条件渲染

    
成绩未公布
    
{{result}}分 - 考试不及格
    
{{result}}分 - 还需努力
    
{{result}}分 - 考得不错，玩游戏吧！
    考试成绩

元素显示

    
任天堂新一代主机Switch
    点击消失

列表渲染

    

        
({{index}}) {{game.title}} / 售价：{{game.price}}元
    

对象的迭代

    
JS对象迭代
    

        {{ key }} : {{ value }}
    

事件处理器

    
事件处理器
    
    OK