2.3【微信小程序全栈课程】index页面完善--vue文件代码解析

末蓝、 2023-06-07 14:27 9阅读 0赞

这一节我们继续完善index页面，编辑src/pages/index/index.vue文件，在实际项目开发中，让大家继续了解vue

#### 1、template 部分 ####

###### （1）修改template部分的代码 ######

template里面包含html代码，对应着原生小程序框架里中的.wxml文件。我们将index.vue文件中的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部分的代码修改成下面的代码

###### （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部分的代码修改成下面的代码。

样式部分与我们的代码逻辑关系不大，我们不做详细讲解了，写代码的时候，直接粘贴就可以了。

> Vue官方文档  
> [https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide]

如果以前没有接触过vue，可能看到vue代码会有点懵，建议花点时间看一下vue 的官方文档，对vue有一个大概的认识，不然下面的学习可能会比较困难。

#### 4、测试效果 ####

先在项目目录中运行`npm run dev`

~/WeChatProjects/truth_hold$ npm run dev

在微信开发者工具中点击加减按钮，会看到以下效果

![format_png][]

#### 5、index.vue代码示例 ####

最后将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>

> **作者：猫宁一**  
> 95后全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习！热爱编程！  
> 可关注【猫宁一】公众号领取我所有全栈项目代码哦~
> 
> **点击查看课程目录：**[微信小程序全栈开发课程目录][Link 1]

![format_png 1][]

[https_cn.vuejs.org_v2_guide]: https://cn.vuejs.org/v2/guide/
[format_png]: /images/20230601/c12c789faeb7492c842b7db494ca038f.png
[Link 1]: https://blog.csdn.net/shine_a/article/details/102566724
[format_png 1]: /images/20230601/d6eb50bd26534fdda9f10fd09187dbdf.png