Vue 001 构建一个投票界面

目标：构建一个投票界面显示，票数高的在上方，票数低的在下方，可以点击进行投票，并动态显示。推荐使用工具： sublime Text 谷歌浏览器搭建主界面： <!DOCTYPE html><html><head><link rel=&q

程序员·小李

3038人浏览 · 2018-12-23 15:26:31

程序员·小李 · 2018-12-23 15:26:31 发布

目标：构建一个投票界面显示，票数高的在上方，票数低的在下方，可以点击进行投票，并动态显示。

搭建主界面：

<!DOCTYPE html>
<html>
  <head>
    <!--引入css文件-->
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
    <link rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
    <link rel="stylesheet"
    href="../public/styles.css" />
  </head>
  <body>
    <div id="app">
      <h2 class="title has-text-centered dividing-header">UpVote!</h2>
    </div>
    <!--引入vue，引入两个js文件-->
    <script src="https://unpkg.com/vue"></script>
    <script src="./seed.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

效果如图：

添加一个投票详情信息：

<!DOCTYPE html>
<html>
  <head>
    <!--引入css文件-->
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css">
    <link rel="stylesheet"
    href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
    <link rel="stylesheet"
    href="../public/styles.css" />
  </head>
  <body>
    <div id="app">
      <h2 class="title has-text-centered dividing-header">UpVote!</h2>
      <div class="section">
        <article class="media">
          <figure class="media-left">
            <img class="image is-64x64"
            src="../public/images/submissions/image-yellow.png">
          </figure>
          <div class="media-content">
            <div class="content">
            <p>
            <strong>
            <a href="#" class="has-text-info">Yellow Pail</a>
            <span class="tag is-small">#4</span>
            </strong>
            <br>
            On-demand sand castle construction expertise.
            <br>
            <small class="is-size-7">
            Submitted by:
            <img class="image is-24x24"
            src="../public/images/avatars/daniel.jpg">
            </small>
            </p>
            </div>
          </div>
          <div class="media-right">
            <span class="icon is-small">
              <i class="fa fa-chevron-up"></i>
              <strong class="has-text-info">10</strong>
            </span>
          </div>
        </article>
      </div>
    </div>
    <!--引入vue，引入两个js文件-->
    <script src="https://unpkg.com/vue"></script>
    <script src="./seed.js"></script>
    <script src="./main.js"></script>
  </body>
</html>

效果如图：

采用数据驱动进行渲染：

定义数据（这里是写死的数据，实际上从服务端获取）：

定义一个Vue实例，el确定Vue元素，data是数据：

数据绑定（使用“{{}}”进行数据绑定）：

注：对于html的href，id，src等属性进行绑定的时候，需要配合v-bind:进行使用，如v-bind:id="{{}}"

效果如图：

循环绑定（对于重复出现的部分循环绑定）：

article是包含的整个循环的部分。

循环的基本语法是：

为了避免冲突或者重复，我们为元素指定key：

修改原来投票区的代码：

<div class="section">
  <article v-for="submission in submissions" v-bind:key="submission.id"
  class="media">
    <figure class="media-left">
      <img class="image is-64x64"
      v-bind:src="submission.submissionImage">
    </figure>
    <div class="media-content">
      <div class="content">
        <p>
          <strong>
            <a v-bind:href="submission.url" class="has-text-info">
              {{ submission.title }}
            </a>
            <span class="tag is-small">#{{ submission.id }}</span>
          </strong>
          <br>
          {{ submission.description }}
          <br>
          <small class="is-size-7">
          Submitted by:
          <img class="image is-24x24"
          v-bind:src="submission.avatar">
          </small>
        </p>
      </div>
    </div>
   <div class="media-right">
   <span class="icon is-small">
      <i class="fa fa-chevron-up"></i>
      <strong class="has-text-info">{{ submission.votes }}</strong>
   </span>
  </div>
  </article>
</div>

显示效果：

对投票列表进行排序：

修改循环节点所使用的数据源：

效果如图：

Vue事件绑定：

定义Vue方法：

效果预绑定：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^