属性侦听器
- 侦听器属性：必须和data中的数据源同名
这里我点击了两次修改msg，但是对比两次的打印结果我们可以知到如果我们只是修改了引用数据内部的属性值:页面会重新渲染,但是侦听器属性不会触发。但是我们可以修改了引用数据的引用 这样才能触发侦听器属性，修改了引用数据内部的属性值也想触发侦听器属性,必须深度监听
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<style></style>
</head>
<body>
<div id="show">
<p>{{msg}}</p>
<button @click="change1">修改msg</button>
<p>{{obj.age}}</p>
<button @click="change2">修改了obj</button>
</div>
<script>
let vm=new Vue({
el:"#show",
data:{
msg:"hello world",
obj:{
age:20
}
},
methods: {
change1(){
console.log("change1");
this.msg="你好世界"
},
change2(){
// console.log("change2");
this.obj.age="修改了引用数据内部的属性值"
}
},
watch:{
msg(){
console.log("hello world 6666666");
},
// obj(){
// console.log("obj changed");
// },
obj:{
deep:true,
handler:()=>{
console.log("obj changeged");
}
}
}
})
</script>
</body>
</html>
自定义指令
除了默认设置的核心指令( v-model 和 v-show 等)，Vue 也允许注册自定义指令。
在Vue里，代码复用的主要形式和抽象是组件。
然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令 。
以一个input元素自动获得焦点为例，当页面加载时，使用autofocuse可以让元素将获得焦点 ，但是autofocuse在移动版Safari上不工作，现在注册一个使元素自动获取焦点的指令。
指令注册类似于组件注册，包括全局指令和局部指令两种。
全局指令
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部指令
var vm = new Vue({
el: '#app',
directives:{
focus:{
inserted: function (el) {
el.focus()
}
}
}
})
这里的el是绑定这个指令的节点对象：DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
<style></style>
</head>
<body>
<div id="show">
<p v-text="msg"></p>
<input v-red type="text" v-model="count">
<div v-red>{{msg}}</div>
<h2 v-red>我是自定义红色</h2>
<h1 v-color="'blue'">我是自定义颜色</h1>
<h3 v-color="mycolor">666</h3>
<input type="text" v-focus>
</div>
<script>
let vm=new Vue({
el:"#show",
data:{
msg:"hello world",
count:100
},
directives:{
red:{
inserted (el) {
console.log(el);
el.style.color="red"
},
},
color:{
inserted (el,option) {
console.log(el,option.value,111111111111)
el.style.color=option.value
},
},
focus:{
inserted (el) {
el.focus()
},
}
}
})
</script>
</body>
</html>
指令: vue中 指令就是标签中v-打头的一种自定义的标签的属性 它在vue运行了以后 就具有封装好的功能
使用时非常简洁
生命周期函数
钩子函数: 生命周期函数 (c语言中有一类系统回调的函数然后执行业务 叫做钩子)
在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数
今天主要是学习vue中组件8个
当前vm实例在创建到销毁的过程中 会去调用的函数:
beforeCreate() {
new Image().src='https://img1.baidu.com/it/u=1966616150,2146512490&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1662397200&t=873657ddc05e966309998f18814a9e54'
console.log('beforeCreate',this.msg,this)
//在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用
},
created() {
// 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。
console.log('created',this.msg,this)
},
beforeMount() {
// 在挂载开始之前被调用：相关的 render 函数首次被调用。
console.log('beforeMount')
},
mounted() {
/* 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都被挂载完成。
该钩子在服务器端渲染期间不被调用。*/
console.log('mounted')
},
beforeUpdate() {
/*
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
*/
console.log('beforeUpdate')
},
updated() {
/*
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
注意，updated 不会保证所有的子组件也都被重新渲染完毕
该钩子在服务器端渲染期间不被调用。
*/
console.log('updated')
},
beforeDestroy() {
// 实例销毁之前调用。在这一步，实例仍然完全可用。
// 该钩子在服务器端渲染期间不被调用。
console.log('beforeDestroy',this.msg)
},
destroyed() {
// 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
// 该钩子在服务器端渲染期间不被调用。
console.log('destroyed',this.msg)
},
面试题
1、什么是生命周期函数?
vue组件对象在创建到销毁的过程中,在某一种条件成立的时刻 系统会去调用的vue中设定的函数 这些函数都叫做:生命周期函数
2、vue的命周期函数有哪些?
普遍的答法:有8个创建前后,挂载前后,更新前后,销毁前后
高级的答法:
组件的有8个(创建前后,挂载前后,更新前后,销毁前后)
自定义指令也有5个
动态组件有2个 -后面讲
路由(组件有3个,全局有2个,独享有1个)
3、为什么设计生命周期函数?
为了更好的设计程序,让代码更有逻辑 和 可维护性
4、页面首次加载过程中，会依次触发哪些钩子
beforeCreate，created，beforeMount，mounted
5、 this.$el 是什么?它在哪些钩子中才能访问?
它代表了当前组件的真实DOM,要在mounted之后才有
6、 Vue 实例的 data 属性，在哪些钩子中能访问
created beforeMount mounted beforeUpdate updated beforeDestroy
7、为什么不要在更新钩子中做页面的数据请求?
会导致死循环 react有一个shoudComponentUpdate可以自己控制 但是vue没有
8、你用beforeCreate做过什么业务?
这个钩子中可以做网络请求 但是vm没有构建完毕,此时数据方法等等的劫持还没有完成,不能操作this,因此可以做预加载.
9、VM和DOM之间的关系?
9.1、VM是JS模拟出来的跟DOM结构很像的一种对象结构VNode. 它通过底层的render函数渲染到页面上,让页面DOM跟虚拟VNode关联映射.
9.2 、如果VM的数据源发生变化,会让内存中生成新的VNode 新的VNode会和旧的VNode作比较然后更新,这个过程就是DIFF算法
组件
组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用
导入组件
//1.导入
import Box from "./componnets/Box.js"
注册组件
components: {
//2.注册组件
Box,
Nav1,
MyBox,
Box2:{
template:`<div>
<h1>666-box2</h1>
<p @click="fn">{{msg}}</p>
</div>`,
data:function(){
return {msg:"msg66666"}
},
methods:{
fn(){console.log("Box2组件的方法")}
},
filters: {},
watch: {},
computed: {},
directives: {},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
}
},
1.全局组件:
组件的属性不能用大写字母
组件的名字可以用驼峰命名法,但是使用的时候必须用连字符
全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)
注册的组件不要跟系统标签同名
2.局部组件:
一个vm实例可以有多个局部组件,但是只能供当前vm实例使用
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
