Vue 模板语法详解-优快云博客

本文链接：https://blog.youkuaiyun.com/u014296316/article/details/89060443

本文介绍了Vue模板语法，包括文本插值、JavaScript表达式、v-if、v-model、v-bind、v-on及其修饰符的使用，帮助读者掌握Vue基础指令操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前言

一开始我一直以组件化的思维去学习Vue，但学习的效果不是很有效，生出了很多疑惑的地方。的确Vue是通过模板实现了组件化，但是在学习的过程中我们不能一下子就蹦到组件去，得需要去了解更多更多底层的东西，才能更好的把握上层的东西。
这一篇主要是了解一下Vue模板语法。知道Vue可以采用什么类型的表达式去输出，浅尝辄止，不会面面俱到把每种语法都做细致的介绍。
Vue是一个渐变式的框架，渐变式的含义是你可以在已有的js项目中，一页页的去重构为Vue。这对我们学习Vue的语法也有好处，我们只需要引入一个Vue的js文件就可以学习Vue的模板语法了。

2. 创建HTML文件

编写简单的Vue实例
- el 属性映射到对应的id
- data 里面是我们可以使用的属性值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>myfirvue</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
<div>Message: {{ message }}</div>
</div>
</body>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

</script>
</html>

浏览器打开
Vue的语法也很多，这边我按类型各捡几种权做记录。另外下面的示例中不再完全贴出全部html，只展现相关html。

3. 插值

3.1. 文本插值

这是最普遍的插值方式，在模板里定义的属性或方法，在html中使用{{ }}来输出，在上面已经有示例了，我们看看方法的效果

html

<div id="app">
<div>Message: {{ getMessage() }}</div>
</div>

var app = new Vue({
  el: '#app',
  methods: {
    getMessage: function () {
		return 'Hello Vue again！'
    }
  }
})

在这里插入图片描述

3.2. 使用 JavaScript 表达式

在 {{ }}之中我们也可以使用JavaScript 表达式
html

<div id="app">
<div>Message: {{ num*3 }}</div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    num:10
  }
})

在这里插入图片描述

4. 指令

刚才我都是对文本进行操作，接下来我们要对标签进行一下操作
指令 (Directives) 是带有 v- 前缀的特殊特性，我捡几个常用的指令来说明一下

4.1. v-if

如下方例子，如果seen为true即会渲染p标签，反之则看不见
html

<div id="app">
<p v-if="seen">你看我啊</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    seen:true 
  }
})

4.2. v-model

该指令可用于双向绑定；双向绑定的意思是，v-model将input同message属性进行绑定，当你修改input值的时候，message也会被修改即渲染到页面上。反之，你修改了message，input里面的值也会被修改
html

<div id="app">
<div> {{ message }}</div>
 <input v-model="message">
</div>

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

效果
可以在试一下在f12里赋值app.message，input值也会被修改

4.3. v-bind 参数

v-bind 是一个非常常用的指令，用于绑定标签的属性。以前我们用jquery的时候，用的是attr方法来修改属性，在vue里面就是v-bind。先上例子再说明：
html

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

var app = new Vue({
  el: '#app',
  data: {
    url: 'https://mp.youkuaiyun.com'
  }
})

我们在v-bind的后面用 :接了一个 href。href就是参数，这也是指令的另一个特性 参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。当然我们还可以使用v-bind:class，v-bind:title等等。

4.3. v-on 参数

v-on 指令不同于v-bind，它是用于监听 DOM 事件，比如点击，双击等。
html

<div> {{ message }}</div>
<button v-on:click="reverseMessage">反转message</button>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
   methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

4.4. 修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。在 v-on 和 v-for中有使用到。

html
- .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

<form v-on:submit.prevent="onSubmit">...</form>

4.5. 动态参数

这是vue2.6.0 新增的特性，这个我觉得使用场景很少，也不建议使用。
我们用v-bind的来举例，之前v-bind后面是直接跟href，现在我们能动态的决定v-bind后面是跟href还是class。
html

<a v-bind:[attrName]="url">点我啊</a>

var app = new Vue({
  el: '#app',
  data: {
  	attrName: title,
    url: 'https://mp.youkuaiyun.com'
  }
})

4.6. 缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写
v-bind 缩写 :

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写 @

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

4.7. 指令值的表达式

表达式结果的类型除了字符串之外，我们也可以像插值一样的使用javascript表达式来处理，以及还可以是对象或数组。
先上一个javascript表达式例子
html

  <a v-bind:href="'https://'+url">点我啊</a>

var app = new Vue({
  el: '#app',
  data: {
    url: 'mp.youkuaiyun.com'
  }
})

对象或数组常用于Class 与 Style 绑定，直接上例子
html（对象）

<div class="static"  v-bind:class="{ active: isActive,error:isError }">xxx</div>

// 如果isActive 为真,isError 不为真就会渲染为
<div class="static active">xxx</div>

html（数组）

<div  v-bind:class="[activeClass, errorClass]">xxx</div>

//渲染为
<div class="active error">xxx</div>

var app = new Vue({
  el: '#app',
data: {
  activeClass: 'active',
  errorClass: 'error'
}
})

大致其实我们理解了，这里面可以放表达式，对象，数组。那其他塞方法，或更复杂的嵌套的逻辑也可以举一反三得出。