Vue.js 学习(3) -- 语法基础

╰半橙微兮° 2022-06-15 02:57 238阅读 0赞

> Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。  
> 在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。  
> 如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

## 插值 ##

**1、文本插值：**

使用双大括号绑定数据，这种语法称为“Mustache”：

<span>Message: { { msg }}</span>

双括号表示的就是一个文本插值。其中，msg是数据对象的属性，例如像下面这样：

var app = new Vue({
      el: '#vueApp',
      data: { msg: 'Hello VueJS!' }
    })

只要对象的属性msg发生了变化，文本插值也就会更新。

还记得前面说过的vue指令吗？通过指令v-once，我们也可以一次性的为\{ \{ msg \}\}赋值，之后，当msg再次更新的时候，span标签内的值也都不会改变了。v-once的用法：

<span v-once>This will not change when msg updates: { { msg }}</span>

**2、HTML插值**

双大括号会将括号内的内容解释为纯文本，而非html，如果想要输出html，请使用v-html指令。

这样，该标签内的数据绑定将会被忽略。

**3、属性**

如果想为html标签的属性绑定数据，不能使用双大括号，应该使用v-bind指令。  
栗子：

var app = new Vue({
      el: '#app',
      data: {
        dynamicClass: 'visibleClass'
      }
    })

**4、JavaScript表达式**

在双大括号内我们可以使用JS表达式，也就是，双大括号内支持运算。

{ { number + 1 }} { { ok ? 'YES' : 'NO' }} { { message.split('').reverse().join('') }}

在使用v-bind指令时，也可以使用JS表达式：

## 指令 ##

这个概念在前面的博客中已经提到过了，也简单了解了例如v-on, v-bind, v-for等等一系列指令。

指令，采用统一格式：v-xxx。它的目的就是，当某些属性值改变时，与之相关的DOM需要作出改变。  
例如：

此时，如果seen的值为true，那么p元素可见；否则p元素不可见。

**1、指令的“参数”**

某些指令可以接受一个可选值（就像函数的参数），用冒号与后面的插值隔开，例如v-bind指令后可以加一个html属性，用来对其作出修改：

此时，a标签的href就和url变量绑定。

另一个栗子：v-on用来绑定DOM事件，它也可以接受一个可选值，就是绑定的事件名：

**2、修饰符**

在使用v-on绑定事件的时候，我们可以使用.来指定事件发生时的特殊方式。  
例如：

这样，在触发事件时，将会首先调用event.preventDefault()，阻止默认方法。

## 过滤器 ##

过滤器由管道符号 “ | ” 表示，用作文本格式化；它可以被用在两个地方，双括号插值（mustaches，这个单词的意思是小胡子？第一个想到的人是乱世佳人里面的瑞德啊囧）和v-bind表达式（绑定html属性值时使用的指令）。  
栗子：

{ { message | capitalize }}  <div v-bind:id="rawId | formatId"></div>

如果想在其他地方使用文本格式化，请使用下一章将要介绍的计算属性。

过滤器函数将默认它前面的那个表达式的值作为第一个参数。并且过滤器可以穿连使用。  
一个简单的过滤器栗子：

new Vue({
      // ...
      filters: {
        capitalize: function (value) {
          if (!value) return ''
          value = value.toString()
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })

串联使用的过滤器：

{ { message | filterA | filterB }}

过滤器其实就是JS函数，因此也可以接受参数。不过它的第一个参数已经被占用，因此，填入的参数将作为第二个、第三个…参数。

## 缩写 ##

**1、v-bind**

<a v-bind:href="url"></a>
    
    <a :href="url"></a>

**2、v-on**

<a v-on:click="doSomething"></a>
    
    <a @click="doSomething"></a>