matrix | 前端技术博客

September 19 2019 —— Vue

Vue 学习笔记 01


UlysoUlyso

什么是 Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

官方网站

竞争对手

  • React
  • AngularJS / Angular
  • Ember
  • Knockout
  • Polymer
  • Riot
  • 等等

https://cn.vuejs.org/v2/guide/comparison.html

技术前提

  • HTML/CSS
  • Javascript(ES6+)
  • Node.js

开发工具

  • 文本编辑器或 IDE

    • Visual Studio Code
    • Webstorm

  • 浏览器（Chrome,FireFox)

Hello Vue.js

1<!DOCTYPE html>
2<html lang="zh">
3    <head>
4        <meta charset="UTF-8" />
5        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7        <title>Hello Vue.js</title>
8
9        <script src="https://unpkg.com/vue/dist/vue.js"></script>
10    </head>
11
12    <body>
13        <div id="app">{{ message }}</div>
14        <script>
15            var app = new Vue({
16                el: '#app',
17                data() {
18                    return {
19                        message: 'Hello Vue.js!',
20                    }
21                },
22            })
23        </script>
24    </body>
25</html>
26

条件与循环

v-if

条件判断式，根据表达式的真伪决定是否显示内容。

1<div v-if="type === 'A'">
2    A
3</div>
4<!-- 充当 v-if 的“else-if 块”，可以连续使用： -->
5<div v-else-if="type === 'B'">
6    B
7</div>
8<div v-else-if="type === 'C'">
9    C
10</div>
11<!-- 可以使用 v-else 指令来表示 v-if 的“else 块”： -->
12<div v-else>
13    Not A/B/C
14</div>
15
16<!-- v-if vs v-show -->
17<!-- 元素已经被渲染，display: none -->
18<h1 v-show="ok">Hello!</h1>
19

v-for

处理数组循环，将数据循环显示到页面上。

1<ol>
2    <!-- 建议尽可能在使用 v-for 时提供 key attribute -->
3    <li v-for="item in items" :key="item.id">
4        <!-- 内容 -->
5    </li>
6</ol>
7

注：不推荐在同一元素上使用 v-if 和 v-for