1、template 部分
（1）修改template部分的代码
template里面包含html代码，对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中的template部分的代码修改成下面的代码
<template> <div> <div class="show"> <div class="mark-text">当前分数</div> <div class="mark">{{mark}}</div> </div> <div class="row"> <div class="right button" @click='addMark(1)'>+ 1</div> <div class="left button" @click='addMark(-1)'>- 1</div> </div> <div class="row"> <div class="right button" @click='addMark(5)'>+ 5</div> <div class="left button" @click='addMark(-5)'>- 5</div> </div> </div> </template>
（2）在标签下只能有一个子节点元素
html的所有代码必须包含在一个 html 标签中，如果写多个如
这样的标签则会报错，如下所示：
正确示例
<template> <div> <div> //html页面代码 </div> </div> </template>
错误示例
<template> <div> //html页面代码 </div> <div> //html页面代码 </div> </template>
（3）双大括号{{ }}
<div class="mark">{{mark}}</div>
双大括号{{ }}会将数据解释为普通文本，而非 HTML 代码。里面一般包裹的是vue.js的变量或者方法，这些变量、方法要先在script里面定义
（4）点击事件@click
<div class="right button" @click='addMark(1)'>+ 1</div>
@click是v-on:click的缩写，是给html标签添加的点击事件，addMark(1)是在script里面的method对象中定义的方法
2、script 部分
（1）修改script部分的代码
script里面包含js代码，对应着原生小程序框架里中的.js文件。我们将index.vue文件中的script部分的代码修改成下面的代码
<script> export default { data () { return { mark: 0 } }, methods: { addMark (add) { //this.mark = 0 + 1 this.mark = this.mark + add console.log("mark",this.mark) } } } </script>
（2）data对象
data里面定义的是数据，我们在这里定义了mark并赋值为0。在 template中，通过{{mark}}来使用数据。在script的methods对象中，通过this.mark来使用数据
data () { return { mark: 0 } }
data 选项必须是一个函数，不然vue实例之间可能会相互影响。比如，像下面这样定义就是错误的~
data: { mark: 0 }
（3）methods对象
methods对象里面定义的是vue的方法，也可以说是函数。比如，下面代码就表示，我们自定义了一个叫 addMark 的方法函数。
add是addMark方法的参数，在template中通过@click调用的addMark(1)就是将add参数作为1，此时mark = 0 + 1 变成了1，console.log语句是可以将结果打印到微信开发者工具中的控制台，我们一般用来测试。
methods: { addMark (add) { //this.mark = 0 + 1 this.mark = this.mark + add console.log("mark为：",this.mark) } }
3、style 部分
script部分比较简单，里面包含css代码，对应着原生小程序框架里中的.wxss文件。就是将template里出现的html元素加一些样式。我们将index.vue文件中的script部分的代码修改成下面的代码。
样式部分与我们的代码逻辑关系不大，我们不做详细讲解了，写代码的时候，直接粘贴就可以了。
<style lang='scss'> .show{ text-align:center; height:266px; background: #EA5149; margin-bottom:5px; color: #FFFFFF; font-weight:bold; .mark-text{ font-size: 20px; padding:28px; } .mark{ font-size: 88px; } .button{ margin:0 10px; height: 30px; line-height:30px; text-align:center; font-size: 15px; font-weight:bold; background:#EA5149; .btn0{ width: 60px; border-radius: 15px; border:1px dashed #feb600; } .btn1{ width: 60px; border-radius: 15px; border:1px dashed #feb600; } } } .row{ margin: 40px 56px; .button{ width: 70px; height: 70px; line-height:70px; border-radius: 20%; border: none; text-align:center; font-size: 25px; color:#FFFFFF; font-weight:bold; } } .right{ background:#EA5149; float: right; } .left{ background:#feb600; margin-right:80px; } </style>
Vue官方文档
https://cn.vuejs.org/v2/guide/
如果以前没有接触过vue，可能看到vue代码会有点懵，建议花点时间看一下vue 的官方文档，对vue有一个大概的认识，不然下面的学习可能会比较困难。
4、测试效果
先在项目目录中运行npm run dev
~/WeChatProjects/truth_hold$ npm run dev
在微信开发者工具中点击加减按钮，会看到以下效果
5、index.vue代码示例
<template> <div> <div class="show"> <div class="mark-text">当前分数</div> <div class="mark">{{mark}}</div> </div> <div class="row"> <div class="right button" @click='addMark(1)'>+ 1</div> <div class="left button" @click='addMark(-1)'>- 1</div> </div> <div class="row"> <div class="right button" @click='addMark(5)'>+ 5</div> <div class="left button" @click='addMark(-5)'>- 5</div> </div> </div> </template> <script> export default { data () { return { mark: 0 } }, methods: { addMark (add) { //this.mark = 0 + 1 this.mark = this.mark + add console.log("mark为：",this.mark) } } } </script> <style lang='scss'> .show{ text-align:center; height:266px; background: #EA5149; margin-bottom:5px; color: #FFFFFF; font-weight:bold; .mark-text{ font-size: 20px; padding:28px; } .mark{ font-size: 88px; } .button{ margin:0 10px; height: 30px; line-height:30px; text-align:center; font-size: 15px; font-weight:bold; background:#EA5149; .btn0{ width: 60px; border-radius: 15px; border:1px dashed #feb600; } .btn1{ width: 60px; border-radius: 15px; border:1px dashed #feb600; } } } .row{ margin: 40px 56px; .button{ width: 70px; height: 70px; line-height:70px; border-radius: 20%; border: none; text-align:center; font-size: 25px; color:#FFFFFF; font-weight:bold; } .right{ background:#EA5149; float: right; } .left{ background:#feb600; margin-right:80px; } } </style>
最后将index.vue文件中的代码贴出来，大家对比一下，自己添加的是否正确
