Vue模板

Posted on

模板写法

一、完整版，写在HTML里

1
2
3
4
5
6
7
8
9
10
11
12
<div id='xxx'>
	{{ n }}
    <button @click="add">+=1</button>
</div>

new Vue({
    el: '#xxx',
    data: { n: 5 }, // data 可以写成函数
    methods: {
        add(){this.n += 1}
    }
})

二、完整版，写在选项里

1
2
3
4
5
6
7
8
9
10
11
<div id='app'></div>

new Vue({
    template: `
		<div>
			{{ n }}
			<button @click="add">+1</button>
		</div>`,
    data:{ n: 5 },
    methods: { add(){ this.n += 1} }
}).$mount('#app') // 和 el 相同

三、非完整版，配合 xxx.vue 单文件组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// xxx.vue
<template>
// template里不是 HTML, 而是 XML
	<div>
        {{n}}
        <button @click='add'> +1 </button>
    </div>
</template>

<script>
    export default {
        data(){ // data 必须为函数
            return { n: 0 } 
        }，
        method: { add() { this.n +=1 }}
    }
</script>
<style>...css</style>
1
2
3
4
5
import Xxx from './xxx.vue'
// Xxx 是一个options 对象
new Vue({
    render: h => h(Xxx)
}).$mount('#app')

展示内容

  • 表达式

    1
    2
    3
    4
    5
    6
    7
    {{ object.a }} // 表达式
    {{ n + 1 }} // 可以写任何运算
    {{ fn(n) }} // 可以调用函数
    /*
    如果值 为 undefined 或 null 就不显示
    另一种写法为 <div v-text="表达式"></div>
    */

  • HTML 内容

    假设 data.x 值为 <strong>hi</strong>

    <div v-html='x'></div> 即可显示粗体的 hi

  • 展示

    <div v-pre>{{ n }}</div>

    v-pre 不会对模板进行编译

绑定属性 v-bind

  • 绑定 src

    <img v-bind:src="x" />

  • v-bind: 简写为：

    <img :src="x" />

  • 绑定对象

    <div :style="{border: '1px solid red, height: 100'}"></div>

绑定事件 v-on

  • v-on : 事件名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <button v-on:click="add">+1</button>
    点击之后，Vue 会运行 add()

    <button v-on:click="xxx(1)">xxx</button>
    点击之后，Vue 会运行 xxx(1)

    <button v-on:click="n+=1">xxx</button>
    点击之后，Vue 会运行 n += 1

    即发现 函数就加括号调用之，否咋就直接运行代码

  • 缩写

    <button @click"add">+ 1</button>, 正常人都用缩写🤗

条件判断 v-if v-else-if v-else

if ... else

1
2
3
4
5
6
7
8
9
10
// 不处于 DOM 树中
<div v-if='x>0'>
    x 大于 0
</div>
<div v-else-if='x===0'>
    x 为 0
</div>
<div v-else>
    x 小于 0
</div>

循环 v-for

for(value, key) in 对象 或 数组

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li v-for="(u, index) in users" :key="index">
    	索引：{{index}} 值：{{u.name}}
    </li>
</ul>
// :key="xxx" 必需
<ul>
    <li v-for="(value, name) in obj" :key="name">
    	属性名：{{name}} 属性值：{{name}}
    </li>
</ul>

显示/隐藏 v-show

v-show

1
2
3
4
5
6
7
<div v-show="n % 2 === 0">
    n 是偶数
</div>
近似等于
<div :style="display: n % 2 === 0 ? 'block' : 'none'">
    n 是偶数
</div>

v-clock

HTML 绑定 Vue实例，在页面加载时会闪烁，在 css 中添加 [v-clock]{ display: none; }

官方API

v-once

v-once 这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用 v-once，那么该块都将被视为静态内容。

如果显示的信息后续不需要再修改，使用 v-once，这样可以提高性能。

指令 directive

什么是指令？

<div v-text="x"></div>

<div v-html="x"></div>

以 v- 开头的就是指令。

语法

v -指令名：参数 = 值，例：v-on:click = add

如果值里没有特殊字符，则可以不加引号

有些指令没有参数和值，例：v-pre

有些指令没有值，例：v-on:click.prevent阻止默认事件，@click.prevent='x'阻止默认事件并执行 x 函数

修饰符

有些指令支持修饰符

1
2
3
4
@click.stop = "add" 表示阻止事件传播/冒泡
@click.prevent = "add" 表示阻止模拟动作
@click.stop.prevent = "add" 表示以上两种意思
@keypress.enter="xxx" 表示键盘按下Enter 执行 xxx

一共多少修饰符？

v-on 支持的有

1
2
3
4
5
6
7
.{keycode | keyAlias}

.stop	.prevent	.capture	.self	.once	.passive	.native

快捷键相关	.ctrl	.alt	.shift	.meta	.exact

鼠标相关	.left	.right	.middle

v-bind 支持的有

1
.prop	.camel	.sync

v-model

1
.lazy	.number	.trim

重点记忆：

.stop .prevent .sync

.sync (重点)

场景描述：爸爸给儿子钱，儿子要 花钱怎么办，示例

答：儿子打电话（触发事件）向爸爸要钱。

vue规则：

  • 组件不能修改 props 外部数据
  • this.$emit 可以触发事件，并传参
  • $event 可以获取 $emit 的参数

上述示例使用 .sync 后。

1
2
3
:money.sync="tota"
上下等价
:money="total" v-on:update:money="total=$event"

这样实现了父子组件的双向绑定

Vue3 推荐使用 v-model 替代 sync

子组件使用 $emit 向父组件发送事件

1
this.$emit('update:title', newTitle)

父组件监听这个事件并更新数据

1
2
3
4
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

为了方便这种写法，vue 提供了 .sync 修饰符，也就是一种简写方式语法糖：

1
<text-document v-bind.sync="doc"></text-document>

vue.sync的用法