二、插值操作

01-Mustache语法

1.1代码实战


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-Mustache语法title>
head>
<body>

<div id="app">
  
  <h2>{
    {message}}h2>
  <h2>{
    {message}}br>Long time no see!h2>
  <h2>{
    {firstName+lastName}}h2>
  <h2>{
    {firstName+"_"+lastName}}h2>
  <h2>{
    {firstName}} {
    {lastName}}h2>
  <h2>{
    {counter * 2}}h2>
div>

<script type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  const vm = new Vue({
      
    el: '#app',
    data: {
      
      message: 'hello world!',
      firstName: 'lin',
      lastName: 'willen',
      counter: 100
    }
  })
script>
body>
html>

1.2运行结果

二、插值操作_第1张图片

02-v-once指令的使用

2.1v-once

  • 该指令后面不需要跟任何表达式
  • 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变

2.2代码实战


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-once指令的使用title>
head>
<body>

<div id="app">
  <h2>{
    {message}}h2>
  <h2 v-once>{
    {message}}h2>
div>

<script type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  const vm = new Vue({
      
    el: '#app',
    data: {
      
      message: 'hello world!'
    }
  })
script>
body>
html>

2.3运行结果

二、插值操作_第2张图片

2.4Console修改message值

二、插值操作_第3张图片

03-v-html指令的使用

3.1v-html

1、 某些情况下,我们从服务器请求到的数据本身就是一个HTML代码

  • 如果我们直接通过{ {}}来输出,会将HTML代码也一起输出
  • 但是我们可能希望的是按照HTML格式进行解析,并且显示对应的内容

2、 如果我们希望解析出HTML展示,可以使用v-html指令

  • 该指令后面往往会跟上一个string类型
  • 会将string的html解析出来并且进行

3.2代码实战


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-v-html指令的使用title>
head>
<body>

<div id="app">
  
  <h2>{
    {url}}h2>
  <h2 v-html="url">h2>
div>

<script type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  const vm = new Vue({
      
    el: '#app',
    data: {
      
      //服务器返回url时,可能不止返回url,可能会把整个a标签返回,如下
      url:'百度一下'
    }
  })
script>
body>
html>

3.3运行结果

二、插值操作_第4张图片

04-v-text指令的使用

4.1v-text

  • v-text作用和Mustache比较相似:都是用于数据显示在界面中
  • v-text通常情况下,接受一个string类型,原先在标签内的值会被覆盖
  • v-text不够灵活,一般开发中,就是用Mustache语法插值

4.2代码实战


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-text指令的使用title>
head>
<body>

<div id="app">
  <h2>{
    {message}} world!h2>
  <h2 v-text="message"> world!h2>
div>

<script type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  const vm = new Vue({
      
    el: '#app',
    data: {
      
      message: 'hello'
    }
  })
script>
body>
html>

4.3运行结果

二、插值操作_第5张图片

05-v-pre指令的使用

5.1v-pre

  • v-pre用于跳过这个元素和它子元素的编译过程,用于显示原来的Mustache语法

5.2代码实战


<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 type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  const vm = new Vue({
      
    el: '#app',
    data: {
      
      message: 'hello world!'
    }
  })
script>
body>
html>

5.3运行结果

二、插值操作_第6张图片

06-v-cloak指令的使用

6.1v-cloak

  • cloak:斗篷
  • 某些情况下,浏览器可能会直接显示出未编译的Mustache标签

6.2代码实战


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06-v-cloak指令的使用title>
  <style>
    [v-cloak]{
      
      display: none;
    }
  style>
head>
<body>

<div id="app" v-cloak>
  <h2>{
    {message}}h2>
div>

<script type="text/javascript" src="../js/vue.js">script>


<script type="text/javascript">
  setTimeout(function () {
      
    const vm = new Vue({
      
      el: '#app',
      data: {
      
        message: 'hello world!'
      }
    })
  },1000)

script>
body>
html>

6.3运行结果

如果没有加v-cloak以及style内容,那么此时显示{ {message}},用户体验极差
二、插值操作_第7张图片
加了v-cloak以及style内容后会先显示空白,等待1秒后Vue实例创建出来后把文本显示出来
二、插值操作_第8张图片

你可能感兴趣的:(Vue)