We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vuejs火了有一段时间了,但是之前自己还没有一个线上项目中使用它。刚搞公司前一段时间有个新项目要开发,再加上大BOSS那边要求使用Vuejs来做,自己也就毫不犹豫的接了下来,并用了Vuejs作为开发框架。那为什么要用它呢?有以下原有:
Vuejs
data
view
构建工具方面参考了尤大大的[vue-cli](https://github.com/vuejs/vue-cli)和vue-element-admin(https://github.com/PanJiaChen/vue-element-admin),当然也可以看看自己的小(DEOM)[https://github.com/Hancoson/vue-manage]。也基本都是copy第三方的,没有自己去造轮子。
[vue-cli](https://github.com/vuejs/vue-cli)
vue-element-admin(https://github.com/PanJiaChen/vue-element-admin)
(DEOM)[https://github.com/Hancoson/vue-manage]
使用到的技术栈如下:
目录结构:
├─index.html //页面入口 ├─build //构建配置 ├─config //构建配置文件 ├─package.json ├─yarn.lock ├─README.md └─src //资源目录 │ App.vue //vue入口 │ main.js //总入口文件 ├─assets //静态资源目录 │ ├─img │ ├─mock //mock数据 │ └─scss ├─components //组件目录 │ ├─common //公用组件 │ │ ├─home │ │ │ home.vue │ │ ├─layout │ │ │ header.vue │ │ └─…… │ └─pages //页面 │ ├─index │ │ index.vue │ └─…… ├─router //路由 └─utils //工具函数
export default new Router({ //mode: 'history', routes: [ { path: '/', redirect: '/admin/index/carousel' }, { path: '/', component: resolve => require(['../components/common/home/home.vue'], resolve), children: [ //首页 { path: '/', component: resolve => require(['../components/pages/focus/Index.vue'], resolve) }, …… ] } ] })
父组件到子组件,在父组件调用子组件时通过v-bind(:)绑定动态数据,在子组件,使用Prop方法(单项绑定,防止数据倒流)
v-bind(:)
Prop
父: <edit-dialog :dialogData="dialogData" :rendom="new Date().getTime()"></edit-dialog>
<edit-dialog :dialogData="dialogData" :rendom="new Date().getTime()"></edit-dialog>
子:
props: { dialogData: Object, rendom: Number }
子组件中通过watch方法来监控数据是否改变,可触发相应的方法。
watch
子组件到父组件,在父组件中使用v-on(@)绑定自定义事件接收,在子组件中使用$emit来监控,并传给回掉。 父: <edit-dialog @message="recieveMessage"></edit-dialog>
v-on(@)
$emit
<edit-dialog @message="recieveMessage"></edit-dialog>
this.$emit('message', data)
非父子组件,有时候两个组件也需要通信(非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:
var bus = new Vue()
// 触发组件 A 中的事件 bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... })
乱七八糟的写了很多,也算是对这段时间用vue.js的一个回顾。不得不承认,在使用vue.js的过程当中开始逐渐喜欢上了这个优美而简洁的框架。因此也愿意跟更多的人分享使用它的经验。也欢迎大家一起交流。
The text was updated successfully, but these errors were encountered:
一张图了解VUE
来源:2018 我所了解的 Vue 知识大全
Sorry, something went wrong.
No branches or pull requests
介绍
Vuejs火了有一段时间了,但是之前自己还没有一个线上项目中使用它。刚搞公司前一段时间有个新项目要开发,再加上大BOSS那边要求使用
Vuejs
来做,自己也就毫不犹豫的接了下来,并用了Vuejs
作为开发框架。那为什么要用它呢?有以下原有:data
和view
过程
技术
1.构建工具
构建工具方面参考了尤大大的
[vue-cli](https://github.com/vuejs/vue-cli)
和vue-element-admin(https://github.com/PanJiaChen/vue-element-admin)
,当然也可以看看自己的小(DEOM)[https://github.com/Hancoson/vue-manage]
。也基本都是copy第三方的,没有自己去造轮子。2.技术栈
使用到的技术栈如下:
目录结构:
3.主要技术点分析
父组件到子组件,在父组件调用子组件时通过
v-bind(:)
绑定动态数据,在子组件,使用Prop
方法(单项绑定,防止数据倒流)父:
<edit-dialog :dialogData="dialogData" :rendom="new Date().getTime()"></edit-dialog>
子:
子组件中通过
watch
方法来监控数据是否改变,可触发相应的方法。子组件到父组件,在父组件中使用
v-on(@)
绑定自定义事件接收,在子组件中使用$emit
来监控,并传给回掉。父:
<edit-dialog @message="recieveMessage"></edit-dialog>
子:
非父子组件,有时候两个组件也需要通信(非父子关系)。在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线:
小结
乱七八糟的写了很多,也算是对这段时间用vue.js的一个回顾。不得不承认,在使用vue.js的过程当中开始逐渐喜欢上了这个优美而简洁的框架。因此也愿意跟更多的人分享使用它的经验。也欢迎大家一起交流。
The text was updated successfully, but these errors were encountered: