一个无聊的博客

肥宅快乐每一天

0%

初识 Vue

发表于 更新于 分类于
本文字数： 6.1k 阅读时长 ≈ 6 分钟

插值、指令和缩写

插值 { }

  • 文本
    数据绑定最常见的形式就是使用 “Mustache” 语法 （两个大括号{ }) 的文本插
  • 原始 HTML
    两个大括号会将数据解释为普通文本，而不是 HTML 代码。为了输出真正的 HTML 代码，需要使用 v-html 指令

指令

指令 (Directives) 是带有 v- 前缀的特殊属性 (attribute)

  • v-on: 添加一个事件监听器，通过它调用在 Vue 实例中定义的方法
  • v-bind: 主要用于属性绑定
  • v-html: 输出 HTML 代码
  • v-model: 能轻松实现表单输入和应用状态之间的双向绑定

缩写

v-bind 可以缩写为 :

1
2
3
4
5
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 可以缩写为 @

1
2
3
4
5
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性、对象 & 数组语法

计算属性

1
2
3
4
5
6
7
8
9
10
11
let app = new Vue({
    data:{
        msg:'aaa',
    },
    // 计算属性
    computed:{
        fn:function(){
            return ...;
        }
    },
})

相关响应式依赖发生改变时，计算属性会重新求值

只要还没有发生改变，多次访问时，计算属性会立即返回之前的计算结果，而不必再次执行函数

Class 与 Style 的绑定

绑定 Class

给一个元素绑定一个 Class 属性 v-bind:class （以下缩写为 :class)

对象语法

可以给 :class 传一个对象，用来动态的切换 class

1
<p :class="{top:aaa}">{{msg}}</p>
1
2
3
4
5
6
7
let app = new Vue({
    el: '#app',
    data: {
        msg: 'aaaa',
        aaa: true,
    }
})
数组语法

可以给 :class 传一个数组，用来动态的切换 class

1
<p :class="[aaa,sss]">{{msg}}</p>
1
2
3
4
5
6
7
8
let app = new Vue({
    el: '#app',
    data: {
        msg: 'aaaa',
        aaa: 'top',
        sss: 'left'
    }
})

数组语法和对象语法可以同时使用

1
<p :class="[{top:aaa},left]">{{msg}}</p>
1
2
3
4
5
6
7
let app = new Vue({
    el: '#app',
    data: {
        msg: 'aaaa',
        aaa: 'top',
    }
})

绑定 Style

给一个元素绑定一个 Style 属性 v-bind:style （以下缩写为 :style)

对象语法

和 class 一样

可以给 :style 传一个对象，用来动态的切换 style

1
<p :style="{color:aaa}">{{msg}}</p>
1
2
3
4
5
6
7
8
let app = new Vue({
    el: '#app',
    data: {
        msg: 'aaaa',
        aaa: 'red',
        sss: 'left'
    }
})
数组语法

和 class 一样

可以给 :style 传一个数组 ，用来动态的切换 style

1
<p :style="[colorStyle,fontStyle]">{{msg}}</p>
1
2
3
4
5
6
7
8
9
10
11
12
let app = new Vue({
    el: '#app',
    data: {
        msg: 'aaaa',
        colorStyle:{
            color:'red',
        },
        fontStyle: {
            'font-Size': '20px',
        }
    }
})

还是和 class 一样

数组语法和对象语法可以同时使用

1
<p :style="[{color:'red'},fontStyle]">{{msg}}</p>
1
2
3
4
5
6
7
8
9
let app = new Vue({
    el: '#app',
    data: {
        msg: 'aaaa',
        fontStyle: {
            'font-Size': '20px',
        }
    }
})

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容

这块内容只会在指令的表达式返回 true 值的时候被渲染

如果返回的是 false 则不渲染

v-else

你可以使用 v-else 指令来表示 v-if 的 else 块

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别

v-show

带有 v-show 的元素始终会被渲染并保留在 DOM 中

v-show 只是简单地切换元素的 CSS 中的 display 属性

key

在 if else 语句中两个块里的元素被视为同一类

1
2
3
4
5
6
7
8
<template v-if="aaa === true">
    <label>aa</label>
    <input type="text">
</template>
<template v-else>
    <label>bb</label>
    <input type="text">
</template>

执行 else 块时，在 if 块中输入的数据不会被清空

除非给他们不一样的 key 属性

1
2
3
4
5
6
7
8
<template v-if="aaa === true">
    <label>aa</label>
    <input type="text" key="aa">
</template>
<template v-else>
    <label>bb</label>
    <input type="text" key="bb">
</template>

列表渲染

v-for

在 v-for 里可以使用数组和对象

数组只有两个参数: item index

对象有三个参数: value name index

1
2
3
4
5
6
7
8
9
10
<!-- 数组 -->
<!-- 一个参数 -->
<div v-for="item in list">
    {{ item.msg }}
</div>

<!-- 两个参数 -->
<div v-for="(item,index) in list">
    {{ index }}--{{ item.msg }}
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 对象 -->
<!-- 一个参数 -->
<div v-for="value in obj">
    {{ value }}
</div>

<!-- 两个参数 -->
<div v-for="(value,name) in obj">
    {{ name }}:{{ value }}
</div>

<!-- 三个参数 -->
<div v-for="(value,name,index) in obj">
    {{ index }}--{{ name }}:{{ value }}
</div>

参数的名字可以更改,位置不能更改

固定为:

  • 两个参数时: (属性值,属性名)
  • 三个参数时: (属性值,属性名,下标)

数组的变更

有些方法不会修改原始的数组,而是返回一个新数组

例如 filter()、concat() 和 slice()

当使用非变更方法时，可以用新数组替换旧数组

1
2
3
4
5
filter: function(){
    this.list.filter(function (item) {
        return item === 'a'
    })
}

v-for 也可以接受整数

在这种情况下,它会把模板重复渲染对应次数

1
2
3
<div>
  <span v-for="i in 20">{{ i+"次" }} </span>
</div>

事件

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

1
2
3
4
<div id="app">
  <button @click="count += 1">点我</button>
  点击了 {{ count }} 次
</div>
1
2
3
4
5
6
let app = new Vue({
    el:"#app",
    data:{
        count: 0;
    }
})

当 JavaScript 代码过多时，可以放在一个方法里并调用

1
2
3
4
<div id="app">
  <button @click="showMsg(msg)">点我</button>
  点击了 {{ count }} 次
</div>
1
2
3
4
5
6
7
8
9
10
11
let app = new Vue({
    el:"#app",
    data:{
        msg: 'aad';
    },
    methods:{
        showMsg:function(msg){
            alert(msg)
        }
    }
})

事件的修饰符

修饰符是由点( . ) 开头的指令后缀表示的

1
2
3
4
5
6
.stop
.prevent
.capture
.self
.once
.passive
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
28
29
<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

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

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

<!-- 只有修饰符 -->
<form @submit.prevent></form>

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

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

<!--2.1.4-->
<!-- 点击事件只会触发一次 -->
<a @click.once="doThis"></a>

<!--2.3.0-->
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div @scroll.passive="onScroll">...</div>

按键修饰符

1
2
3
4
5
6
<!-- 当按下 enter 键松开时才会执行对应方法 -->
<button @keyup.enter="ss">回车</button>

<!-- 当按下 enter 键时执行对应方法 -->
<!-- 按住不放时会一直重复执行对应方法 -->
<button @keydown.enter="ss">回车</button>

搬运自: https://github.com/465544769/vue-note

欢迎关注我的其它发布渠道