2021-04-06

最新推荐文章于 2022-04-23 14:32:27 发布

weixin_44852210

最新推荐文章于 2022-04-23 14:32:27 发布

阅读量43

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44852210/article/details/115469905

版权

本文介绍了Vue中如何使用v-on:click替换@click监听点击事件，讲解了methods中维护的方法与数据交互，以及关键生命周期钩子函数的运用。通过实例演示了计数器组件的实现，展示了Vue的MVVM模式和数据绑定原理。

摘要由CSDN通过智能技术生成

Vue学习day02

1.v-on:click=""–>@click="" 表示监听点击事件
2.vue中新属性methods 维护点击事件执行的具体方法
3.vue的生命周期中有beforeCreate,created,mounted等钩子函数,可以在执行时被调用
4.el: 类型 string|HTMLElement
data: 类型 object|Function (组件必须传函数)
methods: 类型 function (多个函数, key:value 形式)
5.methods 中可以用this.调用data里面的数据,因为vue中做了代理proxy 把所有data里的数据都放入Vue对象中
6.Vue的MVVM, M:data数据 V:DOM VM:创建的Vue对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
</head>
<body>
<div id="app">
    <h2>当前计数{{counter}}</h2>
    <!--<button v-on:click="counter++">+</button>
    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="increament">+</button>
    <button v-on:click="subtraction">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    //语法糖 v-on:click --> @click
    //proxy 把所有data里的数据都放入Vue对象中,所以可以this.调用
    //el: 类型 string|HTMLElement
    //data: 类型 object|Function (组件必须传函数)
    //methods: 类型 function (多个函数, key:value 形式)
    //
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            increament:function (){
                console.log('add被执行');
                this.counter++;
            },
            subtraction:function (){
                console.log('sub被执行')
                this.counter--;
            }
        },
        beforeCreate:function(){
            console.log('111');
        },
        created:function(){
            console.log('121');

        },
        mounted:function () {
            console.log('222');
        }
    })
</script>
</body>
</html>