从零开始自学vue3笔记（三）：vue文件格式简要说明

以本人写的一个vue抽奖页面为例：

<template>
<div id="indexDiv">
  <div id="header">
     <h1 id="title">{{ msg }}</h1>
  </div>
  <div id="body">
     <h1 id="title">{{randomList}}</h1>
  </div>
  <div id="foot">
     <button @click="setTimer()">开始</button>
     <button @click="cleanTimer()">停止</button>
  </div>
</div>
</template>

<script>

import {getArray} from '../../api/randomList.js'

export default {


  name: 'HelloWorld',

  props: {
    msg: String
  },
  data () {
        return {
          randomList: '点击按钮开始抽奖',
          timer: ''
        }
  },  
  methods: {

    beginRandomList(list){
        console.log("开始抽奖");
        let num = parseInt(Math.random()*list.length);
        if(num < 0){
          num = 0;
        }else if(num > list.length -1){
          num = list.length - 1;
        }
        this.randomList = list[num];
    },

    setTimer(){
      this.timer = setInterval(() => {this.beginRandomList(getArray());}, 50);
    },
    cleanTimer(){
      clearInterval(this.timer);
    }

  },
  components: {

  },


    created () {
    },
    mounted () {
      console.log("indexVue");
      console.log(getArray());
    },
    watch: {
    }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#indexDiv {
  background-image: url(../../assets/random.jpeg);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
}
#title {
  color: yellow;
}
#header {
  height: 20%;
}
#body {
  height: 60%;
  font-size: 40px;
}
#foot {
  height: 20%;
}

button {
  background-image: url(../../assets/button.png);
  background-size: 100% 100%;
  margin: 10px;
  color: gray;
  font-weight:500;
  font-size: 25px;
  padding: 10px;
  border: 1px solid white;
  border-radius: 10px;
  outline: none;
  width: 100px;
}

</style>

一、template标签

其中可以放置页面的主要内容，例如增加div标签、h1标签等。

二、style标签

其中可以放置本页面需要用到的样式。
<style scoped>，使用scoped后，可以确保样式只用于本vue文件。
基本语法是，#是按id指定样式；.是按class指定样式；直接用文字的话是按标签指定样式（例如上方指定button标签的样式）。

其中，#indexDiv里是with:100%,height:100%的用法，需要position: fixed后才会生效。

三、script标签

其中可以放置本页面需要用到的js内容。
大部分都配置在了export default中。其中：

1.name

自己起的vue组件的名称，其它地方需要名称时用。

2.props

声明其它页面传入这个页面的参数；页面使用时可以用{{}}。

3.data

声明这个页面需要用到的参数；页面使用时可以用{{}}，方法中使用时可以用this。

4.methods

声明这个页面需要用到的js方法；如果一个方法中需要调用另一个方法，用this指定另一个方法。

5.components

声明这个页面需要用到的其它页面组件；可以先import一个vue文件，然后在这里申明，然后就可以在页面中使用了。
例如：

import HelloWorld from './pages/index/Index.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

<template>
  <HelloWorld msg="MyVue"/>
</template>

6.created

页面刚创建时，就会执行这个方法；可以在其中放些初始化用的js方法。

7.mounted

页面刚出现时，就会执行这个方法。（区别是，例如，返回上一个页面时，如果有缓存，那么上一个页面就不会执行created方法，但是会执行mounted方法）

8.watch

可以监听某个数据是否发生了变化，如果变化后就会执行这个方法。

9.引入其它js文件中的方法

例如，上方有：

import {getArray} from '../../api/randomList.js'

这个的意思是从randomList.js中，引入getArray方法；
然后就可以使用了：

console.log(getArray());

对应的randomList.js中，需要使用export语句导出这个方法，才能被其它页面import到：

export function getArray(){
  var arr = ["a","b","c","d","e","f","g"];  
  return arr;  
}

10.附：vue抽奖页面效果图