字体显示,淡出
<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2 :style="{opacity}">欢迎来到湖南</h2>
</div>
</body>
<script>
const vm = new Vue({
el:'#root',
data:{
opacity:1
}
})
setInterval(()=>{
vm.opacity -= 0.01
if(vm.opacity <= 0) vm.opacity = 1
},16)
</script>
</html>
报错
vue.js:5108 [Vue warn]: Error compiling template:
invalid expression: Unexpected token '{' in
{{opactiy}}
Raw expression: :style="{{opactiy}}"
1 | <div id="root">
2 | <h2 :style="{{opactiy}}">欢迎来到湖南</h2>
| ^^^^^^^^^^^^^^^^^^^^
3 | </div>
(found in <Root>)
warn$2 @ vue.js:5108
:5500/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
//翻译
vue.js:5108[vue warn]:编译模板时出错:
无效表达式:中的意外标记“{”
{不透明}}
原始表达式::style=“{{opacty}}”
1 |<div id=“root”>
2|<h2:style=“{{opacty}”>欢迎来到湖南</氢气>
| ^^^^^^^^^^^^^^^^^^^^
3 |</div>
(在<Root>中找到)
警告$2@vue.js:5108
:5500/favicon.ico:1加载资源失败:服务器响应状态为404(未找到)
改正:
<h2 :style="{opacity}">欢迎来到湖南</h2>
生命周期的8个元素:
<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的值是:{{n}}</h2>
<button @click="add">点击n+1</button>
<button @click="by">点击销毁</button>
</div>
</body>
<script>
new Vue({
el: '#root',
// template:`<h2>当前的值是:{{n}}</h2>
// <button @click="add">点击n+1</button>`,//此处为模板,``符合可以换行,''不可以换行,模板内容需要一行写完
//template:`<div>
// <h2>当前的值是:{{n}}</h2>
// <button @click="add">点击n+1</button>
//</div>`, //不能有两个节点,只能有一个根元素
data: {
n: 1
},
methods: {
add() {
this.n++
},
by() {
this.$destroy(); //销毁一个vue实例,解绑它所有的自定义的事件监听器和全部指令
}
},
watch: {
n() {
console.log('n暴力');
}
},
beforeCreate() {
console.log('beforeCreate');
},
create() {
console.log('create');
},
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>
</html>
<!--
vm的生命周期:
将要创建 ===> 调用beforeCreate函数
创建完毕 ===> 调用create函数
将要挂载 ===> 调用beforeMount函数
(重要)挂载完毕 ===> 调用mounted函数 ===========【重要的钩子】
将要更新 ===> 调用beforeUpdate函数
更新完毕 ===> 调用updated函数
(重要) 将要销毁 ===> 调用beforeDestroy函数 ===========【重要的钩子】
销毁完毕 ===> 调用destroyed函数
张三的一生:
将要出生
(重要) 呱呱坠地 ===> 检查身体各项指标
学会说话
学会走路
。。。。。
。。。。。
(重要)将要永别 ===> 交代后事
已经永别
-->
总结:
<!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 type="text/javascript" src="../js/vue.js"></script>
</head>
<!--
总结:
常用的生命周期钩子:
1:mounted,发送Ajax请求、启动定时器,解绑自定义事件、订阅消息等(初始化操作)
2:beforeDestroy:清除定时器,解绑自定义事件、取消订阅消息等(收尾工作)
关于销毁vue实例:
1:销毁后借助vue开发工具看不到任何信息
2:销毁后自定义事件会失效,但原生DOM事件依然有效
3:一般不会再beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了
-->
<body>
<div id="root">
<h2 :style="{opacity}">欢迎来到湖南</h2>
<button @click="stop">停止变化</button>
</div>
</body>
<script>
const vm = new Vue({
el: '#root',
data: {
opacity: 1
},
methods: {
stop(){
this.$destroy();
}
},
//vue完成模板的解析并把初始的真实DOM元素放入页面后(挂载完毕)调用mounted
mounted() {
this.timer = setInterval(() => {
this.opacity -= 0.01
if (this.opacity <= 0) this.opacity = 1
}, 16)
},
beforeDestroy() {
console.log('vm即将没了');
clearInterval(this.timer)
},
})
</script>
</html>