VueJS入门

学习目标

理解 Vue 实例：了解如何通过 Vue 函数创建新的 Vue 实例，以及 Vue 实例的生命周期和属性。
掌握模板语法：理解 Vue.js 的模板语法，包括插值、指令、过滤器等，并能在实际项目中使用。
理解计算属性和侦听器：了解计算属性和侦听器的作用，以及它们与普通方法和属性的区别。
熟练使用 Class 与 Style 绑定：学会如何动态地绑定 HTML 元素的 class 和 style。
掌握条件渲染：了解 Vue.js 提供的条件渲染指令，如 v-if、v-else、v-else-if 和 v-show，并能在实际项目中使用。
掌握列表渲染：了解 Vue.js 的列表渲染指令 v-for，并能在实际项目中使用。
理解 Vue.js 的响应式原理：虽然这不是必须的，但理解 Vue.js 的响应式原理可以帮助你更好地理解 Vue.js 是如何工作的，以及为什么需要使用 Vue.set 和 Vue.nextTick 等方法。

认识VueJS

把下面的代码，复制粘贴到记事本里，保存为：学习VueJS-1.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  {{ message }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

在浏览器里打开这个文件，你可以看到什么效果？

【图片1】

你可以看到这个页面上显示了一句话：Hello Vue!

这句话是怎么显示出来的呢？我们可以注意到message这个单词，它的旁边就是这句话。

还记得对象的特点吗？用花括号{}包围起来的属性和值，属性和值中间用冒号:分开。

这里的

{
  message: 'Hello Vue!'
}

就是一个对象。message的值就是Hello Vue!。

我们改一下message的值，把"Hello Vue!"改成“你好，Vue”。

重新打开以后，你会看到什么？

【图片2】

现在页面上显示的文字，变成了：你好，Vue

如果我们把message这个词，全都改成abc，然后再在浏览器里打开，你会看到什么？

【图片3】

现在页面上显示的文字，仍然是：你好，Vue

我们可以总结出什么？

在这种新的写法中，页面的HTML部分，可以用花括号{{}}，包住一个变量。
被包住的变量的值，可以在页面上直接显示出来。
这个变量会出现在一个叫做data的对象里面。
如果在data中修改变量的值，页面里的显示也会变成同样的值。
变量的名字可以改变，但变量和HTML里面显示内容的对应关系不变。

这种写法就是VueJS。VueJS是一种新的写法，它可以大大简化我们写代码的过程！

示例：在页面上接收用户输入

在之前的例子中，我们已经看到：

如果在data中修改变量的值，页面里的显示也会变成同样的值。

如果我们直接在页面上改变变量的值，会发生什么呢？

把以下这段代码复制到记事本里，保存为：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  <input v-model="message"><br>
  现在message的值是：{{ message }}<br>  
  这里也应该显示message的值：{{ message }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

在浏览器里打开这个文件，你会看到：

一开始，输入框显示的是：Hello Vue!
当你在输入框里输入新的内容，下面的文字也会跟着同步变化。

这就是VueJS的功能：当你在页面上输入新内容，你的输入会立刻被保存到变量里，之后又立刻在页面上显示出来。但你不需要写很多的代码。

在上面的代码中，v-model="message" 表示把这个输入框的值保存到message

如果不用VueJS，而使用最基础的Javascript代码，那代码会长成什么样呢？

以下是一段不用VueJS写成的代码：

<div id="app">
  <input id="message"><button onclick="changeMessage">修改message</button><br>
  <p id="text">现在message的值是：</p> 
  <p id="text2">这里也应该显示message的值：</p>
</div>
<script>
  var message = 'Hello Vue!';
  function changeMessage() {
      message = document.getElementById('message').value;
      document.getElementById('text').innerText='现在message的值是：'+message;
  }
  document.getElementById('text').innerText='现在message的值是：'+message;
  document.getElementById('text2').innerText='这里也应该显示message的值：'+message;
</script>

上面这段代码比起VueJS是不是一下子繁琐了很多？而且效果还不如VueJS好。

VueJS的优势就在于写起来非常的简便，可以大幅度提升写代码的效率。

什么是VueJS

简单来说，VueJS是用来写用户界面的。用户界面就是我们在浏览器里看到的网页上的内容。用户界面可以显示我们要看到的数据，并且能够接收我们对数据的操作。

VueJS最大的特点，就是创建了变量里的数据与页面上显示的内容之间的关系：

只要变量发生变化，显示的内容直接就跟着改变；
如果我们通过页面上修改了变量的值，其他显示这些变量的地方也会跟着同步改变。

使用VueJS前的准备工作

在我们使用VueJS前，我们需要加入一行代码：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

这一行代码的作用，会把VueJS已经写好的代码自动加入到你的代码里。这种做法，叫做引用。会引用别人写好的代码，是程序员的必备技能。

【学习方法】引用别人写好的代码库

VueJS的模板、变量和函数

在之前的学习中，我们学到了这样的概念：

HTML模板决定页面长成什么样子。
Javascript变量用来存储数据。
Javascript函数用来对数据进行操作。

在VueJS里，也有模板、变量、函数的概念，只是写法有一些变化。

我们会对照VueJS的参考手册，来学习如何在VueJS里使用模板、变量和函数。

VueJS的参考手册：

菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

【学习方法】优先选择读清晰易懂的文档。菜鸟教程上的VueJS文档，比VueJS官方的文档写得更清晰，更好读。

VueJS的模板的写法

<div id="app">
  {{ message }}
</div>

花括号{{}}是一个模板标签，被花括号围起来的内容，就是一个变量。

VueJS模板的参考手册：https://www.runoob.com/vue2/vue-template-syntax.html

在这个页面上，你可以尝试一下“文本”部分的实例：

【图片：菜鸟教程文本实例的尝试一下】

试试以下的做法：

把message的值改成"Hello World!"，或者"你好！这是VueJS"。点击运行，看看页面有什么变化
把message这个变量改成abc，但是不改模板里的message
把模板当中的message改成abc，但是不改data里的message
把两处的message都改成abc，
把模板中的<div id="app">改成<div id="ABC">
把Javascript部分中的el: '#app',改成el: '#ABC',

通过这些操作，你能总结出使用VueJS的最基本的规律吗？

变量的值改变以后，模板里显示的内容也会跟着改变
模板的id要跟Javascript里的el的值对应起来
模板里要显示的变量名必须出现在data里

【学习方法】读文档，最坏的一种做法，就是从头开始、一行字一行字、一个字一个字的去读。这是完全错误的做法。
读文档的正确做法，是大致浏览过去，然后开始上手去尝试一下。尝试的时候，先理解这一段代码在做什么，达成了一个什么效果，然后找到跟这个效果相关的部分，改一改、试一试，看看效果会有什么变化。根据变化总结出来这段代码写法的规律。
如果没有从代码入手，而是上来就读文档的文字，那读着读着就会晕掉了。
在这个参考手册中，我们现阶段只需要学习如何显示文本。其他的内容我们会在之后的学习中接触到，你可以自己尝试探索，但是读不懂的话可以先不读。

VueJS里变量的写法

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

我们可以看出来，data的里面的变量就是可以显示在页面内容里的变量。以后只要我们看到data，我们就可以知道它里面的内容就是变量。

不要被data的写法搞懵圈

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

VueJS里函数的写法

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  {{ message }}<button v-on:click="changeMessage">点这里修改message</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage: {
        this.message = '你好，这是VueJS'
      }
    }
  });
