Vue.js

Vue 001 构建一个投票界面

2020-10-10 19:23发布

站内文章 / Vue.js
788 0 0

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

 

 

推荐使用工具：

 

sublime Text    谷歌浏览器

 

搭建主界面：

 

<!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方法：

 

效果预绑定：




作者：dayAndnight2018

链接：https://blog.csdn.net/Day_and_Night_2017/article/details/85222780

来源：CSDN
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。