基础篇

在这篇文章，你将快速学习到：

• 如何安装 Vue.js

• 基础

  • Hello World

  • Vue 实例

  • 模版语法 & 数据绑定

  • 计算属性 & 监听器

  • 事件处理

  • 表单

• 标准安装

  • 开发版本

  • 生产版本

• npm install vue

• CLI

  • npm install --global vue-cli

  • vue init webpack my-project

  • cd my-project

  • npm install

  • npm run dev

• 导入 vue.js

• 创建 index.html

• 创建 Vue 实例

   
   
   
   
   
       {{ message }}   
   

• 构造函数

• 属性和方法

• 实例生命周期

  • created

  • beforeMounted

  • mounted

  • updated

  • destroyed

    
    
    
    
    
        Vue Instance        

            
constructor
            
properties & methods
            
instance lifecycle hooks
        
    
    

• 文本: {{ msg }}

• 原始 HTML:

• 属性: shorthand

• 表达式: {{ number + 1 }} only contain one single expression

• 过滤器: {{ message | capitalize }}

• 指令: Now you see me

• 指令修饰符: stop modifiers

• Class 绑定: class

• Style 绑定:

• 条件渲染: v-if, v-else, v-show

• 列表渲染: v-for

    
    
    
    
    
        Text: {{ text }}
        Raw Html: 
        Attributes: {{ attributeTitle }}
        expressions: {{ exp + 1}}
        Filters: {{ 'toUpperFilter' | toUpperFilter}}
        Directives: v-if directive
        Modifiers: stop modifiers
        Conditional: v-if directive
        List: {{ n }}
    
    

TODO

• 事件监听

• 事件处理方法

• 事件修饰符

  • .stop

  • .prevent

  • .capture

  • .self

• 关键修饰符

  • .enter

  • .tab

  • .delete

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

  • Vue.config.keyCodes.f1 = 112

    
    
    
    
    
        listening: Add {{ counter }}
        method event handlers: Greet
        event modifiers: .prevent
        key modifiers: 
    
    

• text

• checkbox

• radio

• select

• value 绑定

• 修饰符

    
    
    
    
    
        Text:        
        Message is {{ message }}
        Checkbox: 
        
        {{ checked }}
        Radio:        
        
        Picked: {{ picked }}
        Select: 
        
            A
            B
            C
        Selectd: {{ selected }}
    
    

• 组件

• 自定义指令

• 过滤器

• 混入

• 路由

• 插件

〖坚强的一俢〗