Vue入门第二天

目录

属性绑定

methods

$event

事件修饰符

按键修饰符

表单修饰符

vue操作

双向绑定指令 v-model

v-model指令修饰符

列表渲染指令

v-for 中的索引

使用 key 维护列表的状态

key 的注意事项

computed计算

watch监听

---

属性绑定

要给属性动态添加值

需要加个 v-bind 可以简化写成“：”

<div class="app">
        <input type="text" v-bind:placeholder="tips">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: ".app",
            data: {
                tips: "请输入文本内容"
            }
        })
    </script>

methods

定义事件处理函数

  methods: {
                add: function () {
                    count++
                }
            },
可以简写为
 methods: {
                add() {
                    this.count++
                }
            },

$event

vue内置变量 他是原生dom事件对象 e

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件对象 event。同理，在 v-on 指令（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件对象 event，

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题。

事件修饰符

<a href="http://www.baidu.com"@click.prevent="show">点击跳转百度</a>

阻止a链接的默认行为 修饰符 .prevent， vue提供的阻止默认行为的方法

在事件处理函数中调用 preventDefault() 或 stopPropagation() 是非常常见的需求。因此，vue 提供了事件

修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

修饰符可以一次写多个

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
.self	只有在 event.target 是当前元素自身时触发事件处理函数

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符

表单修饰符

多选 1个默认值

选中 为true 未选中为false

多个值，绑定的数组动态添加/移除当前元素的value值

vue操作

让指令链接 数据与dom

业务操作数据，实现自动更新dom

双向绑定指令 v-model

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

v-model指令修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number="age" />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg" />
.lazy	在“change”时而非“input”时更新	<input v-model.lazy="msg" />

列表渲染指令

vue 提供了 v-for 指令，用来辅助开发者基于一个数组来循环渲染相似的 UI 结构。

v-for 指令需要使用 item in items 的特殊语法，其中：

⚫ items 是待循环的数组

⚫ item 是当前的循环项

v-for 中的索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items

v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

使用 key 维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性

key 的注意事项

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

computed计算

从现有数据计算出新的数据（只读）不能修改

watch监听

监听数据的变化执行回调函数