自动聚焦的指令
Vue.directive(‘指令名’，配置项)
使用自定义指令的时候 v-指令名
inserted 被指令绑定的元素 插入到真实dom的时候自动执行
Vue.directive('xixi',{
inserted(el,directive){
console.log('元素插入',el,data)
//el 被绑定的元素 directive 自定义指令对象
el.focus()
}
})
官网链接：钩子函数
自定义指令：全局自定义 和 局部自定义
1、通过Vue.directive 创建的指令就叫全局自定义指令
2、在所有的实例里都可以用
3、指令的创建要放到实例化的前方
1、通过实例配置项里的directives 创建的指令叫局部自定义指令
2、在哪个实例里创建在哪使用
组件
1、组件继承自实例 实例有的组件也有，会有一些变异
2、组件的目的是为了实现复用
组件的创建：
<script>
// 组件的创建
let xixi=Vue.extend({template:"<h1>这里是组件</h1>"})
// 注册一个组件 Vue.component('组件的名字',创建的组件)
Vue.component('Hehe',xixi)
// 把组件名当成标签名来使用 组件名不能和标签名一致
let vm = new Vue({
el:'#app',
})
/*
1.组件继承自实例 实例有的组件也有，会有一些变异
2.组件的目的是为了实现复用
*/
</script>
全局组件创建的简写：参数1 组件名 参数2 组件的配置项
Vue.component('xixi',{template:'<h1>呵呵哒</h1>'})
通过Vue.component 注册的组件叫全局组件
全局组件在所有的实例里都可以使用
全局组件的注册要求也是写在实例的前方
局部组件和全局组件的创建方式是一致的 注册方式不一致
局部组件是在哪注册在哪使用
在实例的配置项里注册
局部组件注册在 实例里的配置项 components里
components:{
'xixi':component,
'hehe':{template:"<h1>这里是局部组件hehe</h1>"}
}
extend???
组件的配置项 template 组件模板
最外层的template不会渲染到真实dom上
<!-- 组件模板 -->
<template id='tp1'>
<div class='tp1'>
<p v-for='item in 10'>{{item}}</p>
</div>
</template>
组件配置项template
和实例里的 el 类似 关联dom元素
- dom结构简单 直接使用字符串
- dom复杂 template标签 该标签不会真正的渲染 该标签只允许有一个根元素
组件的配置项 data
组件正常情况下无法直接使用实例的数据 只能使用自己的数据
实例里的data 是一个对象
组件里的data是一个函数 返回一个对象 返回的对象就是我们的数据
为了保证每一个组件有单独的作用域
组件的配置项 methods
<script>
let vm1 = new Vue({
el:'#app1',
data:{
name:'这里是实例'
},
components:{
hehe:{
template:'#tp1',
data(){
return{
num:1
}
},
methods: {
add(){
// 组件里的this指向组件对象
this.num++
}
},
}
}
})
</script>
组件的配置项 其他配置项
组件继承自实例 实例有的组件都有，只不过部分发生改变 template el data
el template
data
methods
directives
components 组件里也有components 也可以注册组件 形成组件嵌套
watch
computed
…
不管嵌套多少级 在哪注册在哪用
组件自己的数据只能自己用
组件的嵌套：
<body>
<div id='app1'>
这里是实例
<hehe> </hehe>
</div>
<!-- 组件模板 -->
<template id='hehe'>
<div class='hehe'>
这里是hehe组件
<xixi></xixi>
</div>
</template>
<!-- hehe里的嘻嘻组件 -->
<template id='xixi'>
<div class='xixi'>
这里是嘻嘻组件
</div>
</template>
<script>
let vm1 = new Vue({
el:'#app1',
data:{
name:'这里是实例'
},
components:{
hehe:{
template:'#hehe',
components:{
xixi:{template:'#xixi'}
}
}
}
})
/*
组件继承自实例 实例有的组件都有 部分会发生改变 template el data
el template
data
methods
directives
components 组件里也有components 也可以注册组件 形成了组件嵌套
watch
computed
不管嵌套多少级 在哪注册在哪用
*/
</script>
</body>
上午总结
v-html 相当于 innerhtml
v-text 相当于 innerText
自定义指令
当我们vue提供的内置指令无法满足使用时，创建
分为：全局自定义指令 和 局部自定义指令
全局自定义：
el 表示自定义指令绑定的元素
v-自定义指令的名字
Vue.directive('指令的名字',{
insterted(el){
el 自定义指令绑定的元素
}
})
v-自定义指令的名字
局部自定义：
在哪注册在哪使用
组件和实例都可以注册局部自定义指令
new Vue({
directives:{
自定义指令的名字:{
inserted(el){
}
}
}
})
组件
- 创建组件
- 注册组件
- 使用组件
局部组件 全局组件 的区分就是注册位置不同
全局的
Vue.component(‘组件名’,{ 组件的配置项})
局部的
new Vue({
...
components:{
组件名：{
配置项
},
hehe:{
template:'#hehe',
components:{
xixi:{
template:'#xixi',
components:{
....
}
}
}
}
}
})
全局component 局部加s
组件的配置项和实例配置的区别
绑定元素 el template
数据 data 对象 data 函数
自定义指令 directive directive
方法 methods methods
组件
计算属性
监听
…
组件嵌套
全局组件的嵌套
全局组件没有固定的嵌套关系，嵌套关系由书写方式决定的
局部组件在注册的过程中 已经确定了父子（嵌套）关系
在使用的过程中 必须按照这种嵌套关系来使用
组件通信（重点）
在组件和实例中自己的数据只有自己可以控制
- 父子通信 props 自定义属性（自己来写的属性）
- 父组件控制子组件
- 父组件控制自己的数据变化，将变化后的数据通过props自定属性传给子组件
<body>
<div id='app1'>
这里是实例
{{money}}
<hr>
<!-- 在tp1组件标签上使用 xixi自定义属性 -->
<tp1 :xixi='money'></tp1>
</div>
<!-- 组件模板 -->
<template id='tp1'>
<div class='tp1'>
这里是组件
{{xixi}}
</div>
</template>
<script>
Vue.component('tp1',{
template:'#tp1',
data(){
return{
hehe:123
}
},
props:{
xixi:{type:Number} //传值的同时检查数据的类型
}
// props:['xixi'] //接收自定义属性
})
let vm1 = new Vue({
el:'#app1',
data:{
money:'资产'
}
})
/*
不管是组件还是实例 自己的数据只能自己使用
props 自定义属性 将父亲的数据传给儿子
1.在组件标签上使用自定属性
2.在组件内部通过props来接受自定义属性
3.接受完了 既可以在组件里直接使用 只能用不能改
*/
</script>
</body>
- 子父通信 $emit (是vue内置的一种方法)
- 子组件控制父组件的数据
- 父组件控制自己的数据变化，将控制函数通过emit自定义事件传递给子组件 供子组件调用
<body>
<div id='app1'>
这里是实例
<hr>
<!-- 绑定在son身上的自定义事件 事件名叫 custom 处理函数叫add -->
<son @hehe='change'></son>
<!-- 绑定在button身上的内置事件 事件名叫 click 处理函数叫add -->
<!-- <button @click='add'>添加</button> -->
</div>
<!-- 组件模板 -->
<template id='tp1'>
<div>
这里是子组件
<button @click='sonClick'> 这里是子组件的按钮</button>
</div>
</template>
<script>
Vue.component('son',{
template:'#tp1',
methods: {
sonClick(){
console.log('子组件的处理方法')
// 通过emit方法触发自定义事件 参数1 自定义事件名
this.$emit('hehe',666)
}
},
})
let vm1 = new Vue({
el:'#app1',
methods: {
change(num){
alert('点到我了'+num)
}
},
})
/*
自定义事件 子组件触发父组件的方法
$emit 可以触发绑定在组件身上自定义事件
1.在组件标签绑定一个自定义事件
<son @custom='add'></son>
2.在组件的内部 通过$emit 触发这个自定事件
在子组件里触发父组件的方法
*/
</script>
</body>
- 兄弟通信
a. 状态提升
b.事件总线
c.全局状态管理
<body>
<div id='app1'>
<!-- 将父亲的数据通过自定义属性传给组件1使用 -->
<son1 :show='state'></son1>
<hr>
<!-- 将父亲的方法通过自定义事件传给组件2使用 -->
<son2 @custom='faToggle'></son2>
</div>
<hr>
<!-- 组件1 -->
<template id='son1'>
<div>
这里是组件1
<div class='test' v-show='show'>
</div>
</div>
</template>
<!-- 组件2 -->
<template id='son2'>
<div>
这里是组件2
<button @click='son2Click'>显示隐藏</button>
</div>
</template>
<script>
/*
组件1 和组件2 是兄弟
组件1有div 可以显示隐藏
组件2 有butoon 控制显示隐藏
控制显示隐藏的值放在公有的爸爸上
*/
Vue.component('son1',{
template:'#son1',
props:['show'] //接受爸爸传来的数据
})
Vue.component('son2',{
template:'#son2',
methods: {
son2Click(){
this.$emit('custom') //触发爸爸传来的函数
}
},
})
let vm1 = new Vue({
el:'#app1',
data:{
state:false
},
methods: {
faToggle(){
this.state=!this.state
}
},
})
</script>
</body>
vue的脚手架工具
- 将npm镜像换成淘宝镜像
- npm install -g @vue/cli
- vue -V 出现版本号
- 新建一个文件
- 进入文件目录 执行
- vue create name (名字随便起)
- 进入项目目录 执行npm run serve