时间戳

首页 > 解决方案 > Vue js未定义的指示符

javascript - Vue js未定义的指示符

问题描述

我在vueschool上看了一个视频课，并以老师的身份重复了代码。但这对我不起作用，对他也有效。在浏览器控制台中，显示没有模板索引器，但为什么一切正常？HTML：

 <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>
    <div id="app">
        <p>Просто текст</p>
        <click-counter></click-counter>
        <click-counter></click-counter>
        <click-counter></click-counter>
    </div>
<script scr="vue.js"></script>
<script src="app.js"></script>
</body>
</html>

Vue.js

Vue.component ('click-counter', {
        template: "<button @click="count++">{{count}}</button>",
        data() {
            return {
                count: 0
            }
        }
    })
    new Vue ({
        el: "#app"
    })

标签： javascriptvue.js

解决方案

在组件模板中，请使用'引号包裹点击功能。由于您使用双引号来包裹按钮，因此不能在其中使用相同的引号，这往往会关闭第一个。

请在下面找到代码

Vue.component('click-counter', {
  template: "<button @click='count++'>{{count}}</button>",
  data() {
    return {
      count: 0
    }
  }
})
new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app">
<click-counter/>
</div>

推荐阅读