Vue入门——模板语法

模板语法

本文写作初衷，最近给同事分享了一下 Vue 的入门教程，但是，感觉在分享过程中，讲得比较乱，没有达到预期的效果；另外，在翻看官方文档中，发现有很多知识原来自己没有注意的地方，因此，通过本系列文章巩固一下自己的学习。

个人觉得 vue 官方文档已经讲解的非常好了，更详细内容请查看：https://cn.vuejs.org/

  模板语法，就是动态的 HTML 页面，包含一些 js 代码，双大括号表达式、指令（v-bind 等）

1 双大括号

{{message}}

  相当于 v-text 指令：；

  另外，双大括号可以调用对象的方法，也可以直接在双大括号中使用 JavaScript 表达式：

    
    
    


    
    

        
        

        {{add(message)}}
        

        {{ message.split(' ').reverse().join(',') }}
    
    

2 原始 HTML

  双大括号会将数据解释为普通文本，而非 HTML 代码。有时候，我们可能会在数据中保存部分的 HTML 标签，例如：换行符
；这时候，如果使用双大括号，会看到标签被当做文本展示，而不是作为换行标签，我们可以使用 v-html 指令，将数据作为 HTML 代码展示：

    
    {{message}}
    

3 指令：数据绑定

  双大括号语法，无法作用在 HTML 特性上，这种情况下，我们会使用 v-bind 指定，

• 主要作用，指定属性值，
• 通常的写法： v-bind:xxx=‘yyy’
• 简写：:xxx='yyy'

3 指令：事件绑定

  v-bind 主要绑定属性值，而我们的 HTML 元素通常还有一些时间，例如，按钮的点击事件等。在 vue 中，我们可以使用 v-on 绑定事件：

• 通常的写法：v-on:keyup=‘xxx’ 或 v-on:keyup=‘xxx(参数)’
• 简写： @keyup=‘xxxx’

    点我

4 动态参数

  上边的指令，都是给指定的属性绑定值，或者给指定的事件绑定方法，Vue 2.6 之后，甚至允许我们绑定一个动态的属性，具体写法如下

<a v-bind:[attributeName]="url"> ... a>

  这里 attributeName 也会作为 JavaScript 表达式动态求值，如果 data 中 attributeName 为 href 那么，就相当于 ... ；另外，需要注意的是，url 作为绑定的值，也是一个 JavaScript 表达式，如果是一个指定的字符串而不是在 data 中声明的，需要使用在添加引号，表示是一个字符串。

{{message}}

  另外，需要注意的是，参数部分（即上边的 attributeName），是作为 HTML 中的属性名称，因此不能有引号和空格。