vue快速上手

vue是一个基于响应式编程思想、模块化设计实现的js框架，可以大大简化开发，是前端开发的首选框架。

1、基础语法

下面这个demo演示了vue的基本使用：

  


    
    
{{ test_message }}
    
    


    
    

      

        {{ user.name }}, {{ user.age }} years old.
      
      

          {{ i }}: {{ user.name }}, {{ user.age }} years old.
      
    

    
    
{{ test_func() }}

    
    
1 + 2 = {{ 1 + 2 }}
    
{{ test_bool ? "YES" : "NO" }}

    
    
see me if test_bool is true
    
see me if test_bool is false

    
    
a h1 with id xxx-{{ test_bind_id }}
    a baidu link

    
    
a h1 with id xxx-{{ test_bind_id }}
    a baidu link


    
    a button

    a button{{ test_click_count }}

    
    a once click button

    

    
    a button


    
    {{ test_input_value }}

    
    A
    B
    C
    {{ test_options }}

    
    
      choose
      A
      B
    
    {{ test_select }}



    
    
test style
    
test class

    
    
a div with id id-{{ test_bool | test_filter_bool }}
    
{{ test_message }} -> {{ test_message | test_filter_upcase }}

    
    {{ test_money_yuan }}¥


  

  
  
  

2、模块化

a、注册组件

b、模块间传值(父 --> 子)，变量绑定及声明

props后面的参数也可以以map的形式提供，以实现参数限定，例如：

props: { 
  varA: Number,
  varB: [String, Number],
  varC: {
    type: Number, 
    required: true,
    default: 1
  },
  varD: {
    validator: function (value) {
      return value > 10
    }
  }
}

c、模块间传值(子 --> 父)，事件监听

    
{{ count }}
    
    

  

3、路由（router）

路由是vue的一个页面切换组件，基本使用如下：

  

      
      a-path
      b-path
      


      
      a-name
      b-name
      


      
      a-param
      b-param
      


      
      a-tag
      b-tag