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

综合技术 2018-05-16 阅读原文

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

导航

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

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

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

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

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

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

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

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





export default {
 
}




实际的例子:


 1 
 2     
 3         

4 5 {{customHeader.title}} 6

7
8 请定义具体显示内容 9
10
11 12 13
14 15 16 17 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 62 63 64 65 View Code

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

在根Vue中定义数据

 1 import Vue from 'vue'
 2 import App from './app.vue'
20 
21 //资源
22 import Data from './assets/data/data.json'
66 new Vue({
67     data:{
68       dict:Data
69     },71     render: h => h(App)
72 }).$mount('#app')

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

  1 
 40 
 41 
 42 
 43     export default {
 44         data() { 79         },
 80         methods: {124         },
125         watch: {
126             defaultFiles: function (newV, oldV) {
127                 debugger
128                 newV.forEach(e => {
129                     e.url = this.$root.dict.fileServerPath + e.url
130                     e.status = 'finished'
131                     this.$refs.upload.fileList.push(e)
132                 })
133             }
134         },
135         mounted() {
136             this.uploadList = this.$refs.upload.fileList;
137         }
138     }
139 
140 
141 
178 

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

方式一

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

方式二

import MyLayout from './layout.vue'

const _layout = {
  install:function(Vue){
    Vue.component('WtLayout',MyLayout)
  }
}

export default _layout
//自定义组件
import WtLayout from './components/layout/layout.js'

//织入
Vue.use(WtLayout)

方式三

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

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

博客园-原创精华区

责编内容by:博客园-原创精华区阅读原文】。感谢您的支持!

您可能感兴趣的

Vue项目使用CDN优化首屏加载 前言 作为一个网站应用,加载速度是非常重要的。加载速度,一个是程序的合理安排,如以组件按需加载,一个是js、css等资源的异步加载。 在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么ven...
Vue Native Update : Latest In The Mix Vue Native Update : Latest In The Mix Error mapping now live! More developmental features introduced. A nnounced in January 2018, Vue Nati...
Element 2.3.8 发布,基于 Vue 2.0 的桌面端组件库... Element 2.3.8 发布了。主要更新内容如下: 修复 type 为 dates 的 DatePicker 在选择非当前月的日期后,面板会跳转至当前月的问题, #10973 修复可清空的只读 Input 仍会显示清空图标的问题, #10912 ...
Vue.js的computed和watch是如何工作的? Vue的组件对象支持计算属性computed和侦听属性watch两个选项,但这两个属性用法有什么异同以及它们底层实现的原理是什么?本文将用例子结合源码来进行总结。 本文将从以下六个模块进行总结: computed和watch定义 computed和watch用法异同 wa...
Vue系列之computed使用详解(附demo,不定期更新)... 前言:工作中用Vue技术开发项目有一段时间了,独立开发完成项目基本没什么问题。可是就是在在开发过程中遇到问题常常是通过零散的搜索或者官方文档来解决,这样的现象就说明自己对Vue根本没有一套自己理解后的系统知识的框架。为了建立这套完整的Vue知识框架,开始了《我眼中的Vue》系列文章的写作,本系列是...