从0开始学习vue——模版语法中你需要知道的事（插值篇）

廖伟明丶
669 阅读6分钟

gitee仓库地址：get-you-kown-vue

前言

一开始我非常纠结，接下来应该讲解那个环节的内容。是先讲模版语法还是data、methods、watcher这些配置参数。因为我觉得，盲目的努力学习并一定能带来高效的学习效率；而是应该有一个学习的方向，按照一定逻辑性的学习思路才能更好的理解某个技术的核心思想和使用。参考官方文档的目录，我也发现，模版语法是所有环节的最终汇聚地，不管是data、methods还是其他属性，最终都是作用于模版中。所以模版是在vue中极其重要的角色，最终决定先讲模板语法。

什么是模版语法

上一节内容我们说了vue的简单使用。这一节我们来详细说说vue中的模版语法。

模版语法指的其实是模版（template或el元素）中可以使用的语法规则，这个规则本身并不会被浏览器所遵循。

我们都知道浏览器将html代码渲染到页面中，所以对于vue来说，模版并不是最终渲染到页面的效果，而是会通过vue中的编译器编译成浏览器认识的html，然后在渲染到页面中。

流程：

graph TD
模版 --> 编译器 --> html代码 --> 渲染到页面

如果你还不清楚，我们来看一下这段代码以及其最终实现的效果：

<div>
    <p>我没有被编译器编译</p>

    <h1>{{title}}</h1>
    <button @click="alert">别tm点我</button>
</div>

<div id="app">
    <p>我有编译</p>

    <h1>{{title}}</h1>
    <button @click="alert">别tm点我</button>
</div>

<script>
let config = {
  el: '#app',
  data: {
    title: '一个简单的vue实例'
  },
  methods: {
    alert() {
      alert('你在点试试')
    }
  }
}
let vm = new Vue(config)

</script>

image.png

可以看到，没有编译的模版你怎么写的就怎么渲染，浏览器并无法识别对应的内容，比如绑定的title值和click事件，只是将原本的内容渲染到页面上，并不作处理，这样没有任何的效果。 但经过编译的模版，并没有哪些无效的占位符，而是将真实的内容和事件绑定和渲染到页面中。

插值

插值是模板语法中的一种语法规则，但这个规则只在vue中有效，浏览器本身是不遵循这个规则的。

插值的作用：就是插入到html中的值（我是这么理解的，但不一定只是插入文本，而是一个更加广泛的含义），从功能上来说就是模版可以通过变量名获取到对应的变量。上面示例模版中的title和alert就是插值，插值还有其他用法，我们一个一个来讲。

文本

文本插值，会将变量对应的变量值以字符的形式渲染到页面中。比如示例中的title，最终会渲染成title所代表的变量值“一个简单的vue实例”。这种相对好理解

插值语法： 核心就是双花括号{{param}}，双花括号内就是需要绑定的变量

<span>{{ message }}</span>

示例

<div id="app">
    <span>{{ message }}</span>
</div>

<script>
    let config = {
    el: '#app',
    data: {
        message: '一个简单的vue实例'
        }
    }
    let vm = new Vue(config)

    // 让message2秒后改变
    setTimeout(() => {
        vm.message = '我变了'
    }, 2000);
</script>

span标签内的内容最终会被message所代表的变量值‘一个简单的vue实例’作为字符串渲染到页面中，而且当message这个值发生改变，span标签内的内容也会发生变化，也就是数据驱动视图改变。

这里需要注意，文本插值最终只会讲变量值作为字符串渲染到页面中，如果你的变量值是对象或者函数，可能会有意想不到的情况，大家可以动手试试

HTML

既然我们可以插入文本内容，肯定也可以插入html代码片段，和文本不同的是，如果插入html代码片段，那最终会作为html代码渲染到页面上

语法: 和文本插值不同，html插值是通过v-html=“code”指令来进行绑定的，code就是需要绑定的变量名

<p v-html="code"></p>

示例：

<div id="app">
    <p>这是html插值</p>
    <p v-html="htmlCode"></p>

    <p>这是文本插值</p>
    <p>{{htmlCode}}</p>
</div>

