Vue 学习笔记之入门

概述

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

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

Vue 学习笔记之入门_第1张图片
MVVM.png

Hello World



    
        
        Hello Vue
    
    
        
{{ 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 属性切换元素是否可见,适合频繁切换的情况,不支持