Javascript Vue.js路由未处理任何方法

我在Vue.js和他的路由系统上遇到了一些问题。我举了个例子

为什么当我使用模板（请参见Foo）时该方法正确附着，而当我使用el（请参见Bar）时该方法不正确附着

代码如下：

index.js

var Foo = Vue.extend({
    template: '<p v-on:click.prevent="foo">This is foo!</p>',

  methods: {
      foo: function(){
        alert('YEAH')
      }
    }
})

var Bar = Vue.extend({
    el: function(){
      return '#bar'
    },

    methods: {
      bar: function(){
        alert('YEAH')
      }
    }
})

var App = Vue.extend({})

var router = new VueRouter()

router.map({
    '/foo': {
        component: Foo
    },
    '/bar': {
        component: Bar
    }
})

router.start(App, '#app')

var Foo=Vue.extend({
模板：“
这是foo！
”，
方法：{
foo:function（）{
警惕（“是的”）
}
}
})
var Bar=Vue.extend({
el:函数（）{
返回“#bar”
},
方法：{
bar:function（）{
警惕（“是的”）
}
}
})
var App=Vue.extend（{}）
var router=new VueRouter（）
路由器地图({
“/foo”：{
组成部分：富
},
“/bar”：{
组件：棒
}
})
路由器启动（应用程序“#应用程序”）

index.html

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use v-link directive for navigation. -->
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>
  <div id="bar" v-bind:class="$route.path == '/bar' ? '' : 'hidden'">
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
  <!-- use router-view element as route outlet -->
  <router-view></router-view>
</div>

你好应用程序！

去福
去酒吧

这是酒吧

您应该使用

template:'#bar'

而不是

el:'#bar'

，

el

选项不是模板的选择器

var Bar=Vue.extend({ 模板：“#条”

})

您（ab）在应用程序主模板中使用常规HTML元素作为组件的子模板-这不是您应该做的事情

这也是click事件不起作用的原因：该div的内容（包括click事件）是由App组件而不是Bar组件计算的。应用程序组件没有“bar”方法

因此，控制台中出现错误：

[Vue warn]：v-on:click=“bar”需要函数值，但未定义

模板应如下所示：

<script type="x-template" id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</script>

<!-- or with HTML5 template tag: -->
<template id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</template>

这是酒吧
这是酒吧

您应该使用

template:'#bar'

而不是

el:'#bar'

，

el

选项不是模板的选择器

var Bar=Vue.extend({ 模板：“#条”

})

您（ab）在应用程序主模板中使用常规HTML元素作为组件的子模板-这不是您应该做的事情

这也是click事件不起作用的原因：该div的内容（包括click事件）是由App组件而不是Bar组件计算的。应用程序组件没有“bar”方法

因此，控制台中出现错误：

[Vue warn]：v-on:click=“bar”需要函数值，但未定义

模板应如下所示：

<script type="x-template" id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</script>

<!-- or with HTML5 template tag: -->
<template id="bar">
  <div>
    <p v-on:click.prevent="bar">This is bar!</p>
  </div>
</template>

这是酒吧
这是酒吧

您误解了

el

的目的。当您将

el

传递给组件时，它会告诉Vue要在哪个元素上安装自己

注意，所提供的元件仅用作安装点；如果还提供了模板，则将替换该模板，除非“替换”设置为false。解析的元素将作为vm.$el访问

实际上，在

#bar

中没有Vue可以编译的模板，这就是为什么没有输出。另外，在另一个Vue的

el

中使用

el

（在您的情况下

#app

）也是一个坏主意。

v-on:click.prevent=“bar”

位在父对象的（

App

实例）范围内编译，由于

App

没有

bar

方法，因此您会收到一条警告

更好的解决方案：

---

请注意，现在每个组件都有自己的模板，您可以清楚地看到每个组件的范围：

\app

在

app

范围内编译，

\foo

在

foo

范围内编译，

\bar

在

bar

范围内编译。

您误解了

el

的目的。当您将

el

传递给组件时，它会告诉Vue要在哪个元素上安装自己

注意，所提供的元件仅用作安装点；如果还提供了模板，则将替换该模板，除非“替换”设置为false。解析的元素将作为vm.$el访问

实际上，在

#bar

中没有Vue可以编译的模板，这就是为什么没有输出。另外，在另一个Vue的

el

中使用

el

（在您的情况下

#app

）也是一个坏主意。

v-on:click.prevent=“bar”

位在父对象的（

App

实例）范围内编译，由于

App

没有

bar

方法，因此您会收到一条警告

更好的解决方案：

---

请注意，现在每个组件都有自己的模板，您可以清楚地看到每个组件的范围：

#app

在

app

范围内编译，

#foo

在

foo

范围内编译，

#bar

在

bar

范围内编译。

ha，我花了太长时间才回答；）哈，我花了太长时间才回答；）