Day 20：「资料拿来我就帮你改」- Vue 基础观念及常用语法

Day20-Banner

嘿～昨天的内容还行吗？

「兔兔，昨天突然就接收到大量语法！」

齁，这个我就要说声不好意思～
原本是应该先介绍基本观念，
但我们今天基本观念要写在 SFC 里面练习，
所以阿，就先介绍一下 SFC 罗～

知道 SFC 之後，
我们就不用去考虑 Vue 挂载问题，
只要把注意力放在生命周期和变数之间的关系啦～！

然後毕竟我们这不是专门的 Vue 系列，
我还是着重在之後的相互配合上哦。

那今天，就让我们稍微来 Speed Run 一下 Vue 吧！

基本架构

我们虽然要讲基本架构，
但是会以 SFC 的结构当作基底。

从 SFC 结构来说，会有以下三块：

<!-- html 结构 -->
<template>
</template>

<!-- js 逻辑 -->
<script>
</script>

<!-- css 样式 -->
<style>
</style>

这结构基本与 html 架构无异，
只是分界更明显，然後没有 <head>。

我们来稍微简单解释一下：

template

HTML 结构的放置处，结构中可直接使用 Vue 变数或是与 Vue 中的事件绑定。

script

Vue 与 Javascript 撰写的地方。撰写的变数或方法可以在 template 中直接存取。

style

CSS 样式撰写的地方，跟一般 CSS 写法并无差异，如果只有 <style></style> 会是全域的，记得上了 scoped 才不会造成全域污染。

那除了 SFC 之外，
<script> 中也是有结构的。

一般结构会是这样：

<script>
export default {
  name: "元件名称",
  props: [],
  data() {
    return {
      // ...
    }
  },
  methods: {
    // ...
  },
  computed: {
    // ...
  },
  components: {
    // ...
  }
}
</script>

我们这边不介绍 composition API，只会介绍 options API 的部分。

其实他就是一个普通的 js 物件。
只是在物件之中所定义的属性必须是特定的，
这样 Vue 才能看得懂。

其实你也能自定义区块，
只是如果你没有对它特别处理，
那基本上对 Vue 来说毫无意义。

来稍微解释一下各属性的用途：

name

元件名称，这会决定你在使用元件时的标签名称。

props

原意是属性 (properties)，也就是指 html 元素的属性，前端框架之中都是用属性来对元件内部传递资料。

data( )

用於存放要用的变数，data() 中必须回传物件 {}，并将要使用的变数等资料放在物件之中。

methods

撰写函数的地方，在 methods 中的函数可以接收参数值；当 data 中资料有变动时，methods 中的函数会重新触发执行重新运算。

computed

也是撰写函数的地方，只是这边的用法比较特别，而且不像 methods 中的函数一般，computed 不可以接收参数；当 data 中的变动的资料不是该函数所用到的时，该函数不会重新执行重新运算，会直接返回上一次运算後暂存的结果，相对 methods 较不耗效能。

如果觉得听不懂这边的叙述，文章看完之後有一个 methods 与 computed 触发差异的范例可以去看看。

components

帮 Vue 加入元件的地方，将其他 SFC 引用进来之後，要加入 components 中才可以在 template 上使用。

除了基本结构之外，
最重要的，是生命周期。

生命周期

嗯，我知道看起来很复杂，
我也看不懂 XDD

不过大致上从 Vue 2 到 Vue 3，
options API 的生命周期没有 (什麽) 变化。

大致上可以用的生命周期有：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
errorCaptured
renderTracked
renderTriggered
activated
deactivated

但会不会都用到就看个人。

因为所谓 options API 就是，
这些其实是选择性的使用！

所以我们可以直接像那些结构，
直接混着加在里面，
假如我们要在元件挂载成功时显示 log，

那该怎麽去做？
举例：

<script>
export default {
  name: "Box",
  props: ["number","color"],
  mounted() {
    console.log("Box 元件已挂载！")
  }
}
</script>

我们这样就把生命周期的 mounted 加进去了，这麽一来在元件挂载完成之後就会显示 「Box 元件已挂载！」。

可以很清楚的发现，
跟前面相比只剩下了 mounted，
其他用不到的都拿掉了，
这就是所谓的选择性。

生命周期就要自己去看一下文件，
看看那些生命周期都是做些什麽用的，
该用在什麽时候。

