文组也能看得懂的网页前端Vue  （三）变数篇

在开始正式写网页之前，先来讲解一下“变数”这东西。

大家应该知道程式跟数学有极大的相关，所以其实程式上的”变数“可以想像成数学上的变数一样，也就是大概在国中数学看过的 x = 1 这种算式中的 x，只是在程式上普遍因为可读性的关係（就是可以让大家都看得懂），比较少会写x,y之类的，大部分会写像是：

animal = "dog";

housenumber = 123;

而变数在前端画面比较常使用的有：

字串, 整数, 浮点数（也就是小数）, 矩阵 （也就是集合）

大概这四种，当然还有其他的一堆，这些就等到使用到的时候再学习吧，变数简介大概就到这。

开始写网页吧！

首先用VSCode开启之前下载的专案，

开启终端机（Command+J 或是 Ctrl+J)

在开启Chrome输入localhost:8010

直接将网页跑起来，这样方便边做边看到成果，也可以马上发现有没有地方写错。

然后点选左边的App.vue，

这时右边区块会显示App.vue这只的程式码

<template>  <div id="app">    <img src="./assets/logo.png" />    <div>      <el-button @click="startHacking">Start</el-button>    </div>  </div></template><script>export default {  methods: {    startHacking() {      this.$notify({        title: "It works!",        type: "success",        message:          "We've laid the ground work for you. It's time for you to build something epic!",        duration: 5000      });    }  }};</script><style>#app {  font-family: Helvetica, sans-serif;  text-align: center;}</style>

稍微简单解释一下这只程式码，

上面可以看到程式码几乎都是用跟包起来的一个一个区间，

而这个<>通常称为标籤（tag）来表示这个区块的功能：

<template>：通常称为模板，先记得Vue中网页显示的画面都写在这里就好，可以想像成一个居家空间。

<div>：称为区块，用于将整个画面区分，可以想像成一个一个房间。

<img>：这个是网页图片，只要指定图片的连结（src=）就可以显示图片在页面上，可以想像成家裏墙壁贴的海报。

<el-button>：这是element-ui按钮的特殊写法，tag包起来的字会显示在按钮上面，用于触发事件，可以想像成家里各个开关。（element-ui是这专案使用的套件，在一开始npm install 的时候安装进来的。看不懂这段？没关係，也不重要，反正就是个按钮）

<script>：这是用来写Javascript的区块，控制网页动作的程式码都写在这边，可以想像成居家的设计图。

<style>：这是用来写css的区块，控制网页元件大小、颜色、字型可以写在这，可以想像成家中的配色。

介绍完tag后，开始来增加一点页面元素，首先来打个招呼吧

我们先在

<img src="./assets/logo.png" />

上面增加一个<div></div>的tag，

然后再中间打上 “Hello 我的第一个网页”

<template>  <div id="app">    <div>Hello 我的第一个网页</div>    <img src="./assets/logo.png" />    <div>      <el-button @click="startHacking">Start</el-button>    </div>  </div></template>

按下存挡后（Command+S 或是 Ctrl+S）

等待下方终端机跑出

webpack: Compiled successfully.

打开chrome的 http://localhost:8010 页面

应该会发现页面改变了

如何？很简单吧

那如果想要有三行 “Hello 我的第一个网页”呢？

直觉的想法应该就是

<template>  <div id="app">    <div>Hello 我的第一个网页</div>    <div>Hello 我的第一个网页</div>    <div>Hello 我的第一个网页</div>    <img src="./assets/logo.png" />    <div>      <el-button @click="startHacking">Start</el-button>    </div>  </div></template>

但是如果改天想要改变里面的文字，这样就必须要重複改三遍，或许觉得改三遍其实很快，但如果五十遍、一百变呢？

这时候变数的好处就出来了

在开始写变数之前先记得几点事项

第一点：变数需要宣告在<script>里面

第二点：变数需要先给定一个值

第三点：变数名称不能重複

ＯＫ让我们来增加变数吧！

Vue的变数写法很简单

只要在export default 底下宣告就好

<script>export default {  data() {    return {      para: "我是变数喔", //字串格式记得要用""括起来      para2: "我是第二个变数喔"    };  },.........</script>

宣告完后就可以使用变数在网页显示的地方了。

显示的方式也很简单

在想要显示的地方打上 {{this.变数名称}} 就可以了，这边的 this 可以先想成“这一个页面”的意思，所以比如说 this.para 翻译一下就是 => 这一个页面的叫para变数

接下来修改一下上面的显示文字的地方

<template>  <div id="app">    <div>{{this.para}}</div>    <div>{{this.para}}</div>    <div>{{this.para2}}</div>    <img src="./assets/logo.png" />    <div>      <el-button @click="startHacking">Start</el-button>    </div>  </div></template>

存挡后，页面就会显示成

这样以后要修改文字就只要修改一次变数的部分，就不必複製贴上好几次了。

当然，变数的用途不只这些

接下来会在"函式“（Function）继续介绍用途