Vue 系列之渲染与事件处理

最新推荐文章于 2024-08-22 14:32:34 发布

weixin_30949361

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量120

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hippieZhou/p/9490917.html

版权

渲染相关

列表渲染与条件渲染

Vue 中的常见的渲染有 列表渲染 和 条件渲染

所谓条件渲染，则是通过添加一定的逻辑条件来进行 Dom 元素的操作

v-if
v-else
v-else-if

<body>
    <div id="app">
        <div v-if="ok">{{message}}</div>
        <div v-else>世界，你好</div>
        <button @click="handleClick" type="button">Click</button>
        <ul>
            <li v-for="(item, index) in items" :key="index">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item, index) in object" :key="index">{{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,key, index) in object" :key="index">
                {{item}} - {{key}} - {{index}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                ok: true,
                message: "hello world",
                items: ['A', 'B', 'C', 'D'],
                object: {
                    firstName: "hippie",
                    lastName: "zhou",
                    age: 26
                }
            }, methods: {
                handleClick: function () {
                    this.ok = !this.ok
                }
            }
        })
    </script>
</body>

条件渲染支持对象、集合等数据类型。建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，我们将在后面的指南中看到其他用途。

当 v-for 和 v-if 处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

数组更新检测

变异方法：

push()：往数组最后面添加一个元素，成功返回当前数组的长度
pop()：删除数组的最后一个元素，成功返回删除元素的值
shift()：删除数组的第一个元素，成功返回删除元素的值
unshift()：往数组最前面添加一个元素，成功返回当前数组的长度
splice()：有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值（可选）
sort()：使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()：将数组倒序，成功返回倒序后的数组

非变异方法：

filter()
concat()
slice()

这些不会改变原始数组，但总是返回一个新数组。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

对象更改检测注意事项

Vue 不能检测对象属性的添加或删除；对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

事件处理

定义与使用

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

<body>
    <div id="app">
        <button v-on:click="handleNoArgsEvent">无参数事件</button>
        <button @click="handleNoArgsEvent">简写方式</button>
        <button @click="handleWithArgsEvent(1)">有参数事件</button>
    </div>

    <script>
        new Vue({
            el: "#app",
            methods: {
                handleNoArgsEvent: function () {
                    alert("hello world")
                },
                handleWithArgsEvent: function (index) {
                    alert(index)
                }
            }
        })
    </script>
</body>

事件修饰符

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

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

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

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

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

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

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

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

系统修饰键

.ctrl
.alt
.shift
.meta

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

.exact 修饰符

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

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

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

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

鼠标按钮修饰符

.left
.right
.middle

转载于:https://www.cnblogs.com/hippieZhou/p/9490917.html

weixin_30949361

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 系列之渲染与事件处理

渲染相关列表渲染与条件渲染Vue 中的常见的渲染有列表渲染和条件渲染所谓条件渲染，则是通过添加一定的逻辑条件来进行 Dom 元素的操作v-ifv-elsev-else-if<body> <div id="app"> <div v-if="ok">{{message}}</div> &...
复制链接

扫一扫