代码结构

一、     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. AntDesignBlazor示例——Modal表单

    本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考. 示例代码仓库:https://gitee.com/known/BlazorDemo 1. 学习目标 创建Mod ...

  2. RIPEMD加密算法：原理、应用与安全性

    一.引言 在信息时代,数据安全愈发受到重视,加密算法作为保障信息安全的关键技术,其性能和安全性备受关注.RIPEMD(RACE Integrity Primitives Evaluation Mess ...

  3. 【eBPF-01】初见：基于 BCC 框架的第一个 eBPF 程序

    闲言少叙,本文记录了如何零基础通过 BCC 框架,入门 eBPF 程序的开发,并实现几个简易的程序. 有关 eBPF 的介绍,网络上的资料有很多,本文暂且先不深入讨论,后面会再出一篇文章详细分析其原理 ...

  4. apache+mysql+php环境安装及配置

    一.安装mysql 1.yum安装mysql # yum -y install mysql mysql-server 2.安装mariadb,用mariadb来启动数据库,systemctl star ...

  5. 3.CRUD及批量操作

    文档的CRUD index 和 create 操作用put(但是如果没有指定id必须用post,指定了id的可以用post,也可以用put) update和创建索引用post 获取用get 删除用de ...

  6. Pikachu漏洞靶场 PHP反序列化

    PHP反序列化 查看源码,以下为关键代码: class S{ var $test = "pikachu"; function __construct(){ echo $this-& ...

  7. 新一代通信协议 - Socket.D

    一.简介 Socket.D 是一种二进制字节流传输协议,位于 OSI 模型中的5~6层,底层可以依赖 TCP.UDP.KCP.WebSocket 等传输层协议.由 Noear 开发.支持异步流处理.其 ...

  8. flutter MaterialApp介绍

    MaterialApp 是 Flutter 中常用的一个 widget,它是构建基于 Material Design 风格应用的根组件,主要负责各种全局状态的管理以及定义应用程序的主题样式等. voi ...

  9. 使用 Python 将数据写入 Excel 工作表

    在数据处理和报告生成等工作中,Excel 表格是一种常见且广泛使用的工具.然而,手动将大量数据输入到 Excel 表格中既费时又容易出错.为了提高效率并减少错误,使用 Python 编程语言来自动化数 ...

  10. 1024 | 9位开发者分享生涯“最”时刻，文武状元大PK等你来

    本文分享自华为云社区<1024程序员节,和华为云一起做不被定义的开发者>,作者:华为云社区精选 . 1024,祝所有开发者们节日快乐 "代码有注释,程序无bug, 需求不改动,永 ...