自定义组件（ 插件） 自定义指令 自定义的事件 cli
程序员文章站
2022-05-23 18:27:29
...
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 都可以使用-
$ yarn add @vue/cli global这个是cli3的版本
如果我们还想使用cli2的脚手架，那么我们可以在安装一个包 $ 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
推荐阅读