Vue笔记之模板语法

插值

比较常用的就是插值，插值就是{{ foobar }}用两个大括号包起来的一个变量，显示的时候会将双大括号标签替换为这个变量的值。

基本的用法就是：

<p>{{ message }}</p>

当绑定的message变量的值发生了变化时，此处也会发生相应的变化。

使用v-once的话可以使得数据绑定只发生一次，在渲染页面的时候会使用这个变量的值来替换掉双括号标签，再之后即使变量的值发生了变化这里也不会再变化了，使用方法：

<p v-once>{{ message }}</p>

但是因为v-once是添加在元素标签上的所以会对标签上的所有插值都有效，如果只想让一个元素下的某一个插值只渲染一次而不影响同标签元素下的其它插值，那么可以在变量前加个*号来表示只渲染一次：

<p v-once>{{* message }}</p>

纯HTML

比如有的时候需要将一段HTML文本直接插入到页面中，Vue提供了一个v-html指令可以在元素上渲染HTML，元素的内容将被v-html的内容替换掉，同时其中的绑定数据将失效。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Vue Study</title>

	</head>

	<body>

	<div id="app">

		<p v-html="rawHtml">原来的值</p>

	</div>

<script src="../lib/vue/vue.js"></script>

<script type="text/javascript">

	var app3 = new Vue({

		el: '#app',

		data: {

			rawHtml : '<span style="color:green;">这是一些HTML片段</span>'

		},

	})

</script>

	</body>

</html>

渲染HTML是一种不安全的行为，如果非要进行渲染的话至少也应该做过XSS转义之类的处理。

属性

双括号{{ foobar }}的形式不能在元素的属性中使用，要想将元素的属性与某个变量绑定应当使用v-bind:foo="bar"，用法如下：

<button v-bind:disabled="isDisabled">A BUTTON</button>

JS表达式

绑定的插值或者v-bind并不一定是变量名，它们可以是一个简单的JS表达式，这个JS表达式的返回值会被使用，但是需要注意的是这里只可以使用一句单个的表达式。

这个是声明语句，并不是表达式，所以不会生效

{{  var foo = 'bar' }}

下面这个也不会生效，如果想使用if的话应该使用三元表达式

{{ if(foo) { bar; } }}

下面这个三元表达式会生效：

{{ foo && bar }}

指令

指令是带有v-前缀的属性，指令的职责是当表达式的值改变时将某些行为应用到DOM上。

比如：

<button v-if="canSee">A BUTTON</button>

是根据canSee的变化来切换这个按钮的可见性。

参数

一个指令能够接受一个参数，在指令后面使用:号紧跟参数来指明，比如使用v-bind绑定元素属性时v-bind:foo='bar'，比如当使用v-on绑定单击事件时v-on:click。

修饰符

修饰符是使用.指明的特殊后缀，用于指出一个指令应当使用特殊方式绑定。

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

表示当触发submit的时候调用event.preventDefault()来抑制表单提交行为。

过滤器

过滤器设计的目的是用于文本转换，故只能放在最后用于对前面表达式的结果进行处理。

过滤器函数可以在Vue的组件中使用filters来声明，传入的第一个参数是表达式的值

new Vue({

  // ...

  filters: {

    capitalize: function (value) {

      if (!value) return ''

      value = value.toString()

      return value.charAt(0).toUpperCase() + value.slice(1)

    }

  }

})

过滤器可以串联。

{{ message | filterA | filterB }}

过滤器可以接受参数

{{ message | filterA('arg1', arg2) }}

指令缩写

有些指令会被频繁的时候，如果老是写全名的话可能会嫌麻烦，Vue提供了缩写。

v-bind

全：

<span v-bind:id="id"></span>

缩写：

<span :id="id"></span>

v-on

全：

<span v-on:click="onClick"></span>

缩写：

<span @click="onClick"></span>

参考文档：

1. 官方文档 https://cn.vuejs.org/v2/guide/syntax.html#文本