1. 首页
  2. 文章中心
  3. hide show vue 动画

hide show vue 动画_ano-vue非常好用的面向对象和注解编程

65 阅读 0 评论
我是靠谱客的博主 年轻小笼包，这篇文章主要介绍hide show vue 动画_ano-vue非常好用的面向对象和注解编程，现在分享给大家，希望可以做个参考。

7925b265457a4eeb143fa7a17f4b148a.png

文档官网

功能简介

复制代码
1
2
3
4
5
6
7
ano-vue脚手架工具是vue-cli3.0的超级 支持热启动，扩展功能如下：
1. 仅仅需要命令行就可以自动化创建页面，组件，以及创建其依赖关系，提高开发效率。
2. 自动化路由配置，无需手动添加路由项。
4. 动态切换代理,启动服务的时候只需要在命令行中添加需要切换的代理环境变量即可。
5. 标准化的代码及目录模版，统一前端代码风格。
6. 页面脚本按需加载，解决了单应用打包大的问题。
7. 面向对象和注解的编程体验，大大加强了代码的复用性和降低了代码的耦合度。

quick start

第一步：安装脚手架工具

复制代码
1
2
3
4
windows环境需要安装可以执行linux命令行的工具，下载 gow.exe [下载地址](http://dl.pconline.com.cn/download/762799.html) 一键安装后，重新打开cmd窗口即可。
安装脚手架工具命令： npm install -gd ano-vue 

mac环境安装需要管理员权限 sudo npm install -gd ano-vue

第二步：ano-vue -h 查看命令行

复制代码
1
2
3
4
5
6
7
8
-V, --version         output the version number
  -i,--init             初始化应用, 带应用类型参数
  -c,--create <string>  创建一个view, component, service, model
  -r,--remove <string>  删除一个view, component, service, model
  -w,--watch            启动服务器应用
  -b,--build            打包压缩静态资源生成发布包
  -h, --help            output usage information

第三步: ano-vue -i

复制代码
1
在本地创建一个项目文件夹，cd到文件夹根目录中，执行以上命令初始化项目模板代码

第四步：npm install -d

复制代码
1
安装package.json中的模块依赖

第五步：ano-vue -w

复制代码
1
启动项目, 会看到一个网站的初始化页面模板，表示初步运行已经成功，如果你要开发自己的项目可以修改下index.html将模板代码修改下即可 ano-vue -w dev 表示启动服务并使用proxy.config.js中的dev代理。

*项目核心目录文件介绍

复制代码
1
2
3
4
5
6
7
8
9
1. proxy.config.js 配置服务端ajax请求代理文件，使用的时候只需要 ano-vue -i dev(说明：这里的参数为需要切换代理项的键)。
2. main.js webpack项目打包入口文件
3. src/assets 存放图片和静态文件的目录。
4. src/common 项目的公共文件夹
5. src/common/components 全局vue组件目录其中BaseComponent 为所有组件的基类，可以为所有组件增加公共功能。
6. src/controller/index.js 路由文件，拦截用户请求，这里和 vue-router的配置文件一样，使用脚手架会自动更新这个文件内容，大部分情况下不需要用户自动修改，除非配置拦截器或者子路由。
7. src/model 客户端向服务端发送ajax请求获取数据的实体类文件夹。
8. src/service 通用业务功能的实体类存放目录，为view层提供微服务功能模块。
9. src/view 页面入口组件的存放目录。

看到这里，我们开始一个麻雀虽小五脏俱全的入门级练习。练习的内容包括以下几个功能点：

复制代码
1
2
3
4
5
6
7
8
1. 创建一个页面组件 list
2. 在list中使用vuex的状态管理器显示一段内容
3. 创建model实体，在list中调用model实体的 showList方法向后台发送ajax请求获取数据
4. 创建一个service的切面为model实体的showList方法增加执行前和执行后的拦截功能
5. 在list页面组件中使用 @provider依赖注入将 model和service自动绑定进来，这个前提是model和service都是autowire
（自动装载类）。
6. 创建list页面的私有子组件banner 和 通用组件 slider
7. 将list组件的数据传递给子组件banner 在banner中使用 @props注解获取接受数据

接下来我们就开始练习吧！

第一步：创建页面 list.vue

复制代码
1
2
使用命令: ano-vue -c view list
这个命令的意思是 创建一个视图层的页面 list

我们打开 src/view/list/list.vue源码来简单分析下：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {component,store} from '@common/lib/decorator'
    import BaseComponent from '@common/components/BaseComponent'
    import listStore from './store'
    @component
    @store(listStore)
    export default class list  extends BaseComponent {
        constructor() {
            super();
        }
        data() {
            return {

            }
        }
        created() {

        }
        mounted() {

        }
        methods() {
            return {

            }    
        }
    }
1. 在使用注解的时候首先需要将 decorator这个类引入进来，用到哪个注解就解构这个注解中的方法即可。
2. BaseComponent 为当前组件类的基类，比如我想为所有组件增加一个 hide和show方法来在当前组件中仅仅使用this.show就能显示当前组件，this.hide就能隐藏组件这样的好处是相当于在 Vue.prototype上挂在原型方法基本是一个道理。
3. @component注解表明当前类是一个vue的组件类。
4. @store(listStore) 将当前vuex的store模块注入到全局 当然你也可以给它取个别名例如: @store("userStore", listStore); 使用的时候可以用 this.$store.state.userStore.getters 或者 this.$store.state.listStore.getters 这个可以自己尝试下。
5. 类中的生命周期函数，与原来的对象形式基本是一样的。接下来我把常用的生命周期函数一一列出如下:
       data() {
            return {
                "username": "ue2"
            }
        }
        created() {

        }
        computed() {
            return {

            }
        }
        components() {
            return {

            }
        }
        watch() {
            return {

            }
        }
        filters() {
            return {

            }
        }
        methods() {
            return {

            }    
        }
        mounted() {

        }
        beforeMount() {

        }

第二步：在list目录下的store.js中增加一个state名字为sex值为male

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
    namespaced : true,
    state : {
        sex: "male"
    },
    mutations : {

    },
    actions : {

    },
    getters : {

    }
}

