【Vue】小例子入门以及生命周期探讨-白红宇的个人博客

发布日期：2021-05-15 03:10:53 浏览次数：27 分类：原创文章

本文共 676 字，大约阅读时间需要 2 分钟。

文章目录

1.鼠标停留显示信息

代码

html文件

<html><head><link rel="stylesheet" href="index.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body><div id="app-2"><span v-bind:title="message">鼠标悬停几分钟查看此处动态绑定的提示信息！</span></div><script src="index.js"></script></body></html>

.js文件

var app2 = new Vue({el:'#app-2',data:{message:'页面加载于'+new Date().toLocaleString()}})

示例图
在这里插入图片描述

2.显示和隐藏控件

代码区

html<div id="app-3"><p v-if="seen">现在你看到我了</p></div>jsvar app3=new Vue({el:'#app-3',data:{seen:true}})

示例图
在这里插入图片描述

html<div id="app-3"><p v-if="seen">现在你看到我了</p></div>jsvar app3=new Vue({el:'#app-3',data:{seen:false}})

3.Vue生命周期钩子

代码区

4.计算属性

有一个缓存的情况，如果依赖的值没有发生改变，不会重新调用方法
*方法，只要页面重新渲染，方法就会再次执行

上一篇：ionic4 路由跳转刷新实战

下一篇：【OS】自考总结

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！