Vue基础-2

smile.1

已于 2022-09-23 20:20:05 修改

阅读量1.9k

点赞数 4

文章标签：前端 javascript html vue.js

于 2022-09-21 20:55:26 首次发布

本文链接：https://blog.csdn.net/weixin_48345246/article/details/126979743

版权

1、属性绑定

指令：v-bind:class="msg"；

简写： :class="msg"；

msg为Vue中的数据。

2、事件

指令：v-on:click="num++"；

简写：@click="num++"。

（1）事件修饰符

.stop 阻止事件冒泡；

.prevent 阻止默认事件；

.once 只响应一次，等。

（2）按键修饰符

.enter 回车键；

.up 箭头上；

.down 箭头下；

.esc ESC键；

.del 删除，等。

（3）系统修饰键

.ctrl；

.shift；

.alt，等。

（4）鼠标按钮修饰符

.left；

.right；

.middle。

3、表单

:value="msg"与@input="msg=$event.target.value"；简写：v-model="msg"，可以将msg的数据和表单的值绑定在一起；

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                msg: "Hellow Vue!",
            }
        },
    })
</script>

在输入框输入的同时，标签p中的｛{ msg } ｝也会实时将内容渲染在视图中；对于文本域textarea也是同样的用法。

在复选框中，v-model="flag"(flag为vue的数据)，flag为布尔值，选中为true，未选中为false。

在选择列表select中，如果option含有value属性，v-model就会优先匹配value的值，如果没有，就会直接匹配option的text。

表单修饰符：.lazy 当表单失去焦点时触发事件；.number 强制转换为数字类型；.trim 自动去掉输入的首尾空白字符。

4、computed计算

从现有数据计算出新的数据（只读）

<body>
    <div id='app'>
        {{msg}}<br>{{str}}
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'abc'
        },
        computed: {
            str: function () {
                return this.msg
            }
        }
    })
</script>

运行结果：

5、watch监听

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

<body>
    <div id="app">
        <h1>Watch监听</h1>
        <button @click="num++">{{num}}</button>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                num: 5
            }
        },
        watch: {
            //值类型的数据监听（字符串，数字，布尔，undefined）
            "num": {
                handler(a, b) {
                    console.log(`数据从${a}变化为${b}`);
                }
            }
        }
    })
</script>

运行结果：