当前位置：首页 > article >正文

VUE从0开始，一个小时就学完VUE

article 2025/1/11 2:31:21

就这两篇vue就入门了

前端小白如何快速上手Vue框架(上篇)_Logbook怪的博客-CSDN博客

前端小白如何快速上手Vue框架(下篇)_Logbook怪的博客-CSDN博客

下面是vue里面比较精彩的地方：

第一个精彩的地方：v-model

如果是10年前写div+css每次到这里在这里都是一个坑。

第二个精彩的地方：子类调父类的方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
<div id="counter-event-example"><p>{{total}} </p>
<!--在父组件中进行监听incerment函数触发之后,就会调用incrementTotal函数-->
	<button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div>
<script>
Vue.component ( 'button-counter',{
//使用v-on指令进行了事件监听,即点击了子组件的按钮将会触发位于子组件的incrementHandler函数
	template: '<button v-on:click="incrementHandler">{{ counter }}</button> ',
	data: function ( ) {
            return{
                counter : 0
            }
    },
    methods: {
        incrementHandler: function () {
            this.counter += 1
            //触发increment函数
            this.$emit("increment")
        }
        },
})
new Vue( {
	el: '#counter-event-example',
    data: {
		total: 0
 	},
	methods: {
		incrementTotal : function (){
		this.total += 1
	   }
	}
})
</script>
</body>
</html>

其中：

<button-counter>是自定义的Vue组件，它在父组件中被使用了两次。当子组件中的按钮被点击时，会通过$emit方法触发一个名为increment的自定义事件，这里使用v-on:increment指令对该事件进行监听。该指令将会在父组件中绑定一个事件处理函数，即incrementTotal方法。这个方法会在子组件的increment事件触发时被调用，以实现更新父组件中的数据。具体来说，当子组件中的按钮被点击时，它会通过$emit方法触发increment事件，该事件被父组件监听后，会执行incrementTotal方法，从而更新总计数器的值。

incrementHandler是一个自定义的方法名称，它可以被命名为任何你喜欢的名称。在这个例子中，它被命名为incrementHandler是因为它的作用是当按钮被点击时，增加一个计数器的值并触发一个increment事件。如果你想使用其他名称，例如handleClick，也是完全可以的。重要的是，该方法要能够正确地执行它应该做的事情，也就是增加计数器的值并触发increment事件。

在这段代码中，并没有定义一个名为increment的函数。increment是一个自定义事件的名称，该事件由子组件通过$emit方法触发，并在父组件中被监听，触发对应的方法进行处理。在本例中，当子组件的按钮被点击时，会触发一个名为increment的自定义事件，父组件中绑定在v-on:increment指令上的incrementTotal方法会被调用，从而实现了对总计数器的更新。

查看全文

http://www.kler.cn/a/6003.html