vue.jsを使うことになったので調べてみた（１）

JavaScript, vue.jsvue.js

広告

はじめに

公式ドキュメントを参考にして自分なりに調べてみました。
JavaScriptについてはこちら

Vue.jsとは

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。洗練されたシングルページアプリケーションの開発も可能です。
ビュー（view）層に特化しています。、再利用性の高いコンポーネントによるUIの構築、仮想DOMによる高速なレンダリングが特徴。学習コストが低いそうです。

宣言レンダリング

Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです。

DOMとは

DOMとは「Document Object Model」の略。プログラムでHTML（やXML）を扱うための仕様です。

<div id="app"  v-on:click="test">
  <p>{{ message }}</p>
  <button>
  クリック
  </button>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods:{
  	test: function(){
  	this.message ='Hello world'
  	}
  }
})

mesasgeというプロパティを表示するものですが、ボタンをクリックした時に,testという関数が呼ばれ、messageの内容がHello Vue.js！からHello worldに置き換わるというものになります。

条件分岐

<div id="app" >
  <p>{{ message }}</p>
  <button  v-on:click="test">
  クリック
  </button><br>
  <span id="change" v-if="status">変化しました</span>
</div>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    status:false
  },
  methods:{
  	test: function(){
  	this.message ='Hello world'
    this.status=true
    show()
  	}
  }
})

今度は一部変更しました。statusというプロパティを追加しまして、クリックした時にstatusのbool値をfalseからtrueに切り替えるというものです。
そして、もしfalseであれば、<span id=”change”></span>の部分が表示されず、true担ったら、表示されるというものです。クリックした時に、変化しましたと出力されるようになります。

広告

JavaScript, vue.jsvue.js