0%

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 表达式作为一个指令的参数:

    1
    2
    3
    4
    <!--
    注意,参数表达式的写法存在一些约束,如之后的“对动态参数表达式的约束”章节所述。
    -->
    <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 名全部强制转为小写:

    1
    2
    3
    4
    5
    <!--
    在 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:

监听事件-直接触发代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<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>

方法事件处理器-方法名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

内联处理器方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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

  • 示例

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 阻止单击事件继续传播 -->
    <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 修饰符允许你控制由精确的系统修饰符组合触发的事件。

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 即使 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 : 去除首尾空格
-------------本文结束,感谢您的阅读-------------
最近打算存点钱,吃点高端的像沙县小吃这样的餐厅