vue.jsの基本　、メモ程度です♪

現在、挫折中♪ 「vue.jsの基本」
—–
《vue.jsの簡単な説明》
JavaScriptフレームワークの１つで、主にMVCモデルのView層を扱う。
ECMAScript５をサポートするブラウザで動作する。IE9以降で動作。
また、開発者用に「Vue Devtools」というChromeのDeveloperToolsの拡張機能が公開されている。
CDNを利用すれば、開発環境は不要で、「サクッ」と評価できる。 PHPが理解できれば、ほぼ使えると思う。
 
基本１　[Hellow World] CDN方式でvue.jsを利用する

「{{ プロパティ名 }}」と言う書式でデータを出力する scriptタグ 「Vue」オブジェクトの生成 [el]プロパティ オブジェクトの割当 [data]プロパティ [キー名:値]形式でデータを記入 hellow.html {{ msg }}

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:'Hello World'}
    })
</script>

</body></html>

【結果】

基本２－１　[Event ハンドリング（文字）]

scriptタグ 「Vue」オブジェクトの生成 [el]プロパティ オブジェクトの割当 [data]プロパティ [キー名:値]形式で初期データを記入 [methods]プロパティ 呼び出されるメソッドを記入 event.html Vue.js change

{{ msg }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:'Hoge'},
    methods: {
        changeMSG: function(){
            this.msg ='fuga'
            }
        }
    })
</script>

【結果】 [change]ボタンをクリックすると

基本２－２　[カウントアップ（数値）]

「{{ プロパティ名 }}」と言う書式で数式を記載する scriptタグ 「Vue」オブジェクトの生成 [el]プロパティ オブジェクトの割当 [data]プロパティ [キー名:値]形式で初期データを記入 event2.html Vue.js +1

{{ counter }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ counter:0}
    })
</script>

【結果】 「+1」をクリック　　「+1」をクリック 基本３　[コンポーネント] 「{{ プロパティ名 }}」と言う書式で[コンポーネント]を定義する scriptタグ 「Vue.component)」の定義 [template]プロパティ コンポーネントに含める要素を記入 [el]プロパティ オブジェクトの割当 component.html Vue.js

<script>
//id=appの要素にVueを適用する
Vue.component('my-comp',{
    template:'<h1>hoge</h1>'
    })
var app = new Vue({
    el:'#app',
    })
</script>

【結果】

基本３　[ディレクティブ] HTMLタグに「v-~~」の属性を指定すること。

　前項の[v-on]もディレクティブ v-text　～テキストのレンダリング～ v-text.html Vue.js {{ msg }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:'Hello World'}
    })
</script>

v-html　～HTMLのレンダリング～ <,>,&などを <,>,& に変換しないで出力できる v-html.html Vue.js

テキスト出力：{{ rawHtml }}

HTML出力：

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ rawHtml:'<span style="color:blue">Hello World</span>'}
    })
</script>

【結果】

v-show　～条件に応じたのレンダリング制御～ 値の真偽により表示する/しないを制御する

v-show.html Vue.js hoge

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ hoge:true } ,
    methods: {
        change:function(e){
            this.hoge = e.target.checked
            }
        }
    })
</script>

【結果】 クリック　　クリック v-if,v-else,v-else-if　～条件分岐を行う～ 要素自体の有無を制御する v-if.html Vue.js hoge

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ hoge:true } ,
    methods: {
        change:function(e){
            this.hoge = e.target.checked
            }
        }
    })
</script>

【結果】前項と同じ v-else.html Vue.js hoge fuga

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ hoge:true } ,
    methods: {
        change:function(e){
            this.hoge = e.target.checked
            }
        }
    })
</script>

クリッククリッククリック v-else-if.html Vue.js

    <span v-if="type=='A'">hoge</span>
    <span v-else-if="type=='B'">fuga</span>
    <span v-else="type=='C'">piyo</span>
</div>

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ type:'A' }
    })
</script>

v-for　～繰り返しを行う～ オブジェクトや配列に対して繰り返し処理を行う。 v-for.html Vue.js

  • {{ l }}
<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ lst:['hoge','fuga','piyo'] }
    })
</script>

【結果】

v-on　～イベントハンドリングを実装する～ オブジェクトや配列に対して繰り返し処理を行う。「@」で記述を省略できる v-on.html Vue.js +1

{{ counter }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ counter:0 }
    })
</script>

クリック　　クリック v-bind　～HTML属性を割り当てる～ タグに属性を割り当てる v-bind.html Vue.js

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:"hoge" }
    })
</script>

v-model　～入力フォームへモデルを割り当てる～ HTMLタグの「input」「seelct」「textarea」に対して、Vueオブジェクトのデータとフォーム部品の値を関係付けます。 v-model.html Vue.js 入力値：{{ msg }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:"hoge" }
    })
</script>

入力窓にテキスト入力 v-pre　～テキストをそのまま出力する～ 「{{ … }}」をそのまま出力シたい場合に使用する v-pre.html Vue.js {{ msg }} {{ msg }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:"hoge" }
    })
</script>

v-once　～一度だけレンダリングする～ レンダリングを一度だけ行い、それ以降は変数が変動しても、表示に反映しない。 v-once.html Vue.js {{ msg }} {{ msg }}

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    data:{ msg:"hoge" }
    })
</script>
 応用１　[validation] validation.html Vue.js
<!-- Vue データを出力する  -->
<div id="app">  
    <input type="text" v-model="msg">
    <div class="error" v-if="error.require">必須項目です</div>
    <div class="error" v-if="error.tooShort">短すぎます</div>
    <div class="error" v-if="error.tooLong">長過ぎます</div>
</div>

<script>
//id=appの要素にVueを適用する
const app = new Vue({
    el:'#app',
    watch: {
        msg: function(newVal,oldVal){
           this.error.require=(newVal.length<1)?true:false;
           this.error.tooShort=(newVal.length<3&&newVal.length>0)?true:false;
           this.error.tooLong=(newVal.length>5)?true:false;
           }
        },
    data: {
        msg:'hoge',
        error:{
            require: false,
            tooShort: false,
            tooLong: false
            }
        }
    })
</script>
応用２　[JSONファイル読込] sample.jsonを読み込んで表示する。

参考　※本番Webサーバーでないと動作しない。

[sample.json] { “vtuber”: [ { “id”: 0, “name”: “Ishiguro tatuo” }, { “id”: 1, “name”: “Herohero Dousita” }, { “id”: 2, “name”: “Gahaha Oyoyo” } ] }

jsonread.html Vue.js

  1. {{ person.name }}
<script>
//id=appの要素にVueを適用する
    const app = new Vue({
        el: '#app',
        data: {
            vtuber: []
        },
        mounted() {
            fetch('./sample.json')
                .then(response => {
                    return response.json();
                })
                .then(json => {
                    this.vtuber = json.vtuber;
                })
        }
    })
</script>

【結果】

応用３　[シンプルなGrid] Grid.jsを読み込んで表示する。

参考 ソート、検索窓、ページ送りなどを定義するだけで画面が完成する grid1.html Vue.js

<script>
//id=appの要素にVueを適用する
new gridjs.Grid({
      columns: ["名前", "住まい", "好きな物"],
      sort: true,
      search: true,
      pagination: true,

      data: [
        ["たかし", "東京", "ぶどう"],
        ["ゆみ", "東京", "もも"],
        ["ジョン", "福岡", "りんご"],
        ["あきら", "青森", "なし"],
        ["あかり", "宮崎", "さんま"]
      ]
    }).render(document.getElementById("wrapper"));
</script>
タイトルとURLをコピーしました