自定义组件（插件）自定义指令自定义的事件 cli

最新推荐文章于 2022-09-05 09:47:18 发布

雾里种花

最新推荐文章于 2022-09-05 09:47:18 发布

阅读量435

点赞数

文章标签：自定义组件（插件）自定义指令自定义的事件 cli

本文链接：https://blog.csdn.net/ThisOnly/article/details/90679312

版权

1. 自定义组件（插件）

案例：封装一个 Loading 组件
Loading是用来做什么的？
基于用户体验
loading使用方式很多

第三方的ui库/组件库

自定义封装

过程：
创建一个目录文件夹，称之为Loading
在loading中创建一个叫做component目录，用来放模板
在Loading目录下创建一个index.js

~ import Vue from 'vue'
  import tpl from './component/index.html'
  const Loading = {
    // 自定义封装组件，这个loading对象中必须有一个关键key
    install () {
      Vue.component( 'Loading', {
        template: tpl
      })
    }
  }


  export default Loading

使用：

2. 自定义指令

自定义指令
1. 指令是用来操作DOM
2. 指令的使用形式：属性
3. 自定义指令方式有两种：
- 全局注册指令
Vue.directive( 指令的名称，指令的配置项 )
- 局部注册指令
directives: {
‘指令名称’: 指令的配置项
}
研究：

      指令的配置项提供了5个钩子函数 

      以及钩子函数中的参数
        console.log( 'el',el  ) // el 指令绑定的元素
        console.log( 'binding',binding ) // 指令的详细信息
        console.log( 'vnode', vnode )  // 当前绑定元素的信息
        console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息

    案例： 打开网页，input自动获得焦点

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <style>
    .box{
      width: 300px;
      height: 300px;
      background: blue;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="box">
     <button  @click = 'flag = false'> 点击 </button>
     <input type="text"  v-if = "flag" v-focus.yyb v-model = "msg">
     <input type="text"  v-if = "flag" v-focus v-model = "msg">
    </div>
  </div> 
</body>
<script>
Vue.directive( 'focus',{
    bind ( el,binding,vnode,oldVnode ) { //调用一次，指令一绑定在元素身上就会触发
      // console.log( 'bind focus' )
      // console.log( 'el',el  ) // el 指令绑定的元素
      // console.log( 'binding',binding ) // 指令的详细信息
      // console.log( 'vnode', vnode )  // 当前绑定元素的信息
      // console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
      // el.style.background = 'red'
    },
    inserted (  el,binding,vnode,oldVnode ) { // 当前绑定的元素插入父节点时调用
      el.focus()
      if( binding.modifiers.yyb ){
        el.style.color = 'green'
      }else{
        el.style.color = 'red'
      }
      console.log( binding )
      console.log( 'inserted ' )
    },
    update ( el, binding, vnode, oldVnode ) {  // 当前指令绑定的元素发生改变
      console.log( 'update' )
      console.log( 'el',el  ) // el 指令绑定的元素
      console.log( 'binding',binding ) // 指令的详细信息
      console.log( 'vnode', vnode )  // 当前绑定元素的信息
      console.log( 'oldVnode',oldVnode ) // 上一个绑定元素的信息
    },
    componentUpdated ( el,binding,vnode,oldVnode) { //当前绑定元素发生改变，或是子元素发生改变
      console.log( 'componentUpdated' )
    },
    unbind ( el,binding,vnode,oldVnode) { // 组件销毁时触发
      console.log( 'unbind' )
    }
  })

  new Vue({
    el: '#app',
    data: {
      msg: 1000,
      flag: true
    },
    directives: {
      'focus': {
        bind () {

        },
        inserted () {

        },
        update () {

        },
        componentUpdated () {

        },
        unbind () {
          
        }
      }
    }
  })
</script>

3. 自定义的事件

v-on:click = ‘aa’
v-on:yyb = ‘aa’
v-on:before-enter: ‘’

自定义封装组件的使用
自定义事件的第二种使用形式

<body>
  <div id="app">
    <button @click = 'fn'> 点击 </button>
  </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  /* 
    v-on:aa = 'fn'
    自定义事件
      事件的发布         
      事件的订阅

      自定义事件的使用形式
        1. 组件生命周期中发布事件，通过某一个事件处理程序调用
        2. 绑定在组件身上 ， 通过 v-on 绑定
            - 
  */
  var vm = new Vue({
    el: '#app',
    methods: {
      fn () {
        this.$emit('aa')
      }
    },
    mounted () {
      this.$on('aa',function(){
        alert('aa')
      })
    }
  })

4. cli

cli是什么？
cli是vue提供的一个快速（自动化）构建项目的一个脚手架，类似于我们之前所学的 express-generator
cli的版本
目前最新 3.x
老版本是 2.x
cli的底层的自动化工具是： webpack
cli的安装
npm/cnpm/yarn 都可以使用
1. $ yarn add @vue/cli global 这个是cli3的版本
  如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
2. $ yarn add @vue/cli-init global
如果安装3失败了，
那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
1. $ cnpm i @vue/cli -g 这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
1. $ cnpm i @vue/cli-init -g

如果还有问题：
那么你就不要使用cli3了，你可以单独安装cli2
```
 `$ cnpm i vue-cli -g`
```
验证是否安装成功
命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功
创建项目

cli3版本创建
1. 命令创建【推荐】
$ vue create project

    - 手动选择配置
    - 如果安装node-sass出问题，如何解决： 
      - 先切换成npm源   nrm use npm
      - 使用cnpm 安装  cnpm i node-sass sass-loader -D

图形界面创建
$ vue ui
cli2
标准版
$ vue init webpack project
简易版
$ vue init webpack-simple project

雾里种花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义组件（插件）自定义指令自定义的事件 cli

1. 自定义组件（插件）案例：封装一个 Loading 组件Loading是用来做什么的？基于用户体验loading使用方式很多第三方的ui库/组件库自定义封装过程：创建一个目录文件夹，称之为Loading在loading中创建一个叫做component目录，用来放模板在Loading目录下创建一个index.js~ import Vue from 'vue' ...
复制链接

扫一扫