vue开发鸿蒙,vue 鸿蒙

Vue组件开发有哪些技巧

这次给大家带来Vue组件开发有哪些技巧,Vue组件开发的注意事项有哪些,下面就是实战案例,一起来看一下。

在凤冈等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供做网站、网站制作 网站设计制作按需定制开发,公司网站建设,企业网站建设,高端网站设计,成都营销网站建设,外贸网站建设,凤冈网站建设费用合理。

Vue 单文件组件开发

当使用vue-cli初始化一个项目的时候,会发现src/components文件夹下有一个HelloWorld.vue文件,这便是单文件组件的基本开发模式。

// 注册

Vue.component('my-component', {

template: 'pA custom component!/p'

})

// 创建根实例

new Vue({

el: '#example'

})

接下来,开始写一个dialog组件。

Dialog

目标对话框组件的基本样式如图:

根据目标样式,可以总结出:

dialog组件需要一个titleprops来标示弹窗标题

dialog组件需要在按下确定按钮时发射出确定事件(即告诉父组件确定了)

同理,dialog组件需要发射出取消事件

dialog组件需要提供一个插槽,便于自定义内容

那么,编码如下:

template

p class="ta-dialogwrapper"

p class="ta-dialog"

p class="ta-dialogheader"

span{{ title }}/span

i class="ios-close-empty" @click="handleCancel()"/i

/p

p class="ta-dialogbody"

slot/slot

/p

p class="ta-dialogfooter"

button @click="handleCancel()"取消/button

button @click="handleOk()"确定/button

/p

/p

/p

/template

script

export default {

name: 'Dialog',

props: {

title: {

type: String,

default: '标题'

},

},

methods: {

handleCancel() {

this.$emit('cancel')

},

handleOk() {

this.$emit('ok')

},

},

}

/script

这样便完成了dialog组件的开发,使用方法如下:

ta-dialog

title="弹窗标题"

@ok="handleOk"

@cancel="handleCancel"

p我是内容/p

/ta-dialog

这时候发现一个问题,通过使用v-if或者v-show来控制弹窗的展现时,没有动画!!!,看上去很生硬。教练,我想加动画,这时候就该transition组件上场了。使用transition组件结合css能做出很多效果不错的动画。接下来增强dialog组件动画,代码如下:

template

transition name="slide-down"

p class="ta-dialogwrapper" v-if="isShow"

// 省略

/p

/transition

/template

script

export default {

data() {

return {

isShow: true

}

},

methods: {

handleCancel() {

this.isShow = false

this.$emit('cancel')

},

handleOk() {

this.isShow = true

this.$emit('ok')

},

},

}

/script

可以看到transition组件接收了一个nameprops,那么怎么编写css完成动画呢?很简单的方式,写出两个

关键class(css 的 className)样式即可:

.slide-down-enter-active {

animation: dialog-enter ease .3s;

}

.slide-down-leave-active {

animation: dialog-leave ease .5s;

}

