vue.js变量

Question

我是vue.js（和HTML一般）的新手，我正在尝试使用vue.js自动化Bulma Tab Switch，而无需许多HTML文档。

<li :class="[ tabsel === 'profile' ? 'is-active' : '']"> <a @click="tabsel = 'profile'">My Profile</a></li>

这是要交换哪个行活动的行之一的示例。我很好奇可以在哪里初始化 tabsel 变量，范围如何工作？

最初，我有一个.js文件，然后加载了一个.js文件：

let app = {};

let init = (app) => {
    app.vue = new Vue({
        e1: "#vueapp",
        data () {
            return {
                tabsel: "profile",
            }
        }
    });
}

最终，我不确定第一个代码段是否应该能够看到此值。初始化此变量的正确方法是什么？在我的示例中，这不起作用，因为TABSEL是数据的成员，该数据不是明确的HTML位寻找的？

Answer 1

在您的示例中，带有e1的错误el，并且您忘记了创建HTML root Element（将用于安装应用程序）。

通过纠正这些错误，它可以在此处看到：

let app = {};

let init = (app) => {
    app.vue = new Vue({
        el: "#vueapp",
        data () {
            return {
                tabsel: "profile",
            }
        }
    });
}

init(app)

.is-active {
  color: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="vueapp">
  <ul>
    <li :class="[ tabsel === 'profile' ? 'is-active' : '']"> <a @click="tabsel = 'profile'">My Profile</a></li>
    <li :class="[ tabsel === 'example' ? 'is-active' : '']"> <a @click="tabsel = 'example'">Example</a></li>
  </ul>

</div>

至于范围，只要您的变量在data中定义，它们是反应性的，您可以在HTML模板中使用它们。

Answer 2

在VUE JS中，它被称为状态。就您而言，“ Tabsel”是一个状态。该州将拥有将在应用程序中共享的数据。如果创建变量。您不能轻松地将值带到其他组件。这就是为什么引入国家的原因。如果使用VUEX，则可以在应用程序中全球访问VUEX中创建的状态。

Answer 3

在VUE中初始化此变量的适当方法是什么，您可以在Data（）方法/对象中初始化变量，以及是否要对变量的值进行任何更改。您可以通过事件或安装/创建的钩子进行此操作。

根据您的代码：

new Vue({
    el: '#app',
  data:{
    tabsel: null // Initializing
  },
  mounted() {
    this.tabsel = 'profile'; // Assinging value to the variable
  }
});

.is-active{
  background: #444;
  color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-bind:class="{'is-active': tabsel === 'profile' }">
    My Profile
  </div>
</div>