Vue04
自定义指令
-
directives是Vue的一个配置项
-
这里写自定义指令
自定义指令被调用的时机
-
指令与元素成功绑定时
-
指令所在的模板被重新解析时
函数式
<span v-big="n"></span>
directives:{
big(element,binding){
element.innerText =binging.value *10
}
}
//element拿到的是实体标签
//binding里的value是传入的参数 n
对象式
注：函数式相当于对象式的一种简写
directives:{
m:{
bind:function(el,binding){
el.innerHTML = binding.value;
},
inserted:function(el,binding){
el.focus();
},
update:function(el,binding){
el.innerHTML = binding.value;
}
}
}
-
定义语法
-
局部指令，对象式，函数式
-
全局指令，Vue.directive（指令名，配置对象）或 Vue.directive（指令名，回调函数）
-
配置对象中常用的3个回调
-
bind :指令与元素成功绑定时
-
inserted:指令所在元素被插入页面时
-
update:指令所在的模板被重新解析时
-
备注
-
指令定义时不加v-,但使用时要加v-
-
指令名如果时多个单词，要使用kebab-case命名方式，不要用cameCase命名
<body>
<div id="root">
<span v-text="n"></span>
<button @click="n++">点我n+1</button>
<input type="text" :value="n" v-focus>
</div>
</body>
<script>
new Vue({
el:'#root',
data:{
message:'你好哇！',
n : 1
},
// 这里使用函数式写法，缺点是不能够在生命周期中起作用，但我感觉，可以满足大多数需求了
directives:{
focus(el, binding){
el.focus()
}
}
})
生命周期
生命周期
-
又名：生命周期回调函数，生命周期函数，生命周期钩子
-
是生命：Vue在关键时刻帮我们调用的一些特殊名称的函数
-
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
-
生命周期函数中的this指向是vm或组件实例对象
注：调试bug的一个技巧，在代码里写入debugger(添加断点)
挂载流程
-
beforeCreate
- 此时无法通过vm访问到data中的数据，methods中的方法
-
created
- 此时可以访问vm中的data中的数据和methods中的方法
-
beforeMount
-
页面呈现的是未经Vue编译的DOM结构
-
所有对DOM的操作，最终都不奏效
-
-
mounted
-
页面中呈现的是经过Vue编译的DOM
-
对DOM的操作均有效（尽可能避免）至此初始化过程结束，一般在从进行：开启定时器，发送网络请求，订阅消息，绑定自定义事件 等初始化操作
-
更新流程
-
beforeUpdata
- 此时：数据是新的，但页面是旧的（页面尚未和数据保持同步）
-
updated
- 此时：数据是新的，页面也是新的（页面和数据保持同步）
销毁流程
- vm.destroy() 被调用时，vm就被销毁了。完全销毁一个实例，清理它与其他实例的链接，解绑它的全部指令及自定义事件监听器
- beforeDestroy
- 此时：vm中所有的：data，methods，指令等待，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅信息，解绑自定义事件等收尾操作
- destroyed
常用的生命周期钩子
-
mounted: 发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】
-
beforeDestroy:清除定时器，解绑自定义事件，取消订阅消息等【收尾工作】
关于销毁Vue实例
-
销毁后借助Vue开发者工具看不到任何信息
-
销毁后自定义事件会失效，但原生DOM事件依然有效
-
一般不会在beforeDestroy操作数据，因为即操作数据，也不会再触发更新流程
// 生命周期钩子
// 目前是8个生命周期钩子，分为4对
// beforeCreate、created ------> create 对
// beforeMount、mounted ------> mount 对
// beforeUpdate、updated ------> update 对
// beforeDestroy、destroyed ------> destroy 对
beforCreate:function(){
console.log('beforCreate');
},
created:function(){
console.log('created');
},
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
beforeUpdate:function(){
console.log('beforeUpdate');
},
updated:function(){
console.log('updated');
},
beforeDestroy:function(){
console.log('beforeDestroy');
},
destroyed:function(){
console.log('destroyed');
}
组件
原生 html，css，js的存在的问题
1，依赖关系混乱，不好维护
2，代码复用率不高
组件的定义：实现应用中局部功能代码和资源的集合
非单文件组件
Vue中使用组件的三大步骤
-
定义组件（创建组件）
-
注册组件
-
使用组件（写组件标签）
-
如何定义一个组件
-
使用const xxx = Vue.extend(options)创建，其中options 和 new Vue(options)传入的options几乎一样，但也有区别
-
el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
-
data必须写成函数，因为避免组件被复用时，数据存在引用关系
-
注：使用template来配置组件结构
-
-
如何注册组件
-
局部注册：靠new Vue的时候传入components选项
-
全局注册：靠Vue.component(“组件名”,组件)
-
-
使用组件
- 编写组件标签
细节注意
-
关于组件名
-
一个单词组成
-
第一种写法(首字母小写):school
-
第二种写法(首字母大写)：School
-
-
多个单词组成
-
第一种写法(kabab-case命名):my-school
-
第二种写法(CamelCase命名):MySchool【需要Vue脚手架支持】
-
-
注：
-
组件名尽可能回避HTML中已有的元素名称，例如：h1,H1
-
可以使用name配置项指定组件在开发者工具中呈现的名字
-
-
-
关于组件标签
-
第一种写法：
-
第二种写法：
-
注：不用脚手架时， 会导致后续组件不能渲染
-
-
一个简写方式
-
const school = Vue.extend(options) 可以简写为 const school =options
-
组件的嵌套
注：app这个组件在实际开发中管理剩余的其他组件
VueComponent
-
school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
-
我们只需要写，Vue解析时会帮我们创建school组件的实例对象
-
特别注意：每次调用Vue.extend ,返回的都一个全新的VueComponent
-
关于this指向
-
组件配置中：data中的函数，methods中的函数，watch中的函数，computed中的函数，他们的this均是【VueComponent实例对象】
-
new Vue(options) 配置中：data中的函数，methods中的函数，watch中的函数，computed中的函数，他们的this均是【Vue实例对象】
-
VueComponent的实例对象，以后简称vc（也可称为：组件实例对象）