</script>

在Javascript的部分，methods里面的changeMessage就是一个VueJS函数。使用VueJS函数，你可以修改VueJS里面的变量。

在上面的代码中，

v-on:click="changeMessage" 决定了当我们点击这个按钮的时候，会发生什么事：运行changeMessage这个函数
v-on:是VueJS的固定写法，用来处理用户在页面上的操作的。只要用户一操作，v-on:就会去运行对应的函数。
changeMessage这个函数就会把message改成“你好，这是VueJS”。

如果你也想做一个按钮，一点就会去运行一个函数，你就可以照着上面代码里的方式来写。

如果你觉得changeMessage这个名字太长了，你可以把它改成abc来试试看。你会发现效果还是一样的。

VueJS官网和菜鸟教程里关于methods的文档，都写得非常难懂。如果你想了解更多，可以读一下菜鸟教程上的这一篇文档：

Vue.js 事件处理器：https://www.runoob.com/vue2/vue-events.html

看到”事件处理器“这个新名词不要懵圈，这篇文档讲的主要内容就是VueJS怎样处理我们在页面上的操作，比如点击、双击、悬停等等。这些操作就是“事件”。

本课小结

重要概念
- VueJS：把变量和页面内容关联起来
- VueJS的模板、变量和函数
学习方法
- 学会引用别人写好的代码库
- 读文档不能逐字逐句读
- 要选择读清晰好懂的文档