第三步：在list.vue中进行显示

复制代码
1
2
3
4
5
<template>
    <div>
        {{$store.state.listStore.sex}}
    </div>
</template>

第四步：创建一个user的实体类model

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
ano-vue -c model user

此时会在src/model文件夹下自动生成一个 user.js的model实体代码如下：
import {autowire,model,requestMapping} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user"})
@model
export default class user extends Base {
    constructor() {
        super();
    }
}
代码解释：
@autowire({moduleId:"user"}) 自动装在当前类 其中参数moduleId是必填的这里的moduleId 是与 @provider(["user"])对应的，只有自动装在的类，才可以使用 @provider进行依赖注入。
这里还要强调一个额外的功能，除了moduleId意外例如我们给这个类增加一个属性参数name 代码如下：

import {autowire,model,requestMapping} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user", name: "猪八戒"})
@model
export default class user extends Base {
    name = ""
    constructor() {
        super();
    }
}
我们可以通过以上的代码在自动装载当前类的时候给name初始化一个值，还是比较强大的吧。

接下来我们为这个model增加一个showUserList的方法并且可以往服务端发送请求代码如下:
import {autowire,model,requestMapping} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user"})
@model
export default class user extends Base {
    constructor() {
        super();
    }
    @requestMapping({url: "/api/v1/showUserList", type: "get"})
    getUserList(req, res) {
        return res;
    }
}
代码解释： 使用 @requestMapping注解可以表明当前的showUserList 会自动想服务端发送url的请求 类型为get，默认为get请求，return res（一个包装了返回数据的promise对象） req参数为调用方传入的json参数。
在list.vue中调用model中的这个方法代码如下：

import {component,store,provider} from '@common/lib/decorator'
    import BaseComponent from '@common/components/BaseComponent'
    import listStore from './store'
    @component
    @store(listStore)
    @provider(["user"])
    export default class list  extends BaseComponent {
        constructor() {
            super();
        }
        data() {
            return {

            }
        }
        created() {
            this.user.getUserList().then((res)=>{
                console.log(res);
            }) 
        }
        mounted() {

        }
        methods() {
            return {

            }    
        }
    }
代码解释: 在@provider中进行依赖注入，在create钩子函数中进行调用。很简单吧

第五步：创建一个面向切面编程的 aop service

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
ano-vue -c service log

此时在src/service目录中生成了一个aop的service代码如下：

import {autowire} from '@common/lib/decorator.js'
@autowire({"moduleId": "log"})
export default class log {

}
这个service的功能是，我们期望在getUserList之前记录下代码执行的starttime，在函数执行完成以后记录一个endTime。
import {autowire,aspect,before,after} from '@common/lib/decorator.js'
@autowire({"moduleId": "log"})
@aspect
export default class log {
    @before
    recordExecBeforeTime() {

    }
    @after
    recordExecAfterTime() {

    }
}
代码解释：
1. 增加@aspect注解表明这个类为一个切面， @before @after 可以是多个，按照顺序执行

接下来我们在model的user中应用这个切面代码如下：

import {autowire,model,requestMapping,inject,agent} from '@common/lib/decorator.js'
import Base from './base'
@autowire({moduleId:"user"})
@model
@agent
export default class user extends Base {
    constructor() {
        super();
    }
    @inject("log")
    @requestMapping({url: "/api/v1/showUserList", type: "get"})
    getUserList(req, res) {
        return res;
    }
}
代码解释：要在类上使用切面，必须要有这些元素: @agent 被动态代理注解 @inject 在那个方法上使用切面。

