文组也能看得懂的网页前端Vue （四）函式篇

上一篇介绍了变数的用法，接下来谈谈函式的用法，函式简单来说可以想成功能的实现，让原本不会动的页面动起来，下面直接来说说函式的写法，以及一些简单的操作

Vue的函式跟变数一样都是要写在<Script>里面，打开专案里的App.vue可以看到在<script>里面有一块methods的区间，如下

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      });    }  }

这块区间就是宣告函式的地方，其中 startHacking 这个是函式的名称，( )表示前面的startHacking是一个函式，( )内可以放一些宣告一些变数让数值传入，{ }内为函式内要做的事情。这样讲可能很模糊，就让我们实际操作一遍吧。

目标为：按一个按钮让上一篇的文字改变。

首先我们先将网页上一些不要的东西去掉，然后新增一个按钮

<template>  <div id="app">    <div>{{this.para}}</div>    <el-button>按钮</el-button>   </div></template><script>export default {  data() {    return {      para: "原本的文字" //字串格式记得要用“”括起来    };  },  methods: {}};</script><style>#app {  font-family: Helvetica, sans-serif;  text-align: center;}</style>

接下来新增一个函式，就叫做clickEvent吧

<script>export default {  data() {    return {      para: "原本的文字" //字串格式记得要用“”括起来    };  },  methods: {    clickEvent(){          }  }};</script>

至于函式内容，这边要将para这个变数内的文字改变，在程式里将变数给予值大部分是用 ＝ 的符号，所以将para给予一个值的写法为

this.para = "这是改变后的文字"; //在javascript里面，一段程式码（句子）结束的时候需要加一个分号表示结束

接着我们把这段语法写进clickEvent里面

methods: {    clickEvent(){      this.para = "这是改变后的文字";    }  }

接下来我们需要一个开关去呼叫刚刚写的函式起来动作，在Vue里面监听按下按钮的动作写法很简单，只要在<el-button>里面加上一个@click=函式名称 即可

<template>  <div id="app">    <div>{{this.para}}</div>    <el-button @click=clickEvent()>按钮</el-button>  </div></template>

存挡后回到浏览器的 http://localhost:8010

可以看到画面长这样

按一下按钮后，文字会改变

这样就完成一个简单的函式操作，接下来尝试数字的操做。

目标：计算总共按了几次按钮。

稍微改一下显示的画面

<template>  <div id="app">    <div>总共按了{{this.para}}次</div>    <el-button @click="clickEvent()">按钮</el-button>  </div></template>

修改一下变数的内容，改为数字0

data() {    return {      para:  0 //数字格式不用“”括起来    };  },接下来再修改函式内容，让变数经过一次函数动作就加1methods: {    clickEvent() {      this.para = this.para + 1;    }  }

或者也可以写成比较简易的写法，两者结果是一样的

methods: {    clickEvent() {      this.para += 1;    }  }

存挡后回到浏览器 http://localhost:8010 就可以操作刚刚写的功能了

 简单的函式应用大概就讲到这，下一篇预计会分享一些element-ui的简单套件使用和一些比这篇複杂一点点的函式操作