意外と面白い。
『では、データ圧縮とはいったい何でしょうか。簡単に言えば、データ圧縮とはデータから「冗長性」を除去することです。』
R.A.ラファティ 『昔には帰れない』など
ジョン・ヴァーリィ『スチール・ビーチ』など
LT用の事前録画や普通にエンタメコンテンツとしても使えそう asciinema - Record and share your terminal sessions, the right way
はじめに — Vue.js を観てみた。
<script src="https://unpkg.com/vue"></script> <!-- 宣言的レンダリング --> <div id="app"> <p>{{ message }}</p> </div> <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <h1>条件分岐とループ</h1> <div id="app-3"> <span v-if="seen">Now you see me</span> </div> <!-- ユーザー入力の制御 --> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <!-- コンポーネントによる構成 --> <div id="app-7"> <ol> <!-- 各 todo-item の内容を表す todo オブジェクトを与えます。 これにより内容は動的に変化します。 また後述する "key" を各コンポーネントに提供する必要があります。 --> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div>
//宣言的レンダリング var app = new Vue({ el: '#app', data: { message: 'どどすこすこすこいおいしーわい!' } }) var app2 = new Vue({ el: '#app-2', data: { message: 'You loaded this page on ' + new Date().toLocaleString() } }) //条件分岐とループ //JavaScript 的に true なら true です...(数値や文字列でもtrue) var app3 = new Vue({ el: '#app-3', data: { seen: true } }) //ユーザー入力の制御 var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) //コンポーネントによる構成 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: 'Vegetables' }, { id: 1, text: 'Cheese' }, { id: 2, text: 'Whatever else humans are supposed to eat' } ] } })