1. 本课的学习内容

VueJS是一个代码库。

代码库：是用来抄的，人家怎样写（用）就怎样写（用）。

Vuetify 是建立在Vue.js 之上的完备的界面框架；Vue是Vuetify 的根基。

Vue.js的模板

VueJS里使用一对花括号{{ }}来表示模板。{{}}里面一定是变量,这个变量可以在data下面找到。

在data下面申明的变量，给一个就出一个，不需要再用var来创建变量。

一对花括号{{ }} 里面带括号的就是函数，比如：{{details()}}，会在methods下面显示。

在methods里面的就是函数。之前是用function ()来定义函数，现在就不用了。

在VueJS里，data里面的都是数据，methods里面的都是函数。

Vue的计算属性computed相当于一个变量，不需要调用任何函数，就会帮你自动算好。

2. 作业

对vuetify的文档混个脸熟，浏览UI组件，练习复制和粘贴！

3. 资源

点击这里下载本课的示范代码。

本课用到的网页资料：

菜鸟教程：VueJS

教程：https://www.runoob.com/vue2/vue-tutorial.html

Vuetify：

安装 - CDN：https://vuetifyjs.com/zh-Hans/getting-started/installation/#cdn-768475286cd5
数据表格 - 基本：https://vuetifyjs.com/zh-Hans/components/data-tables/
数据表格 - CRUD操作：https://vuetifyjs.com/zh-Hans/components/data-tables/#crud-64cd4f5c

参考资料：感兴趣的话可以去阅读：

VueJS官网介绍：https://cn.vuejs.org/v2/guide/

## 学习目标

1. **理解 Vue 实例**：了解如何通过 Vue 函数创建新的 Vue 实例，以及 Vue 实例的生命周期和属性。
2. **掌握模板语法**：理解 Vue.js 的模板语法，包括插值、指令、过滤器等，并能在实际项目中使用。
3. **理解计算属性和侦听器**：了解计算属性和侦听器的作用，以及它们与普通方法和属性的区别。
4. **熟练使用 Class 与 Style 绑定**：学会如何动态地绑定 HTML 元素的 class 和 style。
5. **掌握条件渲染**：了解 Vue.js 提供的条件渲染指令，如 v-if、v-else、v-else-if 和 v-show，并能在实际项目中使用。
6. **掌握列表渲染**：了解 Vue.js 的列表渲染指令 v-for，并能在实际项目中使用。
7. **理解 Vue.js 的响应式原理**：虽然这不是必须的，但理解 Vue.js 的响应式原理可以帮助你更好地理解 Vue.js 是如何工作的，以及为什么需要使用 Vue.set 和 Vue.nextTick 等方法。

## 认识VueJS

