VuetifyJS入门

学习目标

vuetify 是什么
如果高效的阅读文档

1. 什么是Vuetify？

我们一起来看Vuetify的官方网站上的介绍：

https://v2.vuetifyjs.com/zh-Hans/introduction/why-vuetify/

Vuetify 是建立在Vue.js之上的完备的界面框架。该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。

我们可以看到：

Vuetify的基础是VueJS
Vuetify是一个界面框架
Vuetify是给程序员提供工具的

如果你不理解什么是界面框架，可以在谷歌或者百度里搜索一下，也可以直接问ChatGPT。

2. 教你高效阅读Vuetify的文档

Vuetify可以为把VueJS写的代码变得更漂亮、更板正，是一个非常有用的工具。

学习Vuetify必须会读文档。我们教你如何高效阅读Vuetify的文档。

2.1 读文档先看怎么安装

Vuetify的安装文档：

https://v2.vuetifyjs.com/zh-Hans/getting-started/installation/

找到其中的CDN的用法，把这里的代码存起来。

注意在Vuetify的CDN代码是怎样引用Vuetify的代码库文件的。

2.2 浏览左边栏，了解整体的功能

左边栏里的内容里，重要的有：

介绍
快速入门
特性
UI组件

每个点开看一下，你就会发现：UI组件的内容最多，看起来也比较好懂。这就是我们学习Vuetify的重点内容。

Vuetify：写一个板正的学生列表

如果只用VueJS，那我们写的学生列表会是这个样子：

【图片：浏览器里打开的效果】

这个页面虽然能显示学生信息，但是页面非常单调。

用到的代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
   <div v-for="student of studentList">  
     学生姓名：{{ student.name }}<br>
     学号：{{ student.id }}<br>
     年龄：{{ student.age }}<br>
     性别：{{ student.gender }}<br>
     <br>
   </div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      studentList: [
        {name: '张小花',id: 'S01',age: '8',gender: '女'},
        {name: '王小草',id: 'S02',age: '11',gender: '女'}, 
        {name: '张大花',id: 'S03',age: '12',gender: '女'},
        {name: '王大草',id: 'S04',age: '9',gender: '女'}
      ]        
    }
  })
</script>

我们可以用一套代码库，Vuetify，来让页面变得更漂亮。

给大家一个例子：

https://v2.vuetifyjs.com/zh-Hans/components/data-tables/#section-4f7f7528

使用Vuetify，我们可以把数据表格，显示成这个例子中的样式，看起来非常的板正。

这里是用Vuetify写好的学生列表代码：

下载地址：示例1-Vuetify学生列表.html

我们会一步一步带你学习Vuetify，理解以上的代码

找几个例子试一试

我们接下来在UI组件里，找几个例子试一下，优先找看起来眼熟的，也就是我们之前有用过的。

示例1：Buttons（按钮）

https://v2.vuetifyjs.com/zh-Hans/components/buttons/

在这个文档里，你可以查看代码整体的效果，以及源代码。把源代码复制下来，跟CDN的内容保存在一起，看看效果。

源代码分两部分：

Template 模板
Script 脚本

在使用这个组件的时候，你既需要看模板的代码，也需要看脚本的代码。

示例2：Form inputs & controls （表单）

表单是一大类UI组件，里面包括很多的内容。我们不要每个都试，优先选自己眼熟的、选自己用过的，比如：

Forms（表单）：https://v2.vuetifyjs.com/zh-Hans/components/forms/
Inputs（输入框）：https://v2.vuetifyjs.com/zh-Hans/components/inputs/

使用表单，你不仅需要模板代码，还需要在脚本的data里面，创建用来保存用户输入的变量。

示例3：Tables（表格）

表格是用来显示数组数据的。

这一课开头的学生列表，就是用Vuetify表格显示出来的：

https://v2.vuetifyjs.com/zh-Hans/components/data-tables/

看看这个页面第一个示例的源代码，学习一下它的模板和脚本部分的代码。

在模板里面：

<v-data-table>是这个组件的名字
:headers是表头，它的值是一个数组变量
:items是表格的数据，它的值也是一个数组变量

在脚本里面：

data里定义了headers和desserts这两个数组变量，分别代表表头和数据

尝试一下：把这里显示甜品的表格，改成显示学生的信息。

不要被data的写法搞懵圈

有时候，data的写法是这样的：

<script>
  var app = new Vue({
    el: '#app',
    data: function() {
      return {
        message: 'Hello Vue!'
      }
    }
  })
</script>

或者是这样的：

<script>
  var app = new Vue({
    el: '#app',
    data: () => ({
      return {
        message: 'Hello Vue!'
      }
    })
  })
</script>

大家不要被这些不同的写法给带跑了，只要看到data，就可以知道这里面的都是变量。

除了以上两个组件，你还能看到什么组件？挨个试一下。

本课小结

重要概念：
- Vuetify是一个写UI的代码工具库
学习方法：
- 高效阅读：入门、建立整体印象、尝试

## 学习目标

- vuetify 是什么
- 如果高效的阅读文档

## 1. 什么是Vuetify？

我们一起来看Vuetify的官方网站上的介绍：

https://v2.vuetifyjs.com/zh-Hans/introduction/why-vuetify/

> Vuetify 是建立在Vue.js之上的完备的界面框架。 该项目的目标是向开发人员提供他们积累的丰富且吸引用户体验所需的工具。

我们可以看到：

- Vuetify的基础是VueJS
- Vuetify是一个界面框架
- Vuetify是给程序员提供工具的

如果你不理解什么是界面框架，可以在谷歌或者百度里搜索一下，也可以直接问ChatGPT。

## 2. 教你高效阅读Vuetify的文档

Vuetify可以为把VueJS写的代码变得更漂亮、更板正，是一个非常有用的工具。

学习Vuetify必须会读文档。我们教你如何高效阅读Vuetify的文档。

### 2.1 读文档先看怎么安装

Vuetify的安装文档：

https://v2.vuetifyjs.com/zh-Hans/getting-started/installation/

找到其中的CDN的用法，把这里的代码存起来。

注意在Vuetify的CDN代码是怎样引用Vuetify的代码库文件的。

### 2.2 浏览左边栏，了解整体的功能

左边栏里的内容里，重要的有：

- 介绍
- 快速入门
- 特性
- UI组件

每个点开看一下，你就会发现：UI组件的内容最多，看起来也比较好懂。这就是我们学习Vuetify的重点内容。

## Vuetify：写一个板正的学生列表

如果只用VueJS，那我们写的学生列表会是这个样子：

【图片：浏览器里打开的效果】

这个页面虽然能显示学生信息，但是页面非常单调。

用到的代码：

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
   <div v-for="student of studentList">  
     学生姓名：{{ student.name }}<br>
     学号：{{ student.id }}<br>
     年龄：{{ student.age }}<br>
     性别：{{ student.gender }}<br>
     <br>
   </div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      studentList: [
        {name: '张小花',id: 'S01',age: '8',gender: '女'},
        {name: '王小草',id: 'S02',age: '11',gender: '女'}, 
        {name: '张大花',id: 'S03',age: '12',gender: '女'},
        {name: '王大草',id: 'S04',age: '9',gender: '女'}
      ]        
    }
  })
</script>
```

我们可以用一套代码库，Vuetify，来让页面变得更漂亮。

给大家一个例子：

https://v2.vuetifyjs.com/zh-Hans/components/data-tables/#section-4f7f7528

使用Vuetify，我们可以把数据表格，显示成这个例子中的样式，看起来非常的板正。

这里是用Vuetify写好的学生列表代码：

- 下载地址：示例1-Vuetify学生列表.html

我们会一步一步带你学习Vuetify，理解以上的代码

### 找几个例子试一试

我们接下来在UI组件里，找几个例子试一下，优先找看起来眼熟的，也就是我们之前有用过的。

#### 示例1：Buttons（按钮）

https://v2.vuetifyjs.com/zh-Hans/components/buttons/

在这个文档里，你可以查看代码整体的效果，以及源代码。把源代码复制下来，跟CDN的内容保存在一起，看看效果。

源代码分两部分：

- Template 模板
- Script 脚本

在使用这个组件的时候，你既需要看模板的代码，也需要看脚本的代码。

#### 示例2：Form inputs & controls （表单）

表单是一大类UI组件，里面包括很多的内容。我们不要每个都试，优先选自己眼熟的、选自己用过的，比如：

- Forms（表单）：https://v2.vuetifyjs.com/zh-Hans/components/forms/
- Inputs（输入框）：https://v2.vuetifyjs.com/zh-Hans/components/inputs/

使用表单，你不仅需要模板代码，还需要在脚本的`data`里面，创建用来保存用户输入的变量。

#### 示例3：Tables（表格）

表格是用来显示数组数据的。

这一课开头的学生列表，就是用Vuetify表格显示出来的：

https://v2.vuetifyjs.com/zh-Hans/components/data-tables/

看看这个页面第一个示例的源代码，学习一下它的模板和脚本部分的代码。

在模板里面：

- `<v-data-table>`是这个组件的名字
- `:headers`是表头，它的值是一个数组变量
- `:items`是表格的数据，它的值也是一个数组变量

在脚本里面：

- `data`里定义了`headers`和`desserts`这两个数组变量，分别代表表头和数据

尝试一下：把这里显示甜品的表格，改成显示学生的信息。

#### 不要被data的写法搞懵圈

有时候，`data`的写法是这样的：

```html
<script>
  var app = new Vue({
    el: '#app',
    data: function() {
	  return {
        message: 'Hello Vue!'
      }
    }
  })
</script>
```

或者是这样的：

```html
<script>
  var app = new Vue({
    el: '#app',
    data: () => ({
	  return {
        message: 'Hello Vue!'
      }
    })
  })
</script>
```

大家不要被这些不同的写法给带跑了，只要看到`data`，就可以知道这里面的都是变量。

除了以上两个组件，你还能看到什么组件？挨个试一下。

## 本课小结

- 重要概念：
  - Vuetify是一个写UI的代码工具库

- 学习方法：
  - 高效阅读：入门、建立整体印象、尝试