<script>
    let config = {
    el: '#app',
    data: {
            htmlCode: '<a href="https://www.baidu.com" target="_blank">点我去百度</a>'
        }
    }
    let vm = new Vue(config)

    // 让message2秒后
    setTimeout(() => {
        vm.message = '我变了'
    }, 2000);
</script>

image.png

从示例图可以看出，插值为html的时候，会将htmlCode对应的变量值作为html片段渲染到页面中，可以帮助我们解决很多场景的问题。但你使用的时候需要注意，这种方式可能会导致你的网站被攻击（xss）。所以当我们使用v-html的时候需要进行预防处理。

attribute

从前面两个规则，我们其实可以推导出，文本插值是向html中插入文本内容，html插值是向html中插入html代码。那么attribute插值则是向html中插入属性。而属性往往是针对dom元素的，所以也就是向dom元素中插入属性值

语法： attribute插值的核心就是v-bind:，后面则是跟需要绑定的属性名称。而且attribute插值的语法可以简写成:。这也是它的特殊性

<input v-bind:disabled="param" />
or
<input :disabled="param" />

示例：

<div id="app">
    <input type="text" :disabled="allow" :value="value" :other="other">

</div>

<script>
    let config = {
      el: '#app',
      data: {
        value: '一个简单的vue实例',
        allow: 'disabled'
      }
    }
    let vm = new Vue(config)
</script>

效果：

image.png

这样就可以实现属性的绑定了，而且当绑定的属性值发生变化，页面视图也会重新渲染。大家也可以动手试试。

除了绑定组件中已有的属性，我们还可以为元素绑定其他的不相关的属性，比如示例中的other属性。虽然这些属性对于浏览器而言它并没有意义，但在后面的组件中，绑定属性可以作为父子组件传递参数的桥梁，当然这个是后话，你现在不需要去深究。

JavaScript表达式

插值除了可以是文本，属性和html代码外，还可以是JavaScript表达式。但和之前不同的是，我们只是可以在插值中使用JavaScript的表达式，vue最终会执行这个表达式并将最终的结果渲染到页面中。那么那些地方可以使用JavaScript表达式呢？你可能也猜到了，{{}}、V-html=""、v-bind:attribute=""这些地方都可以使用JavaScript表达式，而且除了插值，指令也可以使用JavaScript的表达式。

语法： 插值的内容既可以是普通的变量名，也可以是可执行的JavaScript表达式，如果是JavaScript表达式，vue在渲染的时候会先执行该表达式并得到最终的结果，再渲染页面

<span>{{ error ? 'success' : 'false' }}</span>
<input disable="!allow" />

示例：

<div id="app">
    <p>运算</p>
    <p>{{ a + b }}</p>
    <p>字符串拼接</p>
    <p>{{ 'hello' + name }}</p>
    <p>方法调用</p>
    <p>{{ message.toUpperCase() }}</p>
</div>

<script>
let config = {
  el: '#app',
  data: {
    a: 1,
    b: 100,
    name: 'vimin',
    message: 'uppercase'
  }
}
let vm = new Vue(config)
</script>

javascript表达式几乎可以在模板中的所有动态绑定中使用，并不仅仅局限于插值。JavaScript表达式可以让我们更加灵活的在模板中编写逻辑代码。由于场景过多，无法一次性描述，可以先从简单的入手，等熟悉后，自然就可以很灵活的运用插值。但需要注意的是，这里并不建议编写过于复杂JavaScript表达式和语法（如es6语法）。这有可能会导致你的代码出现问题。

以上内容并非就是插值所有的用法，插值实际上非常灵活，也是模板中非常重要的部分之一。理解插值的作用对日后的使用和工作中也是非常重要的。

这里大家只要记住插值本身就是提供了一种将JavaScript逻辑写入模板中（变量或表达式），使模板更加灵活高效，可以实现更加复杂的页面效果的作用

由于篇幅有限，这里就只讲到插值这块内容。模板语法中还有一个非常重要的内容——指令，会在后面一篇文章中讲解

以上内容仅供学习参考，可能会有不够严谨的地方还望见谅，欢迎讨论。

avatar
文章
阅读
粉丝