Question

我有一个像下面的Vue应用程序：

index.html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vuejs-test01</title>

    <link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet"  >
  </head>
  <body>
    <div id="app">
      <div id="bag"></div>

      <div id="bag-helth">
        <div :style="{ width:helth + '%' }"></div>
      </div>

      <div id="control">
        <button @click="punch" v-show="!ended">click</button>
        <button @click="restart">restart</button>
      </div>
    </div>

  </body>
</html>

main.js代码，在渲染函数中呈现App.vue：

import Vue from 'vue'
import App from './App.vue'

import './assets/styles/global.styl'

new Vue({
  el: '#app',
  render: h => h(App),   
})

我的style.css代码，下面的css文件显示样式：

#bag {
  width: 200px;
  height: 500px;
  margin: 0 auto;
  background: url(../imgs/02.png) center no-repeat;
  background-size: 80%;
}

#bag-helth {
  width: 200px;
  border: 2px #000 solid;
  margin: 0 auto 20px auto;
}

#bag-helth div {
  height: 20px;
  background: crimson;
}

#control {
  width: 200px;
  margin: 0 auto;
  text-align: center;
}

我的Vue.app代码，您会看到export default：

<template>

</template>

<script>

  export default {
    data: {
      helth: 100,
      ended: false,
    },
    methods: {
      punch: function () {
        this.helth -= 10

        if (this.helth <= 0) {
          this.ended = true
        }
      },
      restart: function () {
        this.helth = 100
        this.ended = false
      }
    }
  }
</script>

<style scoped>

</style>

在浏览器结果中：

单击按钮时，没有响应。

修改-1

我发现如果在index.html中，我在{{ helth }} div中添加了值#bag：

<div id="app">
  <div id="bag">{{ helth }}</div>
...

模板不分析数据：

Answer 1

将您的html代码放在APP_NAME=Motor APP_ENV=local APP_KEY=base64:0S0uQqTfYj02dsednm0S5iAPyNuF8uxWF50nX4opUKI= APP_DEBUG=true APP_LOG_LEVEL=debug APP_URL=http://localhost DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=33061 DB_DATABASE=motordb DB_USERNAME=pedro DB_PASSWORD=secret BROADCAST_DRIVER=log CACHE_DRIVER=file SESSION_DRIVER=file QUEUE_DRIVER=sync REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET=个App.vue代码之间，而不是template。所以你的index.html就像

index.html

并且您的<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vuejs-test01</title> <link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet" > </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html>就像

App.vue

Answer 2

您的项目中存在一些错误：

您应该将模板代码放在App.vue：

中

  <div id="bag-helth">
    <div :style="{ width:helth + '%' }"></div>
  </div>

  <div id="control">
    <button @click="punch" v-show="!ended">click</button>
    <button @click="restart">restart</button>
  </div>
</div>

在index.html中，您应该保留一个空的div <div id="app"></div>和build.js，如下所示：

<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>

因此，在main.js中，然后可以将App.vue呈现给index.html <div id="app"></app>：

new Vue({
  el: '#app',
  render: h => h(App)  // there render the App.vue to the el node.
})

App.vue是一个组件，而不是Vue实例，数据应该是一个函数：

export default {
  data: function() {
    return {
      helth: 100,
      ended: false
    }
  },
...

为什么绑定点击事件没有响应？

2 个答案: