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

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

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

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

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

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

<template lang="html">
</template>

<script>
export default {
 
}
</script>

<style lang="css" scoped>
</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'
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 <template>
 40 </template>
 41 
 42 <script>
 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 </script>
140 
141 <style scoped>
178 </style>

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据人工智能

2018年 阿里云大牛工程师经历过的20道大数据面试题!

1.Java中Class.forName和ClassLoader.loadClass的区别

3764
来自专栏FreeBuf

如何让微信丢骰子永远只出“666”

每次宅寝室一起点外卖谁下去拿都是个大问题,小编寝室一般选择微信色子谁小谁去拿,但是小编运气不太好 总是输,所以寻思着能不能每次都让色子是6点,皇天不负有心人,果...

3048
来自专栏Java帮帮-微信公众号-技术文章全总结

13.Shell 简介

Shell 简介 Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁。Shell 既是一种命令语言,又是一种程序设计语言。 Shell ...

3105
来自专栏西枫里博客

thinkPHP升级到5.0.13导致update更新出错的问题

话题还得从tinkPHP群消息说起,双十二那天,群内通知官方发布了5.0.13版本。刚好那几天在折腾redis缓存。官方文档中说5.0.13是一个集合诸多改进的...

695
来自专栏闰土大叔

记一次前端大厂面试

链接:https://juejin.im/post/5b9770056fb9a05d2f3692ce

1597
来自专栏编程

Python教学——第七天

如果你前面都跟着文章做了,相信你已经自己在私下也了解了很多知识 如果你之前全都没有跟着做,也没有关系,至少你可以了解一个概念,对将来动手的时候会有一定的帮助 如...

1895
来自专栏技术博文

php性能监测模块XHProf

一,什么是XHProf XHProf是一个分层PHP性能分析工具。它报告函数级别的请求次数和各种指标,包括阻塞时间,CPU时间和内存使用情况。一个函数的开销,可...

3508
来自专栏醒者呆

Go并发模式:管道与取消

关键字:Go语言,管道,取消机制,并发,sync.WaitGroup,包引用,通道,defer,select GO并发模式:管道与取消 简介 Go的并发能...

2816
来自专栏安恒网络空间安全讲武堂

技术分享 | 谈一谈CTF中的python沙箱逃逸

0x01 前言 笔者在最近的CTF比赛中遇到了几次关于python沙箱逃逸的web题目,故此做一些总结。在阅读这篇文章之前,我相信你已经了解关于python的一...

4699
来自专栏用户2442861的专栏

哪个版本的gcc才支持c11

(而我此处的eglibc 2.17,和那人的glibc-2.16.0,都是需要支持c11的gcc的)

972

扫码关注云+社区