Vue模板语法入门

插值

文本
纯 HTML
- v-html ，将变量以 html 方式渲染到页面，防止 XSS,CSRF

表达式
- 指令：是带有 v- 前缀的特殊属性
  - v-bind
  - v-if
  - v-show
  - v-on:click
  - v-for
- 缩写
  - v-bind:src => :src
  - v-on:click => @click

动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

1	<a v-on:[eventName]="doSomething"> ... </a>

在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如：

1 2	<!-- 这会触发一个编译警告 --> <a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

<!--
在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]`。
除非在实例中有一个名为“someattr”的 property，否则代码不会工作。
-->
<a v-bind:[someAttr]="value"> ... </a>

了解更多

class 与 style

绑定 HTML Class
- 对象语法
- 数组语法
绑定内联 style 样式
- 对象语法
- 数组语法

条件渲染

v-if
v-else v-else-if
template v-if ,包装元素 template 不会被创建
v-show

列表渲染

v-for (特殊 v-for=”n in 10”)
- in
- of
key
- 预期：number | string
  
  key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
  
  有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。
  
  最常见的用例是结合 v-for：
  1
  2
  3
  <ul>
  <li v-for="item in items" :key="item.id">...</li>
  </ul>
  它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
  - 完整地触发组件的生命周期钩子
  - 触发过渡
  例如：
  1
  2
  3
  <transition>
  <span :key="text">{{ text }}</span>
  </transition>
  当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。
数组更新检测
- 使用以下方法操作数组，可以检测变动
  push(), pop(), shift() , unshift() , splice() , sort() ,reverse()
- filter(), concat() 和 slice() ,map(),新数组替换旧数组
- 不能检测以下变动的数组
  vm.items[index] = newValue
- 解决
  - Vue.set(example1.items, indexOfItem, newValue)
  - splice
- 应用:显示过滤结果

事件处理 v-on:

监听事件-直接触发代码

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
  var example1 = new Vue({
    el: "#example-1",
    data: {
      counter: 0,
    },
  });
</script>

方法事件处理器-方法名

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
  var example2 = new Vue({
    el: "#example-2",
    data: {
      name: "Vue.js",
    },
    // 在 `methods` 对象中定义方法
    methods: {
      greet: function (event) {
        // `this` 在方法里指向当前 Vue 实例
        alert("Hello " + this.name + "!");
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName);
        }
      },
    },
  });

  // 也可以用 JavaScript 直接调用方法
  example2.greet(); // => 'Hello Vue.js!'
</script>

内联处理器方法

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
  new Vue({
    el: "#example-3",
    methods: {
      say: function (message) {
        alert(message);
      },
    },
  });
</script>

事件修饰符

.stop

1 2	<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a>

.prevent

1 2	<!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form>

.capture

1
2
3

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

.self

1
2
3

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

.once

只执行一次
.passive

示例

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，

用 v-on:click.prevent.self 会阻止包括元素本身功能的所有的点击（阻止a标签跳转事件），

而 v-on:click.self.prevent 只会阻止对元素自身的点击事件（不会阻止a标签跳转事件）。

详解

按键修饰符 `v-on:keyup.enter`

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。
.keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
1
<input v-on:keyup.13="submit" />

系统修饰符

.exact 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

2.2.0 新增
- .left
- .right
- .middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

事件传递给组件

1	<el-dropdown-item @click.native="quit">退出</el-dropdown-item>

表单操作，`v-model`修饰符

v-model
- 基本用法

修饰符
- .lazy :失去焦点同步一次
- .number :格式化数字
- .trim : 去除首尾空格

插值