【Vue.js】016
【Vue.js】016
五、Vue的生命周期1、什么是Vue的生命周期生命周期就是指一个对象的生老病死。生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程；2、Vue的生命周期六、定义Vue的template1、缩进前端代码建议缩进两个空格；2、模板说明：这
【Vue.js】016
1、什么是Vue的生命周期
生命周期就是指一个对象的生老病死。生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程；
2、Vue的生命周期
1、缩进
前端代码建议缩进两个空格；
2、模板
说明：这个模板用于类似Idea里面，这里仅作记录；
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../../js/vue.js"></script>
<script>
ct app = new Vue({
el: '#app',
data: {
message: '你好！'
}
})
</script>
</body>
</html>1、mustache插值语法
概述：
也就是双大括号语法（{{}}），将对应的文本进行显示；
代码演示：
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 这种写法就是所谓的mustache语法 -->
<h2>{{message}}</h2>
<!-- 连接 -->
<h2>{{firstame + lastame}}</h2>
<!-- 加空格等内容 -->
<h2>{{firstame + ' ' + lastame}}</h2>
<!-- 另一种加空格的方式 -->
<h2>{{firstame}} {{lastame}}</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>
ct app = new Vue({
el: '#app',
data: {
message: '你好！',
firstame: 'zi',
lastame: 'bo',
counter: 100
}
})
</script>
</body>
</html>运行结果：
（下面的，都不常用！）
2、v-once
概述：
Vue的数据是响应式的，数据和视图同步发生变化，但有时候我们不需要这种响应式，我们想要一旦赋值不再改变，这个时候就需要v-once；
代码演示：
代码语言：javascript代码运行次数：0运行复制<!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>
ct app = new Vue({
el: '#app',
data: {
message: '你好！'
}
})
= '哈哈哈';
</script>
</body>
</html>运行结果：
、v-html
概述：
有时候我们从服务器请求到的是html代码，不可直接输出，需要按照html的格式进行解析，这里就用到v-html；
代码演示：
代码语言：javascript代码运行次数：0运行复制<!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>
ct app = new Vue({
el: '#app',
data: {
message: '<h1>这是一个H1标题</h1>'
}
})
</script>
</body>
</html>运行结果：
4、v-text
概述：
v-text与mustache语法非常相似，都是用于将数据显示在页面中；
代码演示：
代码语言：javascript代码运行次数：0运行复制<!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>
ct app = new Vue({
el: '#app',
data: {
message: '你好！'
}
})
</script>
</body>
</html>运行结果：
5、v-pre
概述：
意思类似是取消mustache插值语法，使得{{xxx}}无效，直接显示{{xxx}}；
将里面的内容原封不动地显示出来，而不做任何解析；
代码演示：
代码语言：javascript代码运行次数：0运行复制<!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>
ct app = new Vue({
el: '#app',
data: {
message: '你好!'
}
})
</script>
</body>
</html>运行结果：
6、v-cloak
概述：
在某些情况下（没到对应的值），浏览器会直接显示未编译的mustache标签，我们使用v-cloak使其不显示；
代码演示：
代码语言：javascript代码运行次数：0运行复制<!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>
ct app = new Vue({
el: '#app',
data: {
name1: 'zibo'
}
})
</script>
</body>
</html>运行结果：
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 13:36:13
推荐阅读
| 留言与评论（共有 7 条评论） |
| 本站网友 病毒的种类 | 11分钟前 发表 |
| '#app' | |
| 本站网友 李孟尧 | 29分钟前 发表 |
| Vue的生命周期六 | |
| 本站网友 鼻头鼻翼整容 | 6分钟前 发表 |
| data | |
| 本站网友 六盘水二手房 | 20分钟前 发表 |
| 定义Vue的template1 | |
| 本站网友 国内旅游网站 | 10分钟前 发表 |
| 将对应的文本进行显示；代码演示：代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <!-- 这种写法就是所谓的mustache语法 --> <h2>{{message}}</h2> <!-- 连接 --> <h2>{{firstame + lastame}}</h2> <!-- 加空格等内容 --> <h2>{{firstame + ' ' + lastame}}</h2> <!-- 另一种加空格的方式 --> <h2>{{firstame}} {{lastame}}</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> ct app = new Vue({ el | |
| 本站网友 发膜哪个牌子好 | 25分钟前 发表 |
| '你好！' } }) </script> </body> </html>七 | |