<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 ...
随机推荐
- [2020-2021 集训队作业] Tom & Jerry
题目背景 自选题 by ix35 题目描述 给定一张包含 \(n\) 个顶点和 \(m\) 条边的 无向连通图,Tom 和 Jerry 在图上进行了 \(q\) 次追逐游戏. 在第 \(i\) 次游戏 ...
- [ABC266Ex] Snuke Panic (2D)
Problem Statement Takahashi is trying to catch many Snuke. There are some pits in a two-dimensional ...
- Hive SQL之表与建表
数据类型: 建表 create database itheima; --1.创建一张表 -- 表名 --字段 名称 类型 顺序 --字段之间的分隔符 create table itheima.t_a ...
- SpringSecurity入门(SSM版)
1. 简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Sp ...
- CodeForces - 764C
C. Timofey and a tree time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 你是否想知道如何应对高并发？Go语言为你提供了答案！
并发编程是当前软件领域中不可忽视的一个关键概念.随着CPU等硬件的不断发展,我们都渴望让我们的程序运行速度更快.更快.而Go语言在语言层面天生支持并发,充分利用现代CPU的多核优势,这也是Go语言能够 ...
- 启动android项目时报dx.jar错误的解决方案
启动android项目时遇到如下错误: Failed to load E:\SDK\android-sdk-windows\build-tools\27.0.2\lib\dx.jar 原因: 自动使用 ...
- 一键打包,随时运行,Python3项目虚拟环境一键整合包的制作(Venv)
之前我们介绍了如何使用嵌入式 Python3 环境给项目制作一键整合包,在使用嵌入式 Python 环境时,通常是作为另一个应用程序的一部分,而Python3虚拟环境是为了在开发过程中隔离项目所需的 ...
- CentOS 7 安装 Python 3.X版本
由于Centos7默认安装了python2.7.5版本,因此想安装python 3.X版本就需要特殊处理. 详情可以参考南宫羽香的技术博客原文:https://www.cnblogs.com/lclq ...
- 【推荐】Helix的编程语言配置
目录 编程语言 languages.toml 语言配置 探测文件类型 编程语言服务 为一个编程语言配置语言服务 Tree-sitter 语法配置 选择语法 编程语言 编程语言设置以及语言服务器设置位于 ...