master

分支 (1)

管理

管理

master

vue-learning-notes
/
h5-vue.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>h5-vue/京麦移动端ui</title>
  <!-- 样式重置 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css">
  <!-- 京麦移动端ui, 引入样式 -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/wot-design@2.1.0/lib/theme-default/index.css">
</head>

<body>
  <div id="app">
    <p>{{ word }}</p>
    <br>
    <br>
    <br>

    <wd-button>主要按钮</wd-button>
    <wd-button type="success">成功按钮</wd-button>
    <wd-button type="info">信息按钮</wd-button>
    <wd-button type="warning">警告按钮</wd-button>
    <wd-button type="error">危险按钮</wd-button>
    <br>
    <br>
    <br>

    <wd-picker :columns="columns" label="单列选项" v-model="value"></wd-picker>
    <br>
    <br>
    <br>

    <wd-tabbar v-model="tabbar">
      <wd-tabbar-item icon="wd-icon-bags">服务</wd-tabbar-item>
      <wd-tabbar-item icon="wd-icon-dong">咚咚</wd-tabbar-item>
      <wd-tabbar-item icon="wd-icon-chat">我</wd-tabbar-item>
    </wd-tabbar>
    <br>
    <br>
    <br>

    <p>axios获取数据</p>
    <wd-card :title="item.title" v-for="item in list">
      {{ item.source }}
      <wd-button slot="footer" size="small" plain>查看详情</wd-button>
    </wd-card>

  </div>
  <!-- vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <!-- 京麦移动端ui 引入组件库 -->
  <script src="//cdn.jsdelivr.net/npm/wot-design@2.1.0/lib/index.js"></script>
  <!-- axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        word: 'hi,wzc!',
        columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
        value: '',
        tabbar: 0,
        list: []
      },
      created: function () {
        this.getList()
      },
      methods: {
        getList() {
          // 为给定 ID 的 user 创建请求
          axios.get('http://localhost:3000/api/list')
            .then((response) => {
              console.log(response.data.data);
              this.list = response.data.data
            })
            .catch((error) => {
              console.log(error);
            });
        }
      }
    })
  </script>
</body>

</html>