勉強会㉚

勉強会

開催日時 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

ドキュメントのサンプルを触ってみました。

コンポーネントの基本

• elにid属性を指定して要素ノードを取得
• dataにhtmlで表示させたい値を記述
• Vueインスタンスを生成する

  コンポーネントを作成する場合

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>