vuejs+Element ui初学练手项目

vuejs+Element ui初学练手项目

简单的24分栏html页面
1.CDN模式引入vue和element

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.定义方法为asnyc异步，原生js api fetch方法向url GET数据, 这里使用https://randomuser.me/api，可以随机返回一些虚拟人物的姓名和头像等信息。

async changeProfile(){
          const res = await fetch('https://randomuser.me/api')
          const {results} = await res.json() //结果存入results数组
          console.log(results[0].picture.large) //打印数组中第一个元素的信息
          console.log(results[0].gender)
          this.circleUrl=results[0].picture.large
      }

3.在vue data对象里设置一下我们预定义的var。

data:{
        circleUrl:'', //图片的网址
        name:'',//人物的姓名
        
      
  },

4.Element ui设计网页的布局，并填充内容
没有使用container容器布局，只使用了简单的24栏layout布局

<el-row>
            <el-col :span="12" :offset="12"><div class="grid-content bg-purple"><el-avatar :size="100" :src="circleUrl"></el-avatar></div></el-col>
            

          </el-row>
          <el-row :gutter="12">
            <el-col :span="12" :offset="12"><div class="grid-content bg-purple">姓名：{{name}}</div></el-col>
            
          </el-row>
        </el-row>
          <el-col :span="12" :offset="12">
            <div class="grid-content bg-purple">
            <el-button type="primary" v-on:click="changeProfile">更换人物</el-bsdutton>
          </div>
        </el-col>
        </el-row>

最终结果如下，点击更换人物button之后，人物的姓名和图片会相应的改变

一个不使用vuejs框架的简单小app至此完成