How To Build A Simple Vue.js Application Using A Separate Template File?
I'm new to Vue.js and I'm confused about file structure and how to build a simple application. I have installed Vue CLI on my mac using this command: npm install -g @vue/cli Then I
Solution 1:
First, As @Dan said, the script tag should be in <body>, not after.
That said, there's something fundamentally flawed in your code : your button is mutating a property received in the Count component.
Imagine that you're using the Counter in a bigger application, and you want to initialize it with a count value. You'd write : <Counter count="3" />, but then clicking would mutate this "3" into a "4", even if count="3" is written statically ; there would be inconsistency between the public declaration of the count property and its actual value due to mutation of the property by the button.
Here, you have multiple choices :
- Don't use a prop, only use internal state of the count component. The advantage of this construction is that the component is independant ; the disadvantage is that you can't initialize "count" with a custom value when you will be creating a component.
<template><buttonv-on:click="count++">You clicked me {{ count }} times.</button></template><scripttype="text/javascript">exportdefault {
name: 'Counter',
data: function() { return { count: 0 } },
}
</script>- Use events instead, and hold the count value outside the Counter component. This is probably the easiest to implement in the component, but then requires extra code in the parent. The advantage of this is that the value is held outside the component, so customization is possible ; the disadvantage is that, without proper binding to update the value, it won't work.
<template><buttonv-on:click="$emit('increment')">You clicked me {{ count }} times</button></template><scripttype="text/javascript">exportdefault {
name: 'Counter',
props: [
'count'
],
}
</script>and then in your application:
<template><counter:count="count" @increment="count++" /></template><script>exportdefault {
data: () => ({ count: 0 })
}
</script>- A combination of the two previous solutions. Hold an internal state so the button can manage itself, but also synchronize properly with the outside world using watchers.
<template><buttonv-on:click="internal_count++">You clicked me {{ internal_count }} times</button></template><scripttype="text/javascript">exportdefault {
name: 'Counter',
props: [
'count'
],
watch: {
count(val) { this.internal_count = val },
internal_count(val) { this.$emit('update', val) },
},
}
</script>and then in your app:
<template><counter:count="count" @update="v => count = v" /></template><script>exportdefault {
data: () => ({ count: 0 })
}
</script>Basically, the rule of thumb is :
- Don't mutate a prop and consider it unique source of truth
- If you want to mutate a prop, send an event instead and hope that the receiver will update the prop for you, then you can receive it back updated.
Hoping this help,
Post a Comment for "How To Build A Simple Vue.js Application Using A Separate Template File?"