Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@akari_0618

Vue.jsを理解するために

#概要
Vueの構成要素を理解するためにVueの構成要素とディレクティブ、算出プロパティ、メソッドについてわかりやすく記載しました。

Vue.jsの構成

基本的な、Vue.jsの構成についての復習です。

main.js
let app = new Vue({
  el:'#app',
  data:{
    message:'こんにちわ!'
  }
});

1,インスタンス化

main.js
let app =new Vue

Vue.jsを起動するためには、Vueクラスをインスタンス化する必要があります。
letで宣言していますが、生成したインスタンスを後から参照する必要がなければ必要ありません。

2,動作オプション
Vue(オプション)動作オプション
HTMLから参照できる値を格納オブジェクトです。プロパティ名:値とします。
el:Vueの適用要素
data:データオブジェクト
message:dataオブジェクトのmessageプロパティです。データは上記ではこんにちわです。

HTMLの構成

index.html
<div id="app">
  <h1>{{ message }}</h1>
</div>

id属性▶Vueの適用範囲です。
{{}}▶マスタッシュ構文。テンプレートからデータオブジェクトをにアクセスします。複雑な条件分岐などは出来ません。

Vuejsを理解するために

①ディレクティブ

イベントを表します。[v-]から始まります。

マスタッシュ構文は式の値を埋め込むことが出来ません。
そこで、属性値の操作はv-bindを使用します。

main.js
data:{
  url:'https://qiita.com/akari_0618/items/5a9e9d565b47c5de2e4d'
}

データオブジェクトにurlプロパティを追加します。

index.html
<div id="app">
  <a v-bind:href="url">GO</a>
</div>

v-bind:属性名=値 ディレクティブ名と属性名はコロンで区切ります。
コロンの後方はディレクティブの引数です。

②ブール属性

属性名を指定するだけで意味がある属性のことを論理属性またはブール属性といいます。これらの値を紐付けるためにはtrue,falseで表します。

index.html
<input type="button" value="クリック" v-bind:disabled="flag">
main.js
flag:false

③算出プロパティ

算出プロパティとは、既存のプロパティを演算した結果を取得するためです。
算出プロパティの元では、[this.プロパティ名]でアクセスすることができます。
定義側はメソッドですが、参照はプロパティです。

index.html
<p>{{loEmail}}</p>
main.js
data:{
  email:'suzuki-r.e @ddddd.ne.jp'
},
computed:{
  loEmail:function(){
  return this.email.split('@')[0].toLowerCase();
  }
}

*split(r)
正規表現が一致する場所で文字列を分割して配列にします。

④メソッド

上記の算出プロパティはメソッドでも表すことが出来ます。
ただし、methodで表した場合は

index.html
<p>{{loEmail()}}</p>

プロパティでは無いため、()で呼び出します。
methodとは、Vue内で扱える機能を定義する場所です。
他の関数から呼び出したり、HTML内で呼び出すことが出来ます。

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
akari_0618
最近駆け出したエンジニアなーすです。 初心者のための初心者による初心者に関しての技術ブログになってます。 Twitter(@pro_ai_01)フォローするとモチベが上がり、インスタ(pro_ai)フォローするとこれまたモチベ上がります。Qiitaフォローするとまたモチベも上がり理解も深まります。 人生もプログラミングも一石三鳥ぐらいでいい感じに行きましょ😎
arkth
AI,IoT,WEBシステムの開発を行っています

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?