Vue.js导出默认值不工作_Vue.js_Vuejs2

Vue.js导出默认值不工作

vue.js vuejs2

Vue.js导出默认值不工作,vue.js,vuejs2,Vue.js,Vuejs2,我遵循表单示例，但它不起作用：：这是我的代码，在我的simple basic 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.m

我遵循表单示例，但它不起作用：：

这是我的代码，在我的simple basic 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>


导出默认值{
数据（）{
返回{
表格：{
电子邮件：“”，
名称：“”，
食物：空，
选中：[]
},
食物：[
{text:'Select One'，value:null}，
“胡萝卜”、“豆类”、“西红柿”、“玉米”
],
秀：真的
}
},
方法：{
onSubmit（evt）{
evt.preventDefault（）；
警报（JSON.stringify（this.form））；
},
ON复位（evt）{
evt.preventDefault（）；
/*重置表单值*/
this.form.email=''；
this.form.name=''；
this.form.food=null；
this.form.checked=[]；
/*重置/清除本机浏览器表单验证状态的技巧*/
this.show=false；
这个.$nextTick（（）=>{this.show=true}）；
}
}
}

它与vue bootstrap网站上的完全相同，但不起作用

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

语法错误：导出声明只能出现在模块的顶层

我无法显示我的表单，没有任何内容，只有一个空白屏幕，无法工作

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

请帮助我，谢谢你

在简单的HTML文件中使用Vue会让你感到困惑

要获得后者，您可以按如下所示操作

基本上，你必须：

移除
标记，并将
```
id
```
添加到其内部
```
div
```
，例如：

将要导出的对象包装在Vue构造函数中，并向其添加

el

选项：

<script>
    new Vue({
        el: '#app',
        data() {


新Vue({
el:“#应用程序”，
数据（）{


看看我
看看这个
提交
重置
新Vue({
el:“#应用程序”，
数据（）{
返回{
表格：{
电子邮件：“”，
名称：“”，
食物：空，
选中：[]
},
食物：[
{text:'Select One'，value:null}，
“胡萝卜”、“豆类”、“西红柿”、“玉米”
],
秀：真的
}
},
方法：{
onSubmit（evt）{
evt.preventDefault（）；
警报（JSON.stringify（this.form））；
},
ON复位（evt）{
evt.preventDefault（）；
/*重置表单值*/
this.form.email=''；
this.form.name=''；
this.form.food=null；
this.form.checked=[]；
/*重置/清除本机浏览器表单验证状态的技巧*/
this.show=false；
这个.$nextTick（（）=>{
this.show=true
});
}
}
});

上面的代码直接在Vue实例中使用

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

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

遵循此操作。

您逐字复制的示例是Vue的内容。这些内容需要或被转换为浏览器能够理解的实际JavaScript

如果要获得可重用的Vue组件，可以使用

Vue.component（）

重新编写代码，避免使用SFC结构，并在

template

属性中传递模板，但这会稍微复杂一些

否则，如果它只是一个页面，只需使用

new Vue（）

并使用

el

属性绑定到元素选择（请参见指南中的内容）：

在html中：

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


...
…vue在此执行渲染和插值。。。
...

export关键字仅适用于ES6模块环境，可以使用

babel

创建，也可以在Chromium浏览器中使用

type=“module”

创建（支持这些环境的浏览器不多）Babel？那是什么？没有它就不行了？？非常感谢，所以我必须尝试一下！是的，我理解你的意思，非常感谢，应该在bootstrap vue网站上指定…我也从来没有理解过angularjs中的组件，对我来说太难了！非常感谢！应该在bootstrap vue网站上指定，这是sup呃，对了，谢谢你的帮助。

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

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