Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTMLファイルだけでVue.jsを利用する

More than 1 year has passed since last update.

多分これが一番シンプルだと思います。

実装

<html>
  <body>
    <div id="app">
      <custom-component :msg='msg' v-on:hello-hoge="msg = 'OK!!!'" />
    </div>

    <script type="text/x-template" id="custom-component">
      <div>
        <span>{{msg}}</span>
        <button v-on:click="$emit('hello-hoge')">ボタン</button>
      </div>
    </script>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
      Vue.component("customComponent", {
        props: ["msg"],
        template: "#custom-component",
      })
    </script>

    <script>
      new Vue({
        el: "#app",
        data: {
          msg: 'hoge'
        },
      })
    </script>
  </body>
</html>

まとめ

ライブラリなどは利用しにくいので、ちょっとした検証をする際には便利かも。

kai_kou
2004年からWeb系のシステムエンジニアとして開発、運用、マネジメントを経験。現在はアイレット(クラウドパック)に所属。 べ、別にいいね貰えたからってモチベーションが上がって記事とコードの品質があがるわけじゃないんだからね///
https://twitter.com/k_aik_ou
cloudpack
Amazon Web Services (AWS) の導入設計、環境構築、運用・保守をサポートするマネジドホスティングサービス
https://cloudpack.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away