Vue 学习笔记之入门

概述

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

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

MVVM.png

Hello World

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Vue</title>
    </head>
    <body>
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app', // 选定监听的View
            data: {
                'message': 'Hello World!'
            } // 绑定数据
        })
    </script>
</html>

重要选项

data

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

methods

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

computed

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

filters

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

watch

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

模板指令

数据渲染

{{ }}
```
<span>Message: {{ msg }}</span>
```
“Mustache” 语法，绑定的数据变更，页面内容刷新，支持表达式，不支持语句。
v-text
```
<div v-text="msg"></div>
```
同 “Mustache” 语法，HTML会被转义，当成字符串原样输出
v-html
```
<div v-html="rawHtml"></div>
```
HTML会被渲染
v-once
```
<span v-once>This will never change: {{ msg }}</span>
```
一次性插值，当数据改变时，页面不更新

属性绑定

v-bind:属性名="值"

<div v-bind:class="{ active: isActive }"></div>

:属性名="值"

<div :class="{ active: isActive }"></div>

v-bind的简写形式

控制模板显示隐藏

v-if v-else-if v-else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show
```
<h1 v-show="ok">Hello!</h1>
```
通过元素的 display 属性切换元素是否可见，适合频繁切换的情况，不支持<template>语法

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

渲染循环列表

v-for

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

事件绑定

v-on:事件名="方法"

<div id="example-1">
    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

@事件名="方法"

<div id="example-1">
    <button @click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

v-on的简写形式

表单控件绑定

v-model

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

生命周期

beforeCreate

组件实例刚被创建，组件属性计算之前

created

组件实例创建完成，属性已绑定，当 DOM 未生成

beforeMount

模板编译/挂载之前

mounted

模板编译/挂载之后

beforeUpdate

组件更新之前

update

组件更新之后

activated

对 keep-alive 模式，组件被激活时调用

deactivated

对 keep-alive 模式，组件被移除时调用

beforeDesctory

组件销毁前调用

destoryed

组件销毁后调用

Vue 学习笔记之入门