Vue学习与使用

简单介绍

本次系统分析与设计期末挣闲钱项目，我负责前端部分的实现。按照项目要求文档中的描述，我使用了vue这一JavaScript框架来完成前端界面的实现。

相关文档中介绍：vue.js是一套构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

本篇博客主要介绍vue.js的基本内容。

安装与运行

使用的是windows10的开发环境，安装过程如下：

• 在vue.js官网下载vue.min.js然后使用”<script>”导入或使用npm进行下载。

• 使用npm下载时，建议使用npm淘宝镜像，然后用“cnpm install vue”进行下载。

• 使用cnpm安装好后，运行“cnpm install”以及“cnpm run dev”启动项目。

基本内容

• vue.js的某些基本属性等不详细介绍，许多网站或博客中已经介绍过了。

• 介绍一下使用v-model进行双向数据绑定：

  • v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

  • 使用v-model进行了数据绑定后，使用{{…}}来显示文本。

  • 其他网站样例代码：

      <div id="app">
          <p>{{ message }}</p>
          <input v-model="message">
      </div>		    
      <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Runoob!'
        }
      })
      </script>
    

• 使用v-bind：class 或 v-bind：style 来实现不同组件的样式改变

• 使用v-if和v-show来控制不同情况下的某些内容是否显示。

  • 文本输入为空时，在对应框旁边弹出提示。

      <p v-if="taskInfo.introduction == ''&& !newPublish" style="margin-top:45px; margin-left:20px; font-size:12px; color:#ff0000" >输入不能为空</p>
    

• 在项目中的任务发布页面，需要重复显示多个任务，使用v-for来进行循环实现。

  • 任务发布页面任务栏实现：

          <div v-for="item in taskItems">
              <div class="taskCard" @click="jumpToTaskDetail(item.task_id)">
                  <div class="taskInfo">
                      <span style="font-weight: bold">任务类型:</span>
                      <span>{{item.type}} </span>
                  </div>
                  <div class="taskTitle">
                      <span>{{item.title}}</span>
                  </div>
                  <div class="taskInfo">
                      <span style="font-weight: bold">任务金额:</span>
                      <span >{{item.money}}</span>
                  </div>
                  <div class="taskIntro">
                      <span>{{item.introduction}} </span>
                  </div>
                  <div class="taskState">
                      <span>{{item.state}} </span>
                  </div>
              </div>
          </div>
    

页面截图

• 任务搜索界面

• 任务详情界面