把下面的代码，复制粘贴到记事本里，保存为：学习VueJS-1.html

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  {{ message }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
```

在浏览器里打开这个文件，你可以看到什么效果？

【图片1】

你可以看到这个页面上显示了一句话：Hello Vue!

这句话是怎么显示出来的呢？我们可以注意到`message`这个单词，它的旁边就是这句话。

还记得对象的特点吗？用花括号`{}`包围起来的属性和值，属性和值中间用冒号`:`分开。

这里的

```javascript
{
  message: 'Hello Vue!'
}
```

就是一个对象。`message`的值就是`Hello Vue!`。

我们改一下message的值，把"Hello Vue!"改成“你好，Vue”。

重新打开以后，你会看到什么？

【图片2】

现在页面上显示的文字，变成了：你好，Vue

如果我们把`message`这个词，全都改成`abc`，然后再在浏览器里打开，你会看到什么？

【图片3】

现在页面上显示的文字，仍然是：你好，Vue

我们可以总结出什么？

- 在这种新的写法中，页面的HTML部分，可以用花括号`{{}}`，包住一个变量。
- 被包住的变量的值，可以在页面上直接显示出来。
- 这个变量会出现在一个叫做`data`的对象里面。
- 如果在`data`中修改变量的值，页面里的显示也会变成同样的值。
- 变量的名字可以改变，但变量和HTML里面显示内容的对应关系不变。

这种写法就是VueJS。VueJS是一种新的写法，它可以大大简化我们写代码的过程！

## 示例：在页面上接收用户输入

在之前的例子中，我们已经看到：

- 如果在`data`中修改变量的值，页面里的显示也会变成同样的值。

如果我们直接在页面上改变变量的值，会发生什么呢？

把以下这段代码复制到记事本里，保存为：

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  <input v-model="message"><br>
  现在message的值是：{{ message }}<br>  
  这里也应该显示message的值：{{ message }}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
```

在浏览器里打开这个文件，你会看到：

- 一开始，输入框显示的是：Hello Vue!
- 当你在输入框里输入新的内容，下面的文字也会跟着同步变化。

这就是VueJS的功能：当你在页面上输入新内容，你的输入会立刻被保存到变量里，之后又立刻在页面上显示出来。但你不需要写很多的代码。

在上面的代码中，`v-model="message"` 表示 把这个输入框的值保存到`message`

如果不用VueJS，而使用最基础的Javascript代码，那代码会长成什么样呢？

以下是一段不用VueJS写成的代码：

```html
<div id="app">
  <input id="message"><button onclick="changeMessage">修改message</button><br>
  <p id="text">现在message的值是：</p> 
  <p id="text2">这里也应该显示message的值：</p>
</div>
<script>
  var message = 'Hello Vue!';
  function changeMessage() {
      message = document.getElementById('message').value;
      document.getElementById('text').innerText='现在message的值是：'+message;
  }
  document.getElementById('text').innerText='现在message的值是：'+message;
  document.getElementById('text2').innerText='这里也应该显示message的值：'+message;
</script>
```

上面这段代码比起VueJS是不是一下子繁琐了很多？而且效果还不如VueJS好。

VueJS的优势就在于写起来非常的简便，可以大幅度提升写代码的效率。

## 什么是VueJS

简单来说，VueJS是用来写用户界面的。用户界面就是我们在浏览器里看到的网页上的内容。用户界面可以显示我们要看到的数据，并且能够接收我们对数据的操作。

VueJS最大的特点，就是创建了变量里的数据与页面上显示的内容之间的关系：

- 只要变量发生变化，显示的内容直接就跟着改变；
- 如果我们通过页面上修改了变量的值，其他显示这些变量的地方也会跟着同步改变。

## 使用VueJS前的准备工作

在我们使用VueJS前，我们需要加入一行代码：

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
```

这一行代码的作用，会把VueJS已经写好的代码自动加入到你的代码里。这种做法，叫做引用。会引用别人写好的代码，是程序员的必备技能。

```txt
【学习方法】引用别人写好的代码库
```

## VueJS的模板、变量和函数

在之前的学习中，我们学到了这样的概念：

- HTML模板决定页面长成什么样子。
- Javascript变量用来存储数据。
- Javascript函数用来对数据进行操作。

在VueJS里，也有模板、变量、函数的概念，只是写法有一些变化。

我们会对照VueJS的参考手册，来学习如何在VueJS里使用模板、变量和函数。

VueJS的参考手册：

- 菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

```txt
【学习方法】优先选择读清晰易懂的文档。菜鸟教程上的VueJS文档，比VueJS官方的文档写得更清晰，更好读。
```

### VueJS的模板的写法

```html
<div id="app">
  {{ message }}
</div>
```

花括号`{{}}`是一个模板标签，被花括号围起来的内容，就是一个变量。

VueJS模板的参考手册：https://www.runoob.com/vue2/vue-template-syntax.html

在这个页面上，你可以尝试一下“文本”部分的实例：

【图片：菜鸟教程文本实例的尝试一下】

试试以下的做法：

- 把`message`的值改成"Hello World!"，或者"你好！这是VueJS"。点击运行，看看页面有什么变化
- 把`message`这个变量改成`abc`，但是不改模板里的`message`
- 把模板当中的`message`改成`abc`，但是不改`data`里的`message`
- 把两处的`message`都改成`abc`，
- 把模板中的`<div id="app">`改成`<div id="ABC">`
- 把Javascript部分中的`el: '#app',`改成`el: '#ABC',`

通过这些操作，你能总结出使用VueJS的最基本的规律吗？

- 变量的值改变以后，模板里显示的内容也会跟着改变
- 模板的`id`要跟Javascript里的`el`的值对应起来
- 模板里要显示的变量名必须出现在`data`里

```txt
【学习方法】读文档，最坏的一种做法，就是从头开始、一行字一行字、一个字一个字的去读。这是完全错误的做法。

读文档的正确做法，是大致浏览过去，然后开始上手去尝试一下。尝试的时候，先理解这一段代码在做什么，达成了一个什么效果，然后找到跟这个效果相关的部分，改一改、试一试，看看效果会有什么变化。根据变化总结出来这段代码写法的规律。

如果没有从代码入手，而是上来就读文档的文字，那读着读着就会晕掉了。

在这个参考手册中，我们现阶段只需要学习如何显示文本。其他的内容我们会在之后的学习中接触到，你可以自己尝试探索，但是读不懂的话可以先不读。
```

### VueJS里变量的写法

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

我们可以看出来，`data`的里面的变量就是可以显示在页面内容里的变量。以后只要我们看到`data`，我们就可以知道它里面的内容就是变量。

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

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

### VueJS里函数的写法

```html
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<div id="app">
  {{ message }}<button v-on:click="changeMessage">点这里修改message</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage: {
        this.message = '你好，这是VueJS'
      }
    }
  });
