从0开始,构建前后端分离应用

导航

前端工程化(一)---工程基础目录搭建

前端工程化(二)---webpack配置

前端工程化(三)---Vue的开发模式

通过前两部分的总结,项目具备了一个可以运行的前端工程。接下来的工作就是具体的功能开发了,我选择了Vue作为前端的框架,使用iView作为UI库。

建议在使用Vue开发之前一定要通读 Vue官网教程 对Vue中的基本概念及整体的思想有一个基本的认识。最好的教程莫过于官方文档了,不要上来就各种百度,从一些只言片语中摸索,这样会少走弯路。

个人感觉使用Vue进行开发,首先要改变以往前端开发中形成的思维模式。对于页面元素的操作,由原有的dom操作转换为数据操作。

dom操作的事情,Vue已经替我们干了,我们只需要关注数据就可以了。页面元素同数据进行了绑定(实际上是Vue模板的元素,只不过Vue的设计拥抱原生的html语法,看上去模板的元素与原生的html元素长得一样),当数据变化的时候,dom也随之变化。

1、Vue的开发模式:定义一个扩展名为.vue的文件,其中包含三部分内容,模板、js、样式

  1. <template lang="html">
  2. </template>
  3.  
  4. <script>
  5. export default {
  6.  
  7. }
  8. </script>
  9.  
  10. <style lang="css" scoped>
  11. </style>

实际的例子:

  1. <template>
  2. <Modal v-model="showFlag" :width="width" :mask-closable="false" :closable="false">
  3. <p slot="header" style="color:#f60;text-align:center">
  4. <Icon :type="customHeader.icon"></Icon>
  5. <span>{{customHeader.title}}</span>
  6. </p>
  7. <div style="text-align:center">
  8. <slot name="content">请定义具体显示内容</slot>
  9. </div>
  10. <div slot="footer">
  11. <Button type="text" size="default" :loading="modal_loading" @click="cancel1">取消</Button>
  12. <Button type="primary" size="default" :loading="modal_loading" @click="confirm1">确认</Button>
  13. </div>
  14. </Modal>
  15. </template>
  16.  
  17. <script>
  18.  
  19. export default {
  20. data: function () {
  21. return {
  22. modal_loading: false,
  23. showFlag: false,
  24. onConfirm: 'confirm',
  25. onCancel: 'cancel',
  26. updateFlag:false //是否为新增操作
  27. }
  28. },
  29. props: {
  30. customHeader: {
  31. title: '标题',
  32. icon: 'information-circled'
  33. },
  34. width: {
  35. type: Number,
  36. default: 500
  37. }
  38. },
  39. methods: {
  40. confirm1() {
  41. this.$emit(this.onConfirm,this.updateFlag)
  42. },
  43. cancel1() {
  44. this.$emit(this.onCancel)
  45. this.showFlag = false
  46. },
  47. showAdd() {
  48. this.updateFlag = false
  49. this.showFlag = true
  50. },
  51. showEdit(){
  52. this.updateFlag = true
  53. this.showFlag = true
  54. },
  55. hide() {
  56. this.showFlag = false
  57. }
  58. }
  59.  
  60. }
  61. </script>
  62.  
  63. <style scoped>
  64.  
  65. </style>

2、定义组件之间共享的数据

在根Vue中定义数据

  1. import Vue from 'vue'
  2. import App from './app.vue'
  3.  
  4. //资源
  5. import Data from './assets/data/data.json'
  6. new Vue({
  7. data:{
  8. 68 dict:Data
  9. 69 }, render: h => h(App)
  10. }).$mount('#app')

使用:在子组件中,通过this.$root.dict.fileServerPath引用

  1. <template>
  2. </template>
  3.  
  4. <script>
  5. export default {
  6. data() { },
  7. methods: { },
  8. watch: {
  9. defaultFiles: function (newV, oldV) {
  10. debugger
  11. newV.forEach(e => {
  12. e.url = this.$root.dict.fileServerPath + e.url
  13. e.status = 'finished'
  14. this.$refs.upload.fileList.push(e)
  15. })
  16. }
  17. },
  18. mounted() {
  19. this.uploadList = this.$refs.upload.fileList;
  20. }
  21. }
  22. </script>
  23.  
  24. <style scoped>
  25. </style>

3、定义Vue公共组件的方式

方式一

  1. //公共组件
  2. import wolfTotem from './components/common/WolfTotem.js'
  3. //将组件暴露为全局的句柄
  4. window.WT = wolfTotem

