Vue2学习计划三：插值语法

松鼠先生

发布于 2022-02-22 14:56:45

6870

发布于 2022-02-22 14:56:45

一、什么是插值语法

插值字面意思大概就是插入值，那么把什么值插入什么地方就是我们研究的了。既然这个插值语法是Vue2里面的语法，那么肯定跟Vue的核心思想有关。Vue的核心是采用简洁的模板语法来声明式地将数据渲染进DOM系统。那么数据从哪来，插入哪，我们大概就知道了。我们响应式的数据插入到DOM中。这正是插值语法要做的。

二、不得不提的Mustache插值

前面浆果了，Mustache采用{{}}，将Vue实例中的数据插入DOM中

<div id="app">{{message}}</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '欢迎观看,你的鼓励是我进步的动力'
        }
    })
</script>

如上代码，将欢迎观看,你的鼓励是我进步的动力插入到了DOM中显示。但是，这个{{}}只能在元素内部使用，不能在元素属性位置上使用。而且不仅仅可以如上写变量，还可以实现一些简单的表达式。

三、其他插值指令

1. v-once

我们知道Vue是响应式的，那么当Vue中的数据改变时，相应的DOM中展示的数据也会改变。那么当我们想一次性使用，永久不改变DOM中展示的某个数据时，是不是只能定义一个永远不改变的变量呢？当然不是，此时我们的v-once就派上用场了，如下代码：

<div id="app">
  <h2 v-once>{{message}}</h2>
  <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你的观看，是我前进的动力'
    }
  })
</script>

代码输完，请紧跟我魔鬼的步伐，谷歌浏览器下点击完美的F12，然后切到Console栏，在>后面紧紧的输入app.message = “你看我变不变”。然后用力按下键盘上最大的那颗回车键。你就可以看到

你看吧，是不是带上v-once那个元素的内容并没有随着message变化而变化。

2. v-html

你看他居然使用html了。那肯定跟网页有关了。你都在写网页了，那必然不是跟写代码有关。差一点点就猜对了，这个就是跟链接有关。接下来show the code

<div id="app">
  <h2 v-html="src"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      src: '<a href="http://www.baidu.com">百度</a>'
    }
  })
</script>

这个v-html其实就是以链接的方式展示数据。如上。当然里面可以不是百度，可以是你想要跳转的网页，当然如果违规就是让人讨厌的404了。

效果展示：

3. v-text

看着名字text，说实话有点鸡肋。目前身为菜鸡的我还不知道这个插值有啥用。不过既然存在，必有其道理。我们还是学习学习，忘了就算了。这个跟Mustache功能差不多，但是远没有Mustache强大。比如使用了v-text元素内部的文本会被覆盖，再比如使用v-text就不能使用简单的表达式（字符串拼接等）

<div id="app">
  <h2 v-text="message"></h2>
  <h2 v-text="message">我本来有值的，就是要你覆盖我</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '这个是我不懂存在意义的插值'
    }
  })
</script>

效果展示：

4. v-pre

有没有想过，如果某一天我们使用Vue写一个Vue教程，我们总不能一直使用Mustache替代{{message}}吧。我们要在DOM中展示出{{message}}时怎么操作呢？这就是v-pre的功效了。v-pre主要用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。不过依然不常用

<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你的观看，是我前进的动力'
    }
  })
</script>

效果展示：