komatatsu/0_説明.md

## 0_説明.md

      
    Raw
  

              0_説明.md
            
          
    vue.jsをやってみたかったので、みんなの大好きな💩を増やしたり流したりした

💩を増やす
💩をコンポーネント化する
💩を流す

というステップでやっていきます

見た目と振る舞いをコンポーネントにまとめられるのは中々良さそう
💩は流せる様になったけどこれでなにができるのかまだ想像できない
オレはようやくのぼりはじめたばかりだからな

このはてしなく遠いvue坂をよ...

  
## 1st_step.html
<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>💩</title>
  </head>
  <body>
    <div id=app>
      <p>{{message}}</p>
      <button v-on:click="add">増える</button>
    </div>
  </body>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: "💩"
      },
      // v-onを設定した要素は el で指定した要素の配下にないと処理が呼ばれない
      methods: {
        add: function() {
          this.message = this.message + " 💩"
        }
      }
    })
  </script>
</html>

## 2_component.html
<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>💩</title>
  </head>
  <body>
    <div id=app>
      <unko></unko>
    </div>
  </body>
  <script>
    Vue.component('unko', {
      template: `
      <div>
        <p>{{message}}<p>
        <button v-on:click="add">増える</button>
      </div>
      `,
      data: function() {
        return {
          message: "💩"
        }
      },
      methods: {
        add: function() {
          this.message = this.message + " 💩"
        }
      }
    })
    new Vue({ el: '#app' })
  </script>
</html>

## 3_flush.html
<!doctype html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>💩</title>
  </head>
  <body>
    <div id=app>
      <unko></unko>
    </div>
  </body>
  <script>
    Vue.component('unko', {
      template: `
      <div>
        <template v-if="isFlush">
          <marquee>{{message}}</marquee>
        </template>
        <template v-else>
          <p>{{message}}</p>
        </template>
        <button v-on:click="add">増える</button>
        <button v-on:click="flush">流す</button>
      </div>
      `,
      data: function() {
        return {
          message: "💩",
          isFlush: false
        }
      },
      methods: {
        add: function() {
          this.message = this.message + " 💩"
        },
        flush: function() {
          this.isFlush = true
        }
      }
    })
    new Vue({ el: '#app' })
  </script>
</html>
	<!doctype html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<title>💩</title>
	</head>
	<body>
	<div id=app>
	<p>{{message}}</p>
	<button v-on:click="add">増える</button>
	</div>
	</body>
	<script>
	new Vue({
	el: '#app',
	data: {
	message: "💩"
	},
	// v-onを設定した要素は el で指定した要素の配下にないと処理が呼ばれない
	methods: {
	add: function() {
	this.message = this.message + " 💩"
	}
	}
	})
	</script>
	</html>