@keyframes dialog-enter {

from {

opacity: 0;

transform: translateY(-20px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

@keyframes dialog-leave {

from {

opacity: 1;

transform: translateY(0);

}

to {

opacity: 0;

transform: translateY(-20px);

}

}

就是这么简单就开发出了效果还不错的动效,注意transition组件的name为slide-down,而编写的动画的关键className为slide-down-enter-active和slide-down-leave-active。

封装Dialog做MessageBox

Element的MessageBox的使用方法如下:

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}).then(() = {

this.$message({

type: 'success',

message: '删除成功!'

});

}).catch(() = {

this.$message({

type: 'info',

message: '已取消删除'

});  

});

看到这段代码,我的感觉就是好神奇好神奇好神奇(惊叹三连)。仔细看看,这个组件其实就是一个封装好的dialog,

接下来,我也要封装一个这样的组件。首先,整理下思路:

Element的使用方法是this.$confirm,这不就是挂到Vue的prototype上就行了

Element的then是确定,catch是取消,promise就可以啦

整理好思路,我就开始编码了:

import Vue from 'vue'

import MessgaeBox from './src/index'

const Ctur = Vue.extend(MessgaeBox)

let instance = null

const callback = action = {

if (action === 'confirm') {

if (instance.showInput) {

instance.resolve({ value: instance.inputValue, action })

} else {

instance.resolve(action)

}

} else {

instance.reject(action)

}

instance = null

}

const showMessageBox = (tip, title, opts) = new Promise((resolve, reject) = {

const propsData = { tip, title, ...opts }

instance = new Ctur({ propsData }).$mount()

instance.reject = reject

instance.resolve = resolve

instance.callback = callback

document.body.appendChild(instance.$el)

})

const confirm = (tip, title, opts) = showMessageBox(tip, title, opts)

Vue.prototype.$confirm = confirm

至此,可能会疑惑怎么callback呢,其实我编写了一个封装好的dialog并将其命名为MessageBox,

它的代码中,有这样两个方法:

onCancel() {

this.visible = false

this.callback (this.callback.call(this, 'cancel'))

},

onConfirm() {

this.visible = false

this.callback (this.callback.call(this, 'confirm'))

},

没错,就是确定和取消时进行callback。我还想说一说Vue.extend,代码中引入了MessageBox,

我不是直接new MessageBox而是借助new Ctur,因为这样可以定义数据(不仅仅是props),例如:

instance = new Ctur({ propsData }).$mount()

这时候,页面上其实是还没有MessageBox的,我们需要执行:

document.body.appendChild(instance.$el)

如果你直接这样,你可能会发现MessageBox打开的时候没有动画,而关闭的时候有动画。解决方法也很简单,

appendChild的时候让其仍是不可见,然后使用类这样的代码:

Vue.nextTick(() = instance.visible = true)

这样就有动画了。

总结

通过transition和css实现不错的动画。其中,transition组件的name决定了编写css的两个关键类名为[name]-enter-active和[name]-leave-active

通过Vue.extend继承一个组件的构造函数(不知道怎么说合适,就先这样说),然后通过这个构造函数,便可以实现组件相关属性的自定义(使用场景:js调用组件)

js调用组件时,为了维持组件的动画效果可以先document.body.appendChild 然后Vue.nextTick(() = instance.visible = true)

vuejs在前端开发起到什么作用

jQuery的诸多局限性导致前端工程师的发展受到了很多的限制,只能做一些表面性的工作,并不能实现前后端分离开发。

而近期出现的Vue,它给前端带来了无限的可能和改变。

改变一:真正意义上的前端工程师

之前开发都是前端做静态页面,把页面给到后台程序员改成jsp、php、asp等等...一顿乱改,一顿塞变量,做完以后页面样式乱七八糟,最后你再调整css。说白了你会html,css就行了,基本没什么门槛,可以这么说。

有了Vue和Node的前端工程化以后,前端工程师能做的事情越来越多,后台人员只需要抛过来一个Api,剩下的就可以都交给前端了。

改变二:服务端渲染VS客户端渲染

传统的jsp、php或是模板渲染也好,都是服务端渲染,就是客户端一个请求,服务器直接把整个页面返回给你,简单粗暴。(Spring Boot是通过模板引擎,由服务端完成的渲染工作)

但是vue开发是前后端分离开发,通过api进行交互,客户端请求服务器返回json数据,由客户端进行渲染。

不仅减轻了服务器的压力速度更快而且渲染更加优雅,代码更容易维护。

改变三:渲染优雅,代码易维护

jQuery是通过DOM来控制数据,不仅笨重而且渲染数据特别麻烦,而 Vue是通过数据来控制状态,通过控制数据来控制渲染,变量可以直接写在标签中,渲染更加优雅。

因为前端代码和后台代码都是分开的,所以项目更容易维护,开发效率更高。

改变四:项目工程化,结合npm直接安装第三方库

Vue让前端项目更加工程化,同时也规范了前端工程师的代码,而node和npm的加入才是vue能蓬勃发展的重要原因。

Node为Vue提供了本地server和模块化开发的思路,npm更能安装Vue项目需要的模块,配合Vue使用,比如Moment.js Element ui vuex等等,这些第三方库让Vue有了无限的可能。

敲黑板(补充下):传统开发jQuery是命令式编程,现代框架开发是函数式编程。现代框架开发,可以使用Webpack(当然使用jQuery也可以使用Webpack),可以使用人家提供的现成的脚手架,比方说create-react-app,vue-cli。极大提高了开发的效率,并且可以使用最新的ES6、ES7语法进行开发,在编码体验上,就提高了一个档次。

总结

知其然,知其所以然,没有最好的框架,只有最合适的框架!

VUE在前端里面主要是做什么的呢 ?

Vue是一个js框架。什么叫框架?个人理解是对原生JS ,html,css的功能进行封装之后形成的一个语言。

比如,你需要盖一座房子,你用原生js,html,css写代码相当于你用手一块砖一块砖地垒。而使用Vue,Vue已经给你了一面墙,一根房梁,一扇门,你需要做的是把门墙梁拼成房子。它帮助你提高开发效率。你只需要按照它的规矩来写三段部分:template、script、style就能完成平时html、css、js的功能。页面视图展示,前后数据交互都完成了。

之后使用webpack等工具,会将vue语法转换为html,js,css。

其实使用Vue开发和原生html,css,js开发步骤逻辑是一样的。

除此之外,vue还有动态绑定,数据驱动等等特点,这些都是题外话。我相信我的回答已经解决了你的问题,如果感觉有帮助,请采纳我的答案。

Vue项目开发过程中遇到的坑

1 从浏览器中了解这个应用的呈现结果,对整个应用具有的大功能模块有个大致了解,比如包含欢迎页、用户管理、业务数据查询等;

2 学习了解Vue项目的默认目录结构及加载流程,比如文件index.html、package.json、main.js,目录/build、/config、/src等。

参考链接 :

优雅的 Vue 项目目录结构设计

VUE启动流程

涉及state对象使用的,大部分是需要先引入vuex,而vuex对象的定义及处理文件,都默认存放在工程的/src/store目录下,到该目录下的相应文件中可找到其他文件依赖的变量数据。

参考链接 :

Vuex 是什么?

import语法是很多其他语言中都有的关键词,较易理解,但export是干什么用的,export default和export又有什么区别,其他文件是如何使用export出去的变量的?

参考链接 :

export default 和 export 区别

工程中经常见到v-auth指令,从字面意思上可以理解为权限的验证,但在网上搜不到该指令的含义和用法,后才得知为本应用的自定义指令,并有专门针对该指令进行定义的函数。

参考链接 :

自定义指令

刚对Vue的组件概念有些了解时,会把所有的元素标签都认为是Vue自定义组件的一部分,然后开始到工程中去找该组件的定义,其实还有很多是官方组件,比如el-popover、el-table、el-table-column等,到相应的官网上找标签的定义和用法即可。

参考链接 :

Element UI 教程

1 默认用的intellij idea作为Vue工程的开发IDE,在该IDE中启动Vue工程,需要安装node js,并在IDE中配置Run Configurations,详细配置见下面的参考链接;

2 配置好运行参数之后,在启动过程中报错:Error: listen EACCES: permission denied 0.0.0.0:80,该错误的原因为本地80端口被占用,通过关闭80端口占用进程或修改配置文件中的端口号即可正常启动。

参考链接 :

idea运行vue项目

用idea在本地调试时,只要运行npm run dev即可,但若将分支部署到服务器上,则需先在本地运行npm run build进行编译,然后将编译完的文件上传至git,这样用自动化集成工具进行集成时,才可从git中拉取解析后的文件并正常被web服务读取(该操作与java工程在git中只保存源码不同)。

前端进阶(7) - react、vue 组件开发利器:storybook

对于前端开发来说,组件化技术已经是一门必修课了,这其中又主要以 react 和 vue 为主。但平时在开发组件,尤其是公共组件或者第三方组件库的时候,往往会有一些困扰:

所以, storybook 就是为了解决这些问题而出现的,它为你的组件搭建了一个强大的开发环境,主要提供了以下的几个功能:

社区已经有很多组件库都在使用 storybook 开发,比如:

再顺便截个图吧

查看 storybook - Writing Stories ,了解怎么写 stories 与怎么用插件。

如果需要手动添加 storybook 或它的插件,可以查看:

更多博客,查看

vue+spring boot从零开发BBS项目---前端篇(一)

这是一个前端使用vue,后台使用spring boot开发的论坛项目,旨在熟悉前后的开发技术,随做随记,记录一些知识要点。

HBuilderX

npm

1.Vue 渐进式JavaScript 框架。

2.ElementUI 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

3.axios 易用、简洁且高效的http库。

4.vue-router Vue.js 官方的路由管理器。

5.Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

6.font-awesome 提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

7.Normalize.css 提供HTML元素样式上跨浏览器的高度一致性。

前端项目需要对以上使用到的内容有一定的了解。熟悉以后就可以正式开始开发工作了。


本文题目:vue开发鸿蒙,vue 鸿蒙
文章起源:http://myzitong.com/article/dsccgdi.html