今天写代码，使用Vue从数据库中动态获取数据，循环生成到页面。一直都会用，今天好好捋一下思路。

---

一：定义属性

首先在Vue实例中定义集合用于接收数据。注意：如果使用组件则必须使用data()回调函数。这点涉及到vue的虚拟DOM树，有兴趣的可以去看一下，这里就不赘述了。

//我这里使用的是组件，使用data回调函数
  data() {
    return {
      //newList是自定义的名字
      newList: []
    }
  }


//如果使用普通的Vue实例（组件也是Vue实例，只不过可以重复使用）,可以使用普通的方式
  data : {
     ...
  }

---

二：创建一个初始化函数

用于发送Ajax请求，以及给属性赋值。请求的话我用到的有两种方式(1:模块化导入  2:创建请求)

  ①这是第一种方式 (需要模块化导入js文件)

//在Vue提供的methods中创建初始化函数
methods: {
    //初始化函数(名字自定义)
    initData(){
      getList().then(res => {
        this.newList= res.data
      })
    }
}

  ②第二种方式(创建ajax请求)

methods: {
    //初始化函数
    initData(){
      //页面没有导入，手动调用ajax
      request({
        url: `/api/laws/Country`,
        method: 'get',
        //data: 数据
      }).then(res => {
        //给属性赋值
        this.getList = res.data
      })
    }
}

---

三：调用初始化

初始化方法写好了，并没有万事大吉。你只是创建好了，但是却没有调用，这不是耍流氓吗。所以注意：我们这时候要添加一个钩子函数：created。这个函数是我们在生成一个vue实例后，会执行，一般用来执行初始化。(钩子函数其他还有，感兴趣的可以去看一下)

//调用初始化
//注意：要和methods同级 且要加this
  created() {
    this.initData()
  },
  methods: {
    initData(){
    }      
  }

---

四：页面渲染

经过上面三步，我们数据获取已经完成了，没Bug的话(狗头)。接下来我们需要把数据渲染到页面，使用v-for指令。

 

//newList：这个就是我们定义的属性，进行循环
<el-option v-for="item in newList">
        //绑定数据
        {{ item.name }}
 </el-option>

 

---

好啦，这样就可以根据数据库中的数据动态生成到vue页面啦。有问题和建议可以在评论发表哦，看完点个赞，比心。