代码结构

一、     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的更多相关文章

  1. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  2. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  3. Vue基础之用插值表达式在视图区显示数据

    Vue基础之用插值表达式在视图区显示数据 第一步:当然就是你要引入Vue.js这个脚本文件啦! <script src="https://cdn.jsdelivr.net/npm/vu ...

  4. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  5. 基础知识（C#语法、数据库SQL Server）回顾与总结

    前言 已经有大概一个多月没有更新博客,可能是开始变得有点懒散了吧,有时候想写,但是又需要额外投入更多的时间去学习,感觉精力完全不够用啊,所以为了弥补这一个多月的潜水,决定写一篇,衔接9月未写博客的空缺 ...

  6. Vue基础知识之指令和生命周期（一）

    优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成 ...

  7. Python VUE 基础知识

    一 什么是VUE 它是一个构建用户界面的JavaScript框架,自动生成(js,css,HTML文件) 二 如何使用VUE 1.  应用vues.js <script src="vu ...

  8. Vue基础知识梳理

    1. Vue 实例 1.1 创建一个Vue实例 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的.可复用的组件树组成.demo 1.2 数据与方法 数据的响应式渲 ...

  9. Vue基础知识总结（一）

    一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器  data:用于存储数据      methods:定义方法(方法里th ...

  10. Python基础知识1-基础语法

    pyenv--版本管理工具(后续再补)可参见https://www.jianshu.com/p/8aaf2525fa80 冯诺依曼体系架构 编程基础 语言分类  低级语言到高级语言 高级语言 程序Pr ...

随机推荐

  1. HTTPClients使用

    一. 创建httpclient对象用于发送get.post等请求 1. HttpClients.custom()的方式--自定义httpclient对象,多用于含有cookie的请求 1. Cooki ...

  2. STA分析-复制

    1 静态时序分析(Static Timing Analysis)静态时序分析(Static Timing Analysis):静态执行对于数字设计时序的分析,不依赖于施加在输入端口上的激励,验证设计是 ...

  3. [CF3C] Tic-tac-toe

    [题目描述] 显然,我们每个人都熟悉Tic-tac-toe游戏. 这个游戏的规则是:两个人依次在3X3的棋盘上下棋. 当一个人有3个棋子连成一行或一列或一纵列时,则这个人已经获得胜利.这时则停止下棋. ...

  4. cocos2d-Js 各类碰撞检测

    这里总结一下点.圆.矩形之间的简单碰撞检测算法(矩形不包括旋转状态) 点和圆的碰撞检测: 1.计算点和圆心的距离 2.判断点与圆心的距离是否小于圆的半径 isCollision: function(p ...

  5. LeetCode190：颠倒二进制（位运算分治! 时间复杂度O(1)）

    解题思路:这道题很两种解法,常规的就是O(n),另一种就是巧妙的利用位运算实现分治,时间复杂度O(1),类似于归并排序.不过这个递归不是自顶向下,而是巧用位运算从自底向上实现. 比如01001000通 ...

  6. 5分钟攻略Spring-Retry框架实现经典重试场景

    前言 今天分享干货,控制了篇幅,5分钟内就能看完学会. 主题是Spring-Retry框架的应用,做了一个很清晰的案例,代码可下载自测. 框架介绍 Spring-Retry框架是Spring自带的功能 ...

  7. 【C#】【命名空间（namespace）】.NET6.0后支持的顶级语句使用问题

    创建C#项目且使用.Net6.0以上的版本时,默认code会使用顶级语句形式: 1.略去static void Main(String[ ] args)主方法入口: 2.隐式使用(即隐藏且根据代码所需 ...

  8. 【MySql】数据库_MySql基础

    yum install mysql mysql -u root -p 创建数据库 create database 数据库名; 查看所有数据仓库 show databases; 删除数据库 drop d ...

  9. Swagger系列：Spring Boot 2.x集成Spring Doc（Swagger 3.0）

    目录 一.简介 1.SpringFox工具(不推荐) 2.SpringDoc工具(推荐) 二.集成 1.环境 1. 引入Maven依赖 2.配置SpringDocConfig(配置类方式) 3.配置S ...

  10. java进行数据库操作的并发控制的2种方法

    本文分享自华为云社区<java进行数据库操作的并发控制>,作者:张俭. 在现代应用编码中,从数据库里面find出来,进行一些业务逻辑操作,最后再save回去.即: Person perso ...