VUE組件中的Javascript變量

Question

我在 index.html 中有 javascript 變量。 例如：

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="utf-8">
    <script>
        var testVariable = '111';
    </script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>frontend</title>
    </head>
    <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>
    </html>

我打算在我的組件 vue 文件中使用testVariable 。 是否可以。 這是我的helloworld.vue文件：

    <template >
    <div xmlns:th="http://www.thymeleaf.org" class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
     <span th:text="'Hello, ' + ${message}"></span>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    </div>
    </template>
    <script>
    export default {
    name: 'HelloWorld',
    data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
    },
    };
     </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

我想將spring boot模型變量用於 vuejs。 需要發送此變量以獲取更多axios標注。

Answer 1

由於您的 testVariable 是全局的，您可以在 vue 組件的任何位置訪問它。 但我建議在您的數據中引用它：

export default {
  data() {
    return {
      myVariable: testVariable
    };
  },
};

Answer 2

您應該將所有純 JavaScript 代碼放入mounted函數中。

   export default {
      data() {
         return {
            msg: "some message"
         };
      },
      mounted: function (){
         // Your JavaScript code comes here in
      }
   };

VUE組件中的Javascript變量

問題描述

2 個解決方案

解決方案1
0 2019-12-26 10:39:01

解決方案2
0 2019-12-28 17:47:36

VUE組件中的Javascript變量

問題描述

2 個解決方案

解決方案1 0 2019-12-26 10:39:01

解決方案2 0 2019-12-28 17:47:36

解決方案1
0 2019-12-26 10:39:01

解決方案2
0 2019-12-28 17:47:36