Vue学习（一）插值操作

Vue学习（一）——插值操作

Day1

---

---

前言

此文章根据官方文档及些网络资料编写，仅供个人使用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue的实例

Vue实例的简单实现，

<div id="app">
  <h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello World!',
    },
  })
</script>

结果：

二、插值的操作

1.v-if

当为真的时候会显示，为假的时候不显示。

  <div id="app">
    <h2 v-if="true">此时为True</h2>
  </div>

2.v-else

v-else，此时为假的时候，页面会显示：此时为false。

  <div id="app">
    <h2 v-if="false">此时为True</h2>
    <h2 v-else>此时为false</h2>
  </div>

4.v-text

与Mustache语法基本一致，返回一个String类型
简写：{{}}

  <div id="app">
    <h2>{{message}}, World!</h2>
    <h2 v-text="message">, World!</h2>
  </div>
    <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'Hello'
      }
    })
  </script>

结果：

5.v-html

有些时候我们会从服务器上请求到的数据是HTML格式，而我们希望数据按照HTML格式解析，显示对应的内容，这个时候就用到了v-html

  <div id="app">
    <h2>{{message}}</h2>
    <h2 v-html="message"></h2>
  </div>
    <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '<font color=#FF0000 size=5>我是红色</font>'
      }
    })
  </script>

6.v-once

页面只会渲染一次，就算后面数据发生了改变，他也不会进行改变

  <div id="app">
    <h2 v-once>{{message}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      }
    })
  </script>

就算我改变了message的值，页面也不会改变

7.v-pre

显示他原本的内容，跳过了编译过程

  <div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好'
      }
    })
  </script>

8.v-cloak

与该元素绑定到编译结束，可以隐藏还未编译完毕的Mustache标签直到结束。
这里我们使用延时，刷新页面会空白，等待1秒后才会显示Hello。

  <style>
    [v-cloak] {
      display: none;
    }
  </style>
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>
  <script>
    setTimeout(function () {
      const app = new Vue({
        el: '#app',
        data: {
          message: 'Hello'
        }
      })
    }, 1000)
  </script>

总结

Vue学习（一）插值操作

Vue学习（二）动态绑定与事件监听

Vue学习（三）循环遍历与表单绑定

Vue学习（四）组件与组件间的通信

Vue学习（五）组件的插槽