魔法指令

前面那些，都不重要啦！

其实也不是不重要，
而是现在这些才是我喜欢的部分！

魔法指令听起来很魔法，但是真的很魔法。

~~(哩洗咧供啥...)~~

但在讲解魔法指令之前，
我们必须先知道模板语法。
因为这关乎到在 template 使用变数的方式。

举例：

<template>
  <li> {{ content }} </li>
</template>

<script>
export default {
  data() {
    return {
      content: "项目１内容"
    }
  }
}
</script>

从变数名称对照一下，
可以大概看出 li 渲染之後的内容就会是：

<li> 项目１内容 </li>

而这 {{ }} 就是模板语法，
在这里面可以直接使用 data 中的变数，
也可以直接使用函数回传的结果，
或是 js 的运算式。

指令

灵活运用 Vue 的魔法指令，
可以让开发变的超级轻松，
无论是流程控制、取值，
又或者是排版，都很有帮助。

双向资料绑定 `v-model`

vue 是有双向绑定的，用 v-model 可以轻松的在表单元素上快速取值和赋值；之前在 Day17 中谈到使用前端框架的好处时，有说过资料互动上的方便处，而 v-model 正是那最黑魔法的指令，因为当你 input 元件的值改变时，变数内容也已改变，当你修改变数内容时，画面上 input 元件的值也会随之改变。

这是纯 js 的做法：

<input type="text" id="input" oninput="textSync()" />
<div id="show"></div>

<script>
function textSync() {
  const input = document.getElementById("input")
  const show = document.getElementById("show")
  
  show.innerText = input.value
}
</script>

使用 v-model 只需要这样：

<template>
  <input type="text" v-model="content" />
  <div>{{ content }}</div>
</template>

<script>
export default {
  data() {
    return {
      content: ''
    }
  }
}
</script>

这样他就会直接把变数 content 与 input 元素的值做双向绑定，不像是纯 js 还需要定义 id 名称去抓取 DOM 元素然後再向将内容渲染到指定的元素上。

渲染控制 `v-if`

在 html 元素上做判断式是从前想也想不到的事情，但透过前端框架这件事情可以轻松实现，尤其是 vue。

透过 v-if 可以使用变数内容或函数输出的结果值来做判断式，true 则显示元素，false 则不渲染到页面上。

<template>
  <div v-if="content==='a'"> 是 a </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'a'
    }
  }
}
</script>

另还有 v-elseif 和 v-else，这边就不介绍了。

显示控制 `v-show`

在视觉上和 v-if 实现的效果差不多，但根本上是不一样的。 v-if 判断式结果为 false 时是直接不渲染元素内容，而 v-show 则是渲染到页面上但利用 CSS 的 display:none; 将元素隐藏。

<template>
  <div v-show="content==='a'"> 是 a </div>
</template>

<script>
export default {
  data() {
    return {
      content: 'a'
    }
  }
}
</script>

回圈 `v-for`

这个也很黑魔法啦！既然有 if 当然要有 for 啊！这可是写程序的标配欸。 v-for 可以从变数或者函数回传的阵列、物件之类的内容来使元素或元件重复，这在做清单列表、图库等等重复性高的画面时超级无敌实用！

单纯数量的 v-for：

<template>
  <div v-for="count in 30">数字 {{count}}</div>
</template>

这样就会有 30 个 div，然後内容是从 1 列到 30 了！

如果是从变数的话：

<template>
  <div v-for="dir in dirs">方向：{{dir}}</div>
</template>

<script>
export default {
  data() {
    return {
      dirs: ["上","左","下","右"]
    }
  }
}
</script>

所以有些资料是从 api 取得，我们就可以利用生命周期 mounted 等等的组合来完成。

像是：

<template>
  <div>
    导航路径：
    <div v-for="path in paths">{{path}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paths: []
    }
  },
  mounted() {
    // 假设这是 api 取得的资料
    const p = []
    
    for(let i=0;i<30;i++){
      p.push(i)
    }
    
    // 在 template 之外的地方存取 data 中的变数或其他函数时，前面必须加上 `this`
    // 将取得到的资料存回 data 中的变数
    this.paths = p
  }
}
</script>

另外两个常见指令会更常用到，但跟前面使用起来的感觉不太相同。我们接着继续看。