</script>
```

在Javascript的部分，`methods`里面的`changeMessage`就是一个VueJS函数。使用VueJS函数，你可以修改VueJS里面的变量。

在上面的代码中，

- `v-on:click="changeMessage"` 决定了当我们点击这个按钮的时候，会发生什么事：运行`changeMessage`这个函数
- `v-on:`是VueJS的固定写法，用来处理用户在页面上的操作的。只要用户一操作，`v-on:`就会去运行对应的函数。
- `changeMessage`这个函数就会把`message`改成“你好，这是VueJS”。

如果你也想做一个按钮，一点就会去运行一个函数，你就可以照着上面代码里的方式来写。

如果你觉得`changeMessage`这个名字太长了，你可以把它改成`abc`来试试看。你会发现效果还是一样的。

VueJS官网和菜鸟教程里关于`methods`的文档，都写得非常难懂。如果你想了解更多，可以读一下菜鸟教程上的这一篇文档：

- Vue.js 事件处理器：https://www.runoob.com/vue2/vue-events.html

看到”事件处理器“这个新名词不要懵圈，这篇文档讲的主要内容就是VueJS怎样处理我们在页面上的操作，比如点击、双击、悬停等等。这些操作就是“事件”。

## 本课小结

- 重要概念
  - VueJS：把变量和页面内容关联起来
  - VueJS的模板、变量和函数
- 学习方法
  - 学会引用别人写好的代码库
  - 读文档不能逐字逐句读
  - 要选择读清晰好懂的文档

## 1. 本课的学习内容

VueJS是一个代码库。

代码库：是用来抄的，人家怎样写（用）就怎样写（用）。

Vuetify 是建立在Vue.js 之上的完备的界面框架；Vue是Vuetify 的根基。

### Vue.js的模板

VueJS里使用一对花括号```{{ }}```来表示模板。```{{}}```里面一定是变量,这个变量可以在```data```下面找到。

在```data```下面申明的变量，给一个就出一个，不需要再用var来创建变量。

一对花括号```{{ }}``` 里面带括号的就是函数，比如：```{{details()}}```，会在```methods```下面显示。

在```methods```里面的就是函数。之前是用function ()来定义函数，现在就不用了。

在VueJS里，```data```里面的都是数据，```methods```里面的都是函数。

Vue的计算属性```computed```相当于一个变量，不需要调用任何函数，就会帮你自动算好。

## 2. 作业

对vuetify的文档混个脸熟，浏览UI组件，练习复制和粘贴！

## 3. 资源

[点击这里下载本课的示范代码。](https://dl.openjianghu.org/training/download-code-it-training-level1-lesson03-2022-02-12.zip "点击这里下载本课的示范代码。")

本课用到的网页资料：

**菜鸟教程：VueJS**

- 教程：https://www.runoob.com/vue2/vue-tutorial.html

**Vuetify：**

- 安装 - CDN：https://vuetifyjs.com/zh-Hans/getting-started/installation/#cdn-768475286cd5
- 数据表格 - 基本：https://vuetifyjs.com/zh-Hans/components/data-tables/
- 数据表格 - CRUD操作：https://vuetifyjs.com/zh-Hans/components/data-tables/#crud-64cd4f5c

参考资料：感兴趣的话可以去阅读：

- VueJS官网介绍：https://cn.vuejs.org/v2/guide/