Vue基本指令

vue语法模板

插值

• 文本插值是最基本的形式，使用双大括号(Mustache语法) {{}}，代码如下所示：

  <span>Text:{{ text }} </span>
  

• 有时候只需渲染一次数据，后续数据变化不再关心，可以通过v-once指令来实 现，代码如下所示：

  <span v-once>Text:{{ text}}</span>
  

• 文本插值还可以使用v-text指令来代替双大括号标签，代码如下所示：

  <span v-text="text"></span>
  

实例绑定数据的几种方式;

HTML代码:
<div id="app">
<p>{{ userName }}</p>
<p v-once>{{ userName }}</p>
<p v-text=
"userName"></span>
<p v-html=
"userName"></p>
</div>
JavaScript代码：
var vm = new Vue({
el: "#app"
,
data: {
userName: "<h1>欢迎您，管理员！</h1>"
}
});

• 文本插值也接受表达式形式的值，表达式可由JavaScript表达式和过滤器构成， 其中过滤器可以没有，也可以有多个。

• n表达式是各种数值、变量和运算符的综合体。简单的表达式可以是常量或者变量名称。

• n表达式的值是其运算结果，如下示例代码所示

  html代码：
  <div id=
  "app">
  <p></p>{{ number+1 }}</p>
  <p>{{ ok? "Yes":"No" }}</p>
  <p>{{ message.split("").reverse().join("") }}</p>
  <div v-text="'list-'+id"></div>
  </div>
  JavaScript代码：
  var vm = new Vue({
  el: "#app",
  data: { 
  number: 1, 
  ok: true,
  message: "Hello world", 
  id: "01"
  }
  });
  

注意

Vue只支持单个表达式，不支持语句和流控制。另外，在表达式中，不能使用用户自定义的全局变量，只能使用JavaScript的全局变量，例如Math和Date。以下是无效的表达式代码：

<!--这是语句，不是表达式-->
{{ var book =
"JavaScript权威指南" }}
<!--不能使用流控制，要使用三元条件运算符-->
{{ if(ok) return msg }}

指令

• 指令（Directives）是Vue.js中一个重要的特性，主要提供了一种机制将数据的 变化映射为DOM行为。

• n指令（Directives）是带有v-前缀的特殊属性。指令属性的值预期是单一 JavaScript表达式（除了v-for，之后再讨论）。指令的职责就是当其表达式的 值改变时相应地将某些行为应用到DOM上。如下代码所示;

  <p v-if=
  "seen">现在可以看到的内容</p>
  var vm=new Vue({
  el:”#app”
  ,
  data:{
  seen:true
  }
  });
  

  v-if指令将根据 表达式seen的值 的真假来移除/插入元素

• 一些指令能接受一个“参数” ，在指令后以冒号指明。例如，v-bind指令被用 来响应地更新HTML属性，代码如下所示：

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

  href是参数，告知v- bind指令将该元素的 href属性与表达式url 的值绑定。

• v-on指令，它用于监听DOM事件，代码如下所示：

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

  在这里参数是监 听的事件名

• 一些指令能接受一个“参数” ，在指令后以冒号指明。例如，v-bind指令被用 来响应地更新HTML属性，代码如下所示：

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

  href是参数，告知v-bind指令将该元素 的href属性与表达式url的值绑定。

• v-on指令，它用于监听DOM事件，代码如下所示：

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

  在这里参数是监 听的事件名

• 修饰符（Modifiers）是以半角句号“.”指明的特殊后缀，用于指出一个指定 应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调 用event.preventDefault()，代码如下所示：

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