第六步：创建一个list.vue的私有子组件banner

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
ano-vue -c component list/banner

此时会在 src/view/list/components 下面自动生成一个banner.vue的子组件

在list.vue中引入私有子组件代码如下：
    import {component,store,provider} from '@common/lib/decorator'
    import BaseComponent from '@common/components/BaseComponent'
    import listStore from './store'
    import banner from './components/banner'
    @component
    @store(listStore)
    @provider(["user"])
    export default class list  extends BaseComponent {
        constructor() {
            super();
        }
        data() {
            return {

            }
        }
        created() {
            this.user.getUserList().then((res)=>{
                console.log(res);
            }) 
        }
        mounted() {

        }
        components() {
            return {
                banner
            }
        }
        methods() {
            return {

            }    
        }
    }

第七步：创建一个list.vue的通用子组件slider

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
ano-vue -c component common/slider

通过以上命令会在 src/common/components 目录下自动生成 slider.vue
在list.vue中引入代码如下:
    import {component,store,provider} from '@common/lib/decorator'
    import BaseComponent from '@common/components/BaseComponent'
    import listStore from './store'
    import banner from './components/banner'
    import slider from '@common/components/slider'
    @component
    @store(listStore)
    @provider(["user"])
    export default class list  extends BaseComponent {
        constructor() {
            super();
        }
        data() {
            return {

            }
        }
        created() {
            this.user.getUserList().then((res)=>{
                console.log(res);
            }) 
        }
        mounted() {

        }
        components() {
            return {
                banner,
                slider
            }
        }
        methods() {
            return {

            }    
        }
    }

第八步： 在list.vue中给banner.vue子组件传递参数

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
list.vue 传值代码如下:

<template>
    <div>
        {{$store.state.listStore.sex}}
        <banner :username="username"></banner>
        <slider></slider>
    </div>
</template>

banner.vue 接受参数代码如下：

    import {component, props} from '@common/lib/decorator'
    import BaseComponent from '@common/components/BaseComponent'
    @component
    @props({"username": String})
    export default class banner  extends BaseComponent {
        constructor() {
            super();
        }
        data() {
            return {

            }
        }
        created() {

        }
        mounted() {

        }
        methods() {
            return {

            }    
        }
    }
代码解释： 这里使用了 @props 进行参数接受，我们可以为被接受的参数指定一种数据类型进行校验.

webpack中的别名定义如下：

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@assets': path.resolve(__dirname, 'src', 'assets'),
      '@common': path.resolve(__dirname, 'src', 'common'),
      '@controller': path.resolve(__dirname, 'src', 'controller'),
      '@model': path.resolve(__dirname, 'src', 'model'),
      '@service': path.resolve(__dirname, 'src', 'service'),
      '@view': path.resolve(__dirname, 'src', 'view'),
    },
    extensions: ['*', '.js', '.vue', '.json']
  }

最后再次介绍两个命令:

复制代码
1
2
3
ano-vue -w 启动服务
ano-vue -w dev 启动服务并使用proxy.config.js中的dev代理
ano-vue -b 打包应用

到此为止你已经可以入门了，如果有任何问题可以通过以下方式联系作者

技术官网

QQ：912273637 技术交流群：849829771

最后

以上就是年轻小笼包最近收集整理的关于hide show vue 动画_ano-vue非常好用的面向对象和注解编程的全部内容，更多相关hide内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(43)

相关文章

七、Vue3基础之七一、Vue3定义全局函数和变量二、Vue3插件三、了解UI库四、Scoped和样式穿透五、css style新特性六、Vue3集成Tailwind CSS七、vue开发移动端
七、Vue3基础之七一、Vue3定义全局函数和变量二、Vue3插件三、了解UI库四、Scoped和样式穿透五、css style新特性六、Vue3集成Tailwind CSS七、vue开发移动端
vue常用的指令
vue常用的指令
vue app hide 后台运行代码
vue app hide 后台运行代码
C++开发必不可少的一步：C++创建线程的方法
C++开发必不可少的一步：C++创建线程的方法
hide show vue 动画_ano-vue非常好用的面向对象和注解编程
hide show vue 动画_ano-vue非常好用的面向对象和注解编程
Vue数据不渲染问题
Vue数据不渲染问题
Vue动画——0805一、单元素 / 组件的过渡
Vue动画——0805一、单元素 / 组件的过渡
用vue实现点击显示或影藏
用vue实现点击显示或影藏

评论列表共有 0 条评论

立即
投稿
返回
顶部