Question

我在使用Vue.js和他的路由系统时遇到了麻烦。我做了一个例子here。

当我使用模板时，为什么方法正确附加（请参阅Foo），为什么不使用el（参见条形码）？

这是他的代码：

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')

的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>

Answer 1

你误解了el的目的。当您将el传递给组件时，它告诉Vue要挂载自己的元素

请注意，提供的元素仅用作安装点;如果还提供了模板，它将被替换，除非replace设置为false。已解析的元素可以作为vm。$ el。
访问

实际上你在#bar里面没有Vue可以编译的模板，这就是你没有输出的原因。在另一个Vue el（在您的情况下为el）中使用#app也是一个坏主意。 v-on:click.prevent="bar"位在父（App实例）范围内编译，由于App没有bar方法，因此会收到警告。

更好的解决方案： http://codepen.io/anon/pen/zqWKrg

请注意，现在每个组件都有自己的模板，您可以清楚地看到每个组件的范围：#app在App范围内编译，#foo编译在{ {1}}范围和Foo已在#bar范围内编译。

Answer 2

您应使用template: '#bar'代替el: '#bar' el选项不是模板的选择器。

var Bar = Vue.extend（{ 模板：'＃bar'，
```
methods: {
  bar: function(){
    alert('YEAH')
  }
}
```
}）
您（ab）在Apps主模板中使用常规HTML元素作为组件的子模板 - 这不是您应该做的事情。

它也是click事件不起作用的原因：该div的内容（包括click事件）由App组件评估，而不是Bar组件。 App组件没有“bar”方法。

因此控制台出错：

[Vue警告]：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>

Vue.js路由没有处理方法

2 个答案: