Vue3を以下のような条件でVue2のように使うにはどのように書けばいいですか？ Node.jsを使わない(npmも) Typescriptを使わないビルドなどをしない vue-cliなども...

@TNTSuperMan (TNTSuperMan)posted at 2024-04-06

Vue3をNode.js等無しで使うには？

Q&A

Closed

JavaScript Vue.js Vue3

Vue3を以下のような条件でVue2のように使うにはどのように書けばいいですか？

Node.jsを使わない(npmも)
Typescriptを使わない
ビルドなどをしない
vue-cliなども使わない
Javascript・HTMLを書いてすぐ実行できる
例えるなら、以下のコードをVue3版にするにはどうすればいいんでしょうか。

index.html

<div id="app">
    <input type="text" v-model="textbox">
    <p>あなたが入力したのは"{{text}}"</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- Vue2のCDN -->
<script src="script.js"></script>

script.js

let App = new Vue({
    el:"#app",
    data:{
        textbox: "Hello, World!"
    }
});

また、関数を置く方法も教えてほしいです。

1Answer

@tarako0329 posted at 2024-11-15

Vue3CompositionAPIから勉強しだしたものです。(Vue2までの様式、OptionsAPIは勉強してないのでわかりません。。。）

NodeJSがレンタルサーバーにないため、質問者様と同じ条件かと思います。
html部分はちょっと修正

index.html

<p>あなたが入力したのは"{{textbox}}"</p>
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.4"></script>

scriptを以下で記載すると動作するはずです。

script.js

createApp({
  setup() {
    const textbox = ref('Hello, World!')
    const funcname = () =>{..関数処理}

    return{//htmlで利用したい変数・関数を記載
     textbox
     ,funcname
    }
  }
}).mount('#app')

1Like

Comments

@TNTSuperMan
Questioner
ありがとうございます。

Are you sure you want to delete the question?

Vue3をNode.js等無しで使うには？

1Answer

Comments

Your answer might help someone💌