<vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak
代码结构
一、 Mustache
1、效果
展示如何将数据展示在页面上
2、代码
01-Mustache.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-Mustache</title>
</head>
<body> <div id="app">
<h2>Hello {{message}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + '-----'+lastName}}</h2>
<h2>{{number * 2}}</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'World',
firstName: '张',
lastName: '三',
number: 10
}
})
</script> </body>
</html>
二、 v-once
1、 效果
说明：当值改变时使用了v-once标签的数据并没有随之改变。
2、代码
02-v-once.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-v-once</title>
</head>
<body> <div id="app">
<h2 v-once>{{message}}</h2>
<h2>{{message}}</h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '今天天气不错!'
}
})
</script> </body>
</html>
三、v-html
1、效果
按照HTML格式进行解析，并且显示对应的内容
1、 代码
03-v-html.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-v-html</title>
</head>
<body> <div id="app">
<div>{{href}}</div>
<div v-html="href"></div>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
href: '<a href="https://www.baidu.com">百度一下</a>'
}
})
</script> </body>
</html>
四、v-text
1、效果
v-text作用和Mustache比较类似，通常情况下，v-text接受一个string类型
2、 代码
04-v-text.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-v-text</title>
</head>
<body> <div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
</script> </body>
</html>
五、v-pre
1、效果
v-pre 数据的编译过程，例如如下我就想显示{{message}}我不希望显示“你好”这两个字
2、代码
05-v-pre.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-v-pre</title>
</head>
<body> <div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div> <script src="vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
</script> </body>
</html>
六、v-cloak
1、效果
页面编译需要一点时间，在没编译成功之前，普通的展示会在页面上显示出{{message}}, 增加了v-cloak后没有编译完成的情况下，不会展示。
（1）编译成功前：
（2）编译成功后：
2、代码
06-v-cloak.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-v-cloak</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body> <div id="app">
<h2> 普通展示： {{message}}</h2>
<h2 v-cloak> v-cloak展示： {{message}}</h2>
</div> <script src="vue.js"></script>
<script>
setTimeout(() => {
const app = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
}, 2000)
</script> </body>
</html>
<vue 基础知识 2、插值语法> v-once,v-html,v-text,v-pre,v-cloak的更多相关文章
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础知识之vue-resource和axios
Vue基础知识之vue-resource和axios 原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...
- Vue基础之用插值表达式在视图区显示数据
Vue基础之用插值表达式在视图区显示数据 第一步:当然就是你要引入Vue.js这个脚本文件啦! <script src="https://cdn.jsdelivr.net/npm/vu ...
- Vue基础知识简介
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- 基础知识（C#语法、数据库SQL Server）回顾与总结
前言 已经有大概一个多月没有更新博客,可能是开始变得有点懒散了吧,有时候想写,但是又需要额外投入更多的时间去学习,感觉精力完全不够用啊,所以为了弥补这一个多月的潜水,决定写一篇,衔接9月未写博客的空缺 ...
- Vue基础知识之指令和生命周期（一）
优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...
- Python VUE 基础知识
一 什么是VUE 它是一个构建用户界面的JavaScript框架,自动生成(js,css,HTML文件) 二 如何使用VUE 1. 应用vues.js <script src="vu ...
- Vue基础知识梳理
1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...
- Vue基础知识总结（一）
一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器 data:用于存储数据 methods:定义方法(方法里th ...
- Python基础知识1-基础语法
pyenv--版本管理工具(后续再补)可参见https://www.jianshu.com/p/8aaf2525fa80 冯诺依曼体系架构 编程基础 语言分类 低级语言到高级语言 高级语言 程序Pr ...
随机推荐
- Oracle参数文件spfile
spfile:server parameter file. spfile只能通过OEM(oracle enterprise manager)软件或者alter system命令进行修改. spfile ...
- ElasticSearch之Exists API
检查指定名称的索引是否存在. 命令样例如下: curl -I "https://localhost:9200/testindex_002?pretty" --cacert $ES_ ...
- JavaFx之SceneBuilder添加其他依赖库（十六）
JavaFx之SceneBuilder添加其他依赖库(十六) Could not open 'xxxxx.jar' Open operation has failed. Make sure that ...
- [Luogu 4912 帕秋莉的魔法] 题解报告
算法:DP, 背包,动态规划 简化版题目: 给定 \(n\) 个物品,物品的价值为 \(v_1 - v_n\),物品的体积为 \(w_1 - w_n\).需要选择一些物品,使它们的体积和为 \(V\) ...
- 产品经理，项目经理，FTO
职责与自驱 产品经理是要保证做正确的事:项目经理则是保证正确地做事:FTO 既要保证做正确的事,也要保证正确地做事,还要保证能拿到结果,且对结果负责. 能做事的专业人才不缺,但是既有专业知识和技能还能 ...
- MySQL进阶篇：详解存储引擎特点
MySQL进阶篇:第一章_一.四_存储引擎特点_Memory & MySQL存储引擎的区别及特点 1.1 存储引擎特点 1.1.3 Memory 1). 介绍 Memory引擎的表数据时存储在 ...
- row_number函数的不稳定性
本文分享自华为云社区<row_number函数的不稳定性>,作者: nullptr_ . row_number为窗口函数,用来为各组内数据生成连续排号 基础用法 postgres=# se ...
- 你应该知道的数仓安全——默认权限实现共享schema
摘要: 一种典型客户场景是一些用户是数据的生产方,需要在schema中创建表并写入数据:而另一些用户是数据的消费方,读取schema中的数据做分析.使用Alter default privilege语 ...
- 实践GoF的设计模式：代理模式
摘要: 代理模式为一个对象提供一种代理以控制对该对象的访问. 本文分享自华为云社区<[Go实现]实践GoF的23种设计模式:代理模式>,作者:元闰子 . 简介 GoF 对代理模式(Prox ...
- 什么是MircoPython？
摘要:互联网玩家为了让Python这样的容易学,简单易学.社区API丰富的语言可以在嵌入式领域用上,逐渐开始了一轮Python上嵌入式的迁移,这样就有了今天的主角--MircoPython. 本文分享 ...