前端工程化(三)—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:博客园-原创精华区阅读原文】。感谢您的支持!

您可能感兴趣的

从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式... 大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号: Web前端之巅 博客园:htt...
这才是我想要的彩虹进度条- 想在 vue 项目中拥有 instagram 那种绚丽的彩虹进度条? 不如试试这个 vue-ins-progress-bar a vue component of ins-style progress bar ...
How components won the “framework wars” React vs Angular vs Vue: Why it doesn’t matter.2018 marks the end of JavaScript fatigue and the “framework wars” A...
用 vue 写小程序,基于 mpvue 框架重写 weui... 上周美团开源了 mpvue 框架,他基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系。what,小程序可以用 vue 写了?简直有点不太敢确定,花了5分钟看了一下简介,没错,真的可...
Vue.js Component for Tab Panel Tab panel implementation via reusable Vue.js component and CSS. Click the following tabs to see the demo. ...