Question

我正在关注表单示例，但它不起作用:: https://bootstrap-vue.js.org/docs/components/form

这是我的代码，在我的简单基本index.html中：

<head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">

      <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
      <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

      <script src="https://unpkg.com/vue"></script>
      <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
      <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>


  </head>

  <body>
  <template>
    <div>
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
      <b-form-group id="exampleInputGroup1"
                    label="Email address:"
                    label-for="exampleInput1"
                    description="We'll never share your email with anyone else.">
        <b-form-input id="exampleInput1"
                      type="email"
                      v-model="form.email"
                      required
                      placeholder="Enter email">
        </b-form-input>
      </b-form-group>
      <b-form-group id="exampleInputGroup2"
                    label="Your Name:"
                    label-for="exampleInput2">
        <b-form-input id="exampleInput2"
                      type="text"
                      v-model="form.name"
                      required
                      placeholder="Enter name">
        </b-form-input>
      </b-form-group>
      <b-form-group id="exampleInputGroup3"
                    label="Food:"
                    label-for="exampleInput3">
        <b-form-select id="exampleInput3"
                      :options="foods"
                      required
                      v-model="form.food">
        </b-form-select>
      </b-form-group>
      <b-form-group id="exampleGroup4">
        <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
          <b-form-checkbox value="me">Check me out</b-form-checkbox>
          <b-form-checkbox value="that">Check that out</b-form-checkbox>
        </b-form-checkbox-group>
      </b-form-group>
      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    </div>
  </template>
  </body>

和js代码+1

<script>
export default {
  data () {
    return {
      form: {
        email: '',
        name: '',
        food: null,
        checked: []
      },
      foods: [
        { text: 'Select One', value: null },
        'Carrots', 'Beans', 'Tomatoes', 'Corn'
      ],
      show: true
    }
  },
  methods: {
    onSubmit (evt) {
      evt.preventDefault();
      alert(JSON.stringify(this.form));
    },
    onReset (evt) {
      evt.preventDefault();
      /* Reset our form values */
      this.form.email = '';
      this.form.name = '';
      this.form.food = null;
      this.form.checked = [];
      /* Trick to reset/clear native browser form validation state */
      this.show = false;
      this.$nextTick(() => { this.show = true });
    }
  }
}
</script>

它与vue bootstrap网站严格相同，但它不起作用

有一个空白屏幕，这是firefox错误：

SyntaxError：导出声明可能只出现在模块的顶层

我无法显示我的表格，没有任何内容，只是一个空白的屏幕，它不起作用！

注意：我不想使用babel或任何复杂的东西，我只需要我的index.html工作

请帮帮我谢谢

Answer 1

您逐字复制的示例是Vue Single File Component的内容。那些需要将Webpack或Browserify转换为浏览器可以理解的实际JavaScript。

如果要获取可重用的Vue组件，可以使用Vue.component()重新编写避免SFC结构的代码并在template属性中传递模板，但它会有点更复杂。

否则，如果它只是一个页面，只需使用new Vue()并使用el属性绑定到元素选择（请参阅指南中的Declarative Rendering）：

var app = new Vue({
  el: '#app',
  data: {
    ...
  }
})

并在你的html中：

<div id="app">
  ...
  ... vue perform rendering and interpolation here ...
  ...
</div>

Answer 2

您在简单的HTML文件中使用Vue会让Single-File Components感到困惑。

要获得后者，您可以执行以下操作。

基本上你必须：

移除<template>代码，并在内部id添加div，例如：<div id="app">
在Vue构造函数中包装正在导出的对象，并为其添加el选项：
```
<script>
    new Vue({
        el: '#app',
        data() {
```

JSBin demo here.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>

<body>
<div id="app">
    <b-form @submit="onSubmit" @reset="onReset" v-if="show">
        <b-form-group id="exampleInputGroup1"
                      label="Email address:"
                      label-for="exampleInput1"
                      description="We'll never share your email with anyone else.">
            <b-form-input id="exampleInput1"
                          type="email"
                          v-model="form.email"
                          required
                          placeholder="Enter email">
            </b-form-input>
        </b-form-group>
        <b-form-group id="exampleInputGroup2"
                      label="Your Name:"
                      label-for="exampleInput2">
            <b-form-input id="exampleInput2"
                          type="text"
                          v-model="form.name"
                          required
                          placeholder="Enter name">
            </b-form-input>
        </b-form-group>
        <b-form-group id="exampleInputGroup3"
                      label="Food:"
                      label-for="exampleInput3">
            <b-form-select id="exampleInput3"
                           :options="foods"
                           required
                           v-model="form.food">
            </b-form-select>
        </b-form-group>
        <b-form-group id="exampleGroup4">
            <b-form-checkbox-group v-model="form.checked" id="exampleChecks">
                <b-form-checkbox value="me">Check me out</b-form-checkbox>
                <b-form-checkbox value="that">Check that out</b-form-checkbox>
            </b-form-checkbox-group>
        </b-form-group>
        <b-button type="submit" variant="primary">Submit</b-button>
        <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                form: {
                    email: '',
                    name: '',
                    food: null,
                    checked: []
                },
                foods: [
                    {text: 'Select One', value: null},
                    'Carrots', 'Beans', 'Tomatoes', 'Corn'
                ],
                show: true
            }
        },
        methods: {
            onSubmit(evt) {
                evt.preventDefault();
                alert(JSON.stringify(this.form));
            },
            onReset(evt) {
                evt.preventDefault();
                /* Reset our form values */
                this.form.email = '';
                this.form.name = '';
                this.form.food = null;
                this.form.checked = [];
                /* Trick to reset/clear native browser form validation state */
                this.show = false;
                this.$nextTick(() => {
                    this.show = true
                });
            }
        }
    });
</script>
</body>
</html>

以上使用您的代码直接在Vue实例中。

如果您想将表单用作组件，例如：

<div id="app">
  <my-form></my-form>
</div>

关注此JSBin demo。

Vue.js导出默认不起作用

2 个答案: