How to build a simple Vue.js application using a s

2019-08-09 14:39发布

站内问答 / JavaScript
1913 1 2

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 created a counter project and used the default option:

vue create counter

Then I started the application:

cd counter

npm run serve

The default application code seemed confusing to me so I want to create my own simple application that makes more sense to me:

I created counter.html inside the public folder:

 <html lang="en">
  <body>
  <div id="counter"></div>
  </body>
  <script src="../src/counter.js" type="text/javascript"></script>
</html>

I created counter.js file inside the src folder:

import Vue from 'vue';
import Counter from './components/counter.vue';

new Vue({
  render: h => h(Counter),
}).$mount('#counter')

I created counter.vue file inside the components folder:

<template>
    <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>
<script type="text/javascript">
    export default {
        name: 'Counter',
        props: [
            'count'
         ],
      }
</script>

Then I run:

npm run build

When I visit my page: http://localhost:8080/counter.html I get a blank page and the console shows the following error: Uncaught SyntaxError: Unexpected token <

Any help on what I'm doing wrong is greatly appreciated.

1条回答
冷血范
2楼-- · 2019-08-09 15:12

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 :

  1. 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>
    <button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>
<script type="text/javascript">
    export default {
        name: 'Counter',
        data: function() { return { count: 0 } },
      }
</script>
  1. 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>
    <button v-on:click="$emit('increment')">You clicked me {{ count }} times</button>
</template>
<script type="text/javascript">
    export default {
        name: 'Counter',
        props: [
            'count'
         ],
      }
</script>

and then in your application: 

<template>
  <counter :count="count" @increment="count++" />
</template>

<script>
export default {
  data: () => ({ count: 0 })
}
</script>
  1. 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>
    <button v-on:click="internal_count++">You clicked me {{ internal_count }} times</button>
</template>
<script type="text/javascript">
    export default {
        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>
export default {
  data: () => ({ count: 0 })
}
</script>

Basically, the rule of thumb is :

  1. Don't mutate a prop and consider it unique source of truth
  2. 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,

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)