Vue 学习笔记之入门

概述

Vue.js 是一个 MVVM 的前端框架，相对于 Angular 和 React 来说更加的简洁，更加的轻量。

Vue 是数据驱动的，通过虚拟 DOM 进行操作，无需关心实际的 DOM 对象，Vue 实现了双向数据绑定，DOM Listeners 监听到 DOM 元素的变化会立即体现在数据 Model 上，数据 Model 的变更也会通过 Data Bindings 立即体现在 DOM 元素之上。

MVVM.png

Hello World

    
        
        
    
    
        

            {{ message }}
        
    
    
    

重要选项

data

定义需要绑定的数据对象，可以理解成Java中的成员变量

methods

自定义方法，可以理解成Java中的成员方法

computed

计算属性，将模板中的逻辑回收到js中进行处理的自定义方法，与methods中的方法不同，计算属性是基于它的依赖缓存，只有在依赖变更时才会重新取值。

filters

过滤器，过滤器方法用于添加在数据对象的尾部，使用管道符分隔，如：{{ message | capitalize }}。

watch

监听数据变化，执行特定方法

模板指令

数据渲染

• {{ }}

  Message: {{ msg }}
  

  “Mustache” 语法，绑定的数据变更，页面内容刷新，支持表达式，不支持语句。

• v-text

  同 “Mustache” 语法，HTML会被转义，当成字符串原样输出

• v-html

  HTML会被渲染

• v-once

  This will never change: {{ msg }}
  

  一次性插值，当数据改变时，页面不更新

属性绑定

• v-bind:属性名="值"

• :属性名="值"

  v-bind的简写形式

控制模板显示隐藏

• v-if v-else-if v-else

  
    A
  
  
    B
  
  
    C
  
  
    Not A/B/C
  
  

• v-show

  Hello!
  

  通过元素的 display 属性切换元素是否可见，适合频繁切换的情况，不支持