发表于： 2023-05-19 20:44:59
0 257
vue知识点：
<!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 type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
需求1: 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
需求2: 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
自定义指令总结:
一、定义语法:
(1).局部指令:
new Vue({ new Vue({
directives:{指令名:配置对象} 或 directives{指令名:回调函数}
}) })
(2).全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调:
(1).bind:指令与元素成功绑定时调用。
(2).inserted: 指令所在元素被插入页面时调用。
(3).update:指令所在模板结构被重新解析时调用
备注:
1.指令定义时不加v-，但使用时要加v-;
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是:<span v-text="n"></span></h2>
<h2>放大10倍后的n值是:<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
<!-- <div id="root2">
<input type="text" v-fbind:value="x">
</div> -->
<script type="text/javascript">
Vue.config.productionTip = false;
//定义全局指令
Vue.directive('fbind',{
//指令与元素成功绑定时(一上来)
bind(element, binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element, binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element, binding){
element.value = binding.value
}
})
const vm = new Vue({
el: '#root',
data: {
name: '修真院',
n: 1
},
directives: {
//big函数何时会被调用? 1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。
big(element, binding) {
// console.log('big',this) //注意此处的 this 是window
// console.log('big')
element.innerText = binding.value * 10
},
// fbind:{
// //指令与元素成功绑定时(一上来)
// bind(element, binding){
// element.value = binding.value
// },
// //指令所在元素被插入页面时
// inserted(element, binding){
// element.focus()
// },
// //指令所在的模板被重新解析时
// update(element, binding){
// element.value = binding.value
// }
// }
}
})
new Vue({
el:'#root2',
data:{
x:1
}
})
</script>
</body>
</html>
<!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 type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
生命周期:
1.又名:生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么: Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
-->
<div id="root">
<h2 v-if="a">你好</h2>
<h2 :style="{opacity}">欢迎学习Vue</h2>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
a:false,
opacity: 1
},
//Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕) 调用mounted
mounted() {
console.log('mounted')
setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) {
this.opacity = 1
}
}, 16)
},
})
//通过外部定时器实现
// setInterval(() => {
// vm.opacity -= 0.01
// if (vm.opacity <= 0) {
// vm.opacity = 1
// }
// }, 16)
</script>
</body>
</html>
<!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 type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-text="n"></h2>
<h2>当前的n值是{{n}}</h2>
<button @click="add">点击n+1</button>
<button @click="bye">点击销毁vm</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
n:1
},
methods: {
add(){
console.log('add');
this.n++
},
bye(){
console.log('bye');
this.$destroy()
}
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
},
});
</script>
</body>
</html>
<!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 type="text/javascript" src="../vue_basic/vue.js"></script>
</head>
<body>
<!--
常用的生命周期钩了:
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]。
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效，但原生DOM事件依然有效。
3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
-->
<div id="root">
<h2 :style="{opacity}">欢迎学习Vue</h2>
<button @click="stop">点击停止变化</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
opacity: 1
},
methods: {
stop(){
this.$destroy()
}
},
//Vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕) 调用mounted
mounted() {
console.log('mounted')
this.timer = setInterval(() => {
console.log('setInterval');
this.opacity -= 0.01
if (this.opacity <= 0) {
this.opacity = 1
}
}, 16)
},
beforeDestroy() {
console.log('vm即将销毁了');
clearInterval(this.timer)
},
})
</script>
</body>
</html>
返回列表
评论