方式二

  1. import MyLayout from './layout.vue'
  2.  
  3. const _layout = {
  4. install:function(Vue){
  5. Vue.component('WtLayout',MyLayout)
  6. }
  7. }
  8.  
  9. export default _layout
  1. //自定义组件
  2. import WtLayout from './components/layout/layout.js'
  3.  
  4. //织入
  5. Vue.use(WtLayout)

方式三

  1. import HttpUtil from './assets/js/httpUtil.js'
  2. Vue.prototype.$http = HttpUtil

前端的开发围绕着上面的方式进行

前端工程化(三)---Vue的开发模式的更多相关文章

  1. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  2. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...

  3. Node.js安装使用-VueCLI安装使用-工程化的Vue.js开发

    作者 | Jeskson 来源 | 达达前端小酒馆 搭建Node.js环境 什么是Node.js简介呢?它是一个基于JavaScript的运行环境,Node.js发布于2009年5月,对Chrome ...

  4. 性能测试学习 第八课--LR12中针对WebServices协议的三种脚本开发模式

    一,webservices协议简介 webservices是建立可交互操作的分布式应用程序的新平台,它通过一系列的标准和协议来保证程序之间的动态连接, 其中最基本的协议包括soap,wsdl,uddi ...

  5. LR12中针对WebServices协议的三种脚本开发模式

    一,webservices协议简介 webservices是建立可交互操作的分布式应用程序的新平台,它通过一系列的标准和协议来保证程序之间的动态连接, 其中最基本的协议包括soap,wsdl,uddi ...

  6. 前端工程化基础-vue

    由浅入深支持更多功能 1.安装最新版本的node.js和NPM,并了解NPM基本用法. 2.创建一个目录demo.使用npm 初始化配置: npm init  ,执行后会有一系列选项,可按回车快速确认 ...

  7. 试玩mpvue,用vue的开发模式开发微信小程序

    mpvue,美团开源的vue文件转换成小程序的文件格式,今天玩了一下练练手 mpvue文档地址: http://mpvue.com/mpvue/#_1 暂时有几个点需要注意的: 1.新增页面需要重新启 ...

  8. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

  9. 前端工程化(二)---webpack配置

    导航 前端工程化(一)---工程基础目录搭建 前端工程化(二)---webpack配置 前端工程化(三)---Vue的开发模式 前端工程化(四)---helloWord 继续上一遍的配置,本节主要记录 ...

随机推荐

  1. JVM学习笔记 -- 从一段几乎所有人代码都会犯错的代码开始

    废话不多说 看看这段代码.告诉我结果: import java.io.*; class Test { public static Test t = new Test(); public Test(){ ...

  2. App热补丁动态修复技术介绍

    安卓App热补丁动态修复技术介绍 来自qq空间团队:微信号qzonemobiledev QQ空间终端开发团队 1.背景 当一个App发布之后,突然发现了一个严重bug需要进行紧急修复,这时候公司各方就 ...

  3. MVC学习笔记(一)

    首先感谢慕课网这个平台提供给我的学习机会,感谢PengCheng老师的"MVC架构模式分析与设计课程". 1.数组的声明: $controllerAllow = array('te ...

  4. apache 配置详解

    三种MPM介绍                                                                               Apache 2.X  支持 ...

  5. Java 条形码生成(一维条形码)

    utl:http://mianhuaman.iteye.com/blog/1013945 在这里给大家介绍一个java 生成条形码 jbarcode.jar 生成条形码 支持EAN13, EAN8, ...

  6. Systemc在VC++2010安装方法及如何在VC++2010运行Noxim模拟器

    Systemc在VC++2010的安装方法可以参考文档"Systemc with Microsoft Visual Studio 2008.pdf".本文档可以在"htt ...

  7. 使用IO映射的方式获取tiny4412板子上的ID号

    在以前的文章中,有一篇 基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号 在那篇文章中,具体可以参考.那时候我使用了简单的字符设备驱动框架,最终的ID号通过read方法可将 ...

  8. SharePoint 自定义列表页面定制续—[保存模板后不能正常使用]

    背景:SharePoint列表的四个基本页样式不是特别的好,所以很多情况都需要重新定制,然而经过定制后,又发生了新的问题,就是存成模板,再建新的列表的时候,定制的页面不能正常显示了. 1. 定制后的页 ...

  9. 面试之路(13)-android apk之间共享数据的方式以及shareUserId详解

    1.通过content Provider/sharedPreferrence 2.通过shareUserId 我们详细介绍一下shareUserId: Android App Sandbox(andr ...

  10. 恶补web之六:javascript知识(1)

    javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...