属性绑定 `v-bind`

用途在於把资料绑定在属性上，也是元件传递的一把关键钥匙。原本 html 元素上的属性都是固定值，要使用 js 改变它的内容其实有点小麻烦。但是有了 v-bind 之後再也不用烦恼，可以让元素的属性值随变数内容改变。

举例：

<template>
  <div v-bind:id="id"> # {{id}}</div>
</template>

<script>
export default {
  data() {
    return {
      id: "test"
    }
  }
}
</script>

基本上 html 元素具有的属性都能够绑定，也可以绑定自定义的属性，前面说过的元件的 props 就可以读取到这些属性的值。

如果觉得 v-bind 前缀很长，也可以缩短成：

<div v-bind:id="id"> # {{id}}</div>

<!-- 缩短 -->
<div :id="id"> # {{id}}</div>

事件绑定 `v-on`

绑定事件用，用法与 v-bind 相同，可以使事件发生时触发绑定的函数或者执行一行 js 的陈述式。同时，这是元件资料传递的另一把钥匙。

执行一行陈述式，举例：

<template>
  <div>
    {{ num }}
    <div v-on:click="num=0">归零</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100
    }
  }
}
</script>

呼叫函数的举例：

<template>
  <div>
    {{ num }}
    <div v-on:click="clear()">归零</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100
    }
  },
  methods: {
    clear() {
      this.num = 0
    }
  }
}
</script>

也是与 v-bind 相同，基本上预设有提供的事件都能够绑定。也可以绑定自订事件，但这就与元件资料传递有关，之後会提到。

预设，v-on 也是可以缩短语法的：

<div v-on:click="clear()">归零</div>

<!-- 缩短 -->
<div @click="clear()">归零</div>

会，很烧脑吗？
基本上这些东西是熟能生巧，
这些东西大概用了几遍就会熟悉了。

其实写 Vue 的时候，
真的就是不断使用上面这些内容而已，
只是用法就要因应你需要的功能去做调整。

那就大概这样了！
如果 vue 还不熟的话尽量多看一两次，
那下面也会提供我觉得不错的资源～
先躺了！ (Zz..Zz...)

给你们的回家作业：

作业实施要点：
- 复习 Day17 到 Day20
- 大概记一下今天的内容
methods、computed 触发差异范例：有种你点点看
超推的 Vue 学习资源：Vue.js 008

关於兔兔们：

( # 兔兔小声说 )

你们信教吗？

「啧啧你这只兔子，一定又要说什麽兔兔教了吼！！」

错了，这你就有所不知了...
此时此刻，我是回笼教的。

兔兔 :

因为我现在的主要任务
是睡觉。

<<: [Lesson6] Fragment

>>: 【Day6】重设密码页面X Firebase Auth

Day 20：「资料拿来我就帮你改」- Vue 基础观念及常用语法

基本架构

template

script

style

name

props

data( )

methods

computed

components

生命周期

魔法指令

指令

双向资料绑定 `v-model`

渲染控制 `v-if`

显示控制 `v-show`

回圈 `v-for`

属性绑定 `v-bind`

事件绑定 `v-on`

给你们的回家作业：

[Matplotlib] - Introduction to Charts and Plots

[Day28]Solidity实作2

Day9-React Hook 篇-认识 useCallback

[夜市吃到饱] 除了夜市牛排，还有一种食物叫做「蒙古烤肉」～

30天学会C语言: Day 22-阵列处理

硬体安全模组 (HSM) 的身份验证最不相关-职责分离（SOD）

【Day 08】实作 - 透过 AWS 服务 - AppFlow 把 Google Analytics 资料存放至 AWS 中 ( 1 )

Day 30. [复盘] 一场成年人的意志力之旅

LHS RHS

DAY12 - 踩坑纪录 : Bitbucket

基本架构

template

script

style

name

props

data( )

methods

computed

components

生命周期

魔法指令

指令

双向资料绑定 v-model

渲染控制 v-if

显示控制 v-show

回圈 v-for

属性绑定 v-bind

事件绑定 v-on

给你们的回家作业：

双向资料绑定 `v-model`

渲染控制 `v-if`

显示控制 `v-show`

回圈 `v-for`

属性绑定 `v-bind`

事件绑定 `v-on`