勉強会㉚
勉強会
開催日時 2021年7月17日(土) 7:00-9:00
本日は7:00-7:30まで研修会の内容
7:30-8:10,8:30-9:00もくもく。
Vue.jsを始めました。
本日の内容
発表者 | テーマ | 資料 | 時間 |
---|---|---|---|
Nakagawa | 研修について | 30分 |
研修の話
今週の研修会で実装した内容。
疑似要素の話がでてきたので、知ってる知識を少し話す。
::が疑似要素
:の場合は疑似クラス
beforeやafterでcontentsを追加した場合、ドキュメントツリーに存在しないため、コピペができないなど。。。
Vue.js
JavaScriptのフレームワーク
日本語版ドキュメント
jp.vuejs.org
ドキュメントのサンプルを触ってみました。
コンポーネントの基本
var app = new Vue({ el: '#app', data: { message: 1, } })
<div id="app"> {{message}} </div>
グローバルに作成する場合
共通するコンポーネントを登録する場合の書き方
Vue.component('blog-post', { props: ['post'], template: '<div>'+ '<h3>{{post.title}}</h3>'+ '</div>' }); var blog_post_demo = new Vue({ el: "#blog_post_demo", data: { posts: [ { id: 1, title: 'My journey'}, { id: 2, title: 'My Vue'} ] } });
<div id="blog_post_demo"> <blog-post v-for="post in posts" v-bind:id="post.id" v-bind:post="post"> </blog-post> </div>