Last active
February 14, 2018 14:28
-
-
Save japboy/208c19272de480839b33858075e710b3 to your computer and use it in GitHub Desktop.
Vue.js デモ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Vue.js デモ</title> | |
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"> | |
| <style> | |
| /* <shuzo-passionate-message> 用の CSS も普通に書ける */ | |
| @keyframes shake { | |
| 0% { | |
| transform: translate3d(0, 0, 0); | |
| } | |
| 25% { | |
| transform: translate3d(0, 16px, 0); | |
| } | |
| 50% { | |
| transform: translate3d(0, -12px, 0); | |
| } | |
| 75% { | |
| transform: translate3d(0, 14px, 0); | |
| } | |
| 100% { | |
| transform: translate3d(0, -10px, 0); | |
| } | |
| } | |
| .shuzo-passionate-message-container { | |
| height: 25vw; | |
| margin: 1vw; | |
| position: relative; | |
| } | |
| .shuzo-passionate-message-paragraph { | |
| align-content: flex-start; | |
| align-items: center; | |
| display: flex; | |
| flex-flow: row nowrap; | |
| font-family: "Sawarabi Mincho"; | |
| font-weight: 500; | |
| justify-content: flex-start; | |
| } | |
| .shuzo-passionate-message-container:focus .shuzo-passionate-message-paragraph, | |
| .shuzo-passionate-message-container:hover .shuzo-passionate-message-paragraph { | |
| animation-duration: 0.3s; | |
| animation-name: shake; | |
| font-weight: 900; | |
| } | |
| .shuzo-passionate-message-icon-container { | |
| display: block; | |
| height: 25vw; | |
| position: relative; | |
| width: 25vw; | |
| overflow: hidden; | |
| border-radius: 12.5vw; | |
| flex: 0 0 25vw; | |
| } | |
| .shuzo-passionate-message-icon { | |
| background-image: url("./shuzo.jpg"); | |
| background-size: cover; | |
| border-radius: 12.5vw; | |
| display: inline-block; | |
| filter: grayscale(80%); | |
| height: 100%; | |
| transform: rotate(0deg) scale3d(1, 1, 1); | |
| transition-duration: 0.3s; | |
| transition-property: filter, transform; | |
| width: 100%; | |
| } | |
| .shuzo-passionate-message-container:hover .shuzo-passionate-message-icon { | |
| filter: grayscale(0%); | |
| transform: rotate(340deg) scale3d(1.6, 1.6, 1); | |
| } | |
| .shuzo-passionate-message-text { | |
| display: block; | |
| margin: 0 1vw; | |
| } | |
| </style> | |
| <!-- Vue.js ライプラリの読み込み --> | |
| <script defer src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script> | |
| <!-- Vue コンポーネント <shuzo-passionate-message> タグのテンプレート --> | |
| <script type="text/x-template" id="shuzo-passionate-message"> | |
| <div class="shuzo-passionate-message-container"> | |
| <p class="shuzo-passionate-message-paragraph" :style="style"> | |
| <span class="shuzo-passionate-message-icon-container"> | |
| <span class="shuzo-passionate-message-icon"></span> | |
| </span> | |
| <span class="shuzo-passionate-message-text"><slot></slot></span> | |
| </p> | |
| </div> | |
| </script> | |
| <script> | |
| function init() { | |
| // <shuzo-passionate-message> コンポーネントを定義 | |
| Vue.component('shuzo-passionate-message', { | |
| template: '#shuzo-passionate-message', | |
| // カスタム HTML の属性 | |
| props: { | |
| color: { | |
| type: String, | |
| required: true, | |
| }, | |
| size: { | |
| type: String, | |
| required: true, | |
| } | |
| }, | |
| data: function () { | |
| return { | |
| style: {}, | |
| }; | |
| }, | |
| created: function () { | |
| this.style.color = this.color; | |
| this.style.fontSize = this.size; | |
| }, | |
| }); | |
| // Vue.js インスタンスを #vuejs-demo-entry セレクタに初期化 | |
| new Vue({ | |
| name: 'entry', | |
| el: '#vuejs-demo-entry', | |
| data: function () { | |
| return { | |
| quotes: [ | |
| '何言ってんだよ!! その崖っぷちが最高のチャンスなんだぜ!!', | |
| '諦めんなよ! 諦めんなよ、お前!!', | |
| '本気になれば自分が変わる! 本気になれば全てが変わる!!', | |
| '言い訳してるんじゃないですか?', | |
| '今日から君は噴水だ!', | |
| '自分を持ちたいなら、サバになれ!', | |
| '君は本気か？僕は本気だ!!', | |
| '暑くなければ夏じゃない。熱くなければ人生じゃない!', | |
| ], | |
| }; | |
| }, | |
| }); | |
| } | |
| document.addEventListener('DOMContentLoaded', init, false); | |
| </script> | |
| </head> | |
| <body> | |
| <h1>Vue.js デモ</h1> | |
| <!-- Vue.js で表現する HTML 部分 --> | |
| <div id="vuejs-demo-entry"> | |
| <template v-for="(quote, index) in quotes"> | |
| <shuzo-passionate-message :key="index" color="#000" size="5.9vw">{{ quote }}</shuzo-passionate-message> | |
| </template> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
こんな表現するのにも、CSS 60 行、HTML 7行くらい必要です。でも;
こんな風に書けたら分かりやすくないですか? Vue.js や Web Components が目指すコンポーネント指向開発のイメージがコレです 😄