【Vue.js】016-Vue：Vue的生命周期、定义Vue的template、插值操作
【Vue.js】016-Vue：Vue的生命周期、定义Vue的template、插值操作
訾博ZiBo
发布于 2025-01-06 07:21:12
发布于 2025-01-06 07:21:12
代码可运行
运行总次数：0
代码可运行
五、Vue的生命周期
1、什么是Vue的生命周期
生命周期就是指一个对象的生老病死。生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程；
2、Vue的生命周期
六、定义Vue的template
1、缩进
前端代码建议缩进两个空格；
2、模板
说明：这个模板用于类似Idea里面，这里仅作记录；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好！'
}
})
</script>
</body>
</html>七、插值操作
1、mustache插值语法
概述：
也就是双大括号语法（{{}}），将对应的文本进行显示；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 这种写法就是所谓的mustache语法 -->
<h2>{{message}}</h2>
<!-- 连接 -->
<h2>{{firstName + lastName}}</h2>
<!-- 加空格等内容 -->
<h2>{{firstName + ' ' + lastName}}</h2>
<!-- 另一种加空格的方式 -->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 乘法 -->
<h2>{{counter * 2}}</h2>
<!-- 除法 -->
<h2>{{counter / 2}}</h2>
<!-- 加法 -->
<h2>{{counter + 2}}</h2>
<!-- 减法 -->
<h2>{{counter - 2}}</h2>
</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好！',
firstName: 'zi',
lastName: 'bo',
counter: 100
}
})
</script>
</body>
</html>运行结果：
（下面的，都不常用！）
2、v-once
概述：
Vue的数据是响应式的，数据和视图同步发生变化，但有时候我们不需要这种响应式，我们想要一旦赋值不再改变，这个时候就需要v-once；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" v-once>{{message}}</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好！'
}
})
app.message = '哈哈哈';
</script>
</body>
</html>运行结果：
3、v-html
概述：
有时候我们从服务器请求到的是html代码，不可直接输出，需要按照html的格式进行解析，这里就用到v-html；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" v-html="message"></div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '<h1>这是一个H1标题</h1>'
}
})
</script>
</body>
</html>运行结果：
4、v-text
概述：
v-text与mustache语法非常相似，都是用于将数据显示在页面中；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" v-text="message"></div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好！'
}
})
</script>
</body>
</html>运行结果：
5、v-pre
概述：
意思类似是取消mustache插值语法，使得{{xxx}}无效，直接显示{{xxx}}；
将里面的内容原封不动地显示出来，而不做任何解析；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" v-pre>{{message}}</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好!'
}
})
</script>
</body>
</html>运行结果：
6、v-cloak
概述：
在某些情况下（没找到对应的值），浏览器会直接显示未编译的mustache标签，我们使用v-cloak使其不显示；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" v-cloak>hello,{{name}}</div>
<script src="../../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name1: 'zibo'
}
})
</script>
</body>
</html>运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
Vue之插值操作
更多 >
腾讯云开发者
