Vue自定义指令、混入mixin、自定义插件、异步组件、过渡和动画

最新推荐文章于 2024-05-14 11:07:51 发布

congboer

最新推荐文章于 2024-05-14 11:07:51 发布

阅读量440

点赞数

分类专栏： Vue 文章标签：自定义指令混入mixin 自定义插件异步组件过渡和动画

本文链接：https://blog.csdn.net/congboer/article/details/98112123

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1、自定义指令

业务: 当我第一次打开页面时，自动获取搜索框的焦点，用一个指令实现

<body>
  <div id="app">
    <input type="text" v-focus>
  </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    directives: {
      'focus': {//局部定义自定义指令
        inserted ( el ) {
          el.focus()//原生方法
        }
      }
    }
  })
</script>

定义方式
- 全局定义：Vue.directive( 指令的名称，指令的选项 )
- 局部定义：组件内选项： directives

//1、以全局定义自定义指令为例：
	//Vue.directive(指令名称，指令选项)
	Vue.directive('focus',{//使用自定义指令时用v-focus
		bind(){},   //第一个钩子函数，当自定义指令和元素第一次绑定时就触发
         inserted(el,binding,vnode,oldvnode){},
        /*这里四个参数，el为被指令绑定的元素；binding里面保存了指令的全部相关信息，是一个对象；*/
         update () {},//所在组件的 VNode 更新时调用
         componentUpdated () {} // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
         unbind () {} // 指令和元素解绑式触发，指令被绑定的元素被删除时，如用v-if控制,这里可u做一些善后
	})
//2、如果自定义指令后面还带有类似于事件修饰符那样，如v-focus.a，这里可以在inserted(){}这个钩子函数里面体现，如：if(binding.modifiers.a){}，大括号里执行一些东西
//3、这里用到比较多的就是bind、inserted、unbind这三个钩子了

2、混入 mixin

什么叫做混入？

将组件的选项中的一部分分离出去，单独管理或放置

方式有两种

局部混入 mixins 【推荐使用】

//局部混入，一般是将选项的一部分直接分离到别的文件里面，例如methods的事件：
//用一个js文件单独管理这些方法(data、computed、watch都可以这么做)
//---------------------------------------------------------------
const obj1 = {//比如这个在一个叫methods的js文件里面
  methods: {
    aa () {
      alert('aa')
    }
  }
}
//--------------------------------------------------------------
//引入这个js文件进主文件
<script src="methods.js"></script>
<script>
  new Vue({
    el: '#app',
    mixins: [ obj1 ],//用mixins来局部混入
    //这里用数组接收，相当于如果上一个js文件里面还有其它的方法，也可以写进来，比如obj2
    methods: {//写了methods的混入，这里也可以再写methods
      bb () {
        alert('bb')
      },
      aa () {//这个和外面js文件里面的方法重名了，这个的优先级更高，那个被覆盖
        alert('cc')
      }
    }
  })
</script>

全局混入 Vue.mixin 【不推荐】

<script>
  // Vue.mixin(选项)，这种相当于把实例选项的methods部分提到这页面的上部了，就换了一个位置，没有起到单独管理的作用，所以不是很推荐
  Vue.mixin({
    methods: {
      aa () {
        alert('aa')
      }
    }
  })
  new Vue({
    el: '#app',
  })
</script>

3、异步组件【扩展】

/*
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
*/
<script>
  Vue.component('Hello', function (resolve, reject) {
    setTimeout(function () {
      // 向 `resolve` 回调传递组件定义
      resolve({
        template: '<div>I am async!</div>'
      })
    }, 1000)
  })

  new Vue({
    el: '#app'
  })
</script>

4、自定义插件

定义的插件应该有一个 install 方法

自定义插件必须使用 Vue.use( 插件名称 ) 才能使用插件

<script>//假如这个js文件叫plugin
	const MyPlugin = {
       install ( Vue, options ) {
            Vue.directive('focus',{
              inserted ( el ) {
                el.focus()
                el.style.background = 'red'
              }
            })
      
            Vue.component('Hello',{
              template: '<div> hello </div>'
            })
      }
    }
</script>


<body>
  <div id="app">
    <input type="text" v-focus><!--可以自动获得焦点，通过上个js文件的自定义插件-->
    <Hello></Hello><!--组件部分-->
  </div>
</body>
<script src="vue.js"></script>
<script src="plugin.js"></script><!--引入插件文件-->
<script>
  Vue.use( MyPlugin ) //一定要有Vue.use()来使用插件

  new Vue({
    el: '#app'
  })
</script>

案例：
- 自定义Loading
- 封装组件库
- vue路由
- vue状态管理 vuex

5、过渡和动画

过渡【 css3 】通过css来实现过渡效果
动画【 js 】通过js 来实现动画效果
Vue中如何使用以上两个效果呢?
- 自定义css 【自己写】
- 第三方css库【 Animate.css 】推荐
- 自定义动画【自己写】
- 第三方js动画库【 Velocity.js 】推荐

congboer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令、混入mixin、自定义插件、异步组件、过渡和动画

1、自定义指令业务: 当我第一次打开页面时，自动获取搜索框的焦点，用一个指令实现<body> <div id="app"> <input type="text" v-focus> </div></body><script src="../../lib/vue.js"></script>...
复制链接

扫一扫