この記事では、Vue JS でのメソッドとデータ属性の使用方法を紹介します。
注: プロジェクトの生成には Vue cli を使用します。
プロジェクトの作成
次のコマンドを実行して、vue プロジェクトを簡単に作成しましょう。
vue create vue-app
上記のコマンドは、必要なファイルを vue-app フォルダーにダウンロードします。
使用 cd vue-app作業ディレクトリを変更し、好みのコード エディターを使用してプロジェクト フォルダーを開きます。
src フォルダー内の App.vue ファイルに移動し、すべての内容を削除して、以下のコードに置き換えます。
#App.vue
<template>
<div>
<h1>Hello Vuejs</h1>
</div>
</template>
<script>
export default {};
</script>
データ<strong></strong>プロパティ
上記のコードでは、<script> タグ内のデフォルトの空のオブジェクトをエクスポートし、この空のオブジェクトに data 属性を追加します。 <p><pre class="brush:php;toolbar:false"><script>
export default {
data:function(){
return {
title: "Vuejs"
}
}
};
</script></pre><p>data<strong>: data 属性値は、オブジェクトを返す匿名関数です。このオブジェクトのすべてのプロパティは Vue リアクティブ システムに追加されるため、プロパティ値を変更すると、vuejs は更新されたデータで dom を再レンダリングします。 <p>{{}}<code>二重中括弧を使用して、title<code> 属性をテンプレート タグに追加しましょう。 <p>App.vue<em><br/><pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
</div>
</template>
<script>
export default {
data: function() {
return {
title: "Vuejs"
};
}
};
</script></pre>Vuejs では、JavaScript を渡すために二重中括弧 <p>{{js 式}}<code> を使用する必要があります表現。 次のコマンドを使用して開発サーバーを起動しましょう。 <p><pre class="brush:php;toolbar:false">npm run serve</pre><p><img src="https://img.php.cn/upload/image/942/509/809/1555554495168130.png" title="1555554495168130.png" alt="Vuejs でのメソッドとデータ属性の使用"/><p>{{title}}<code> が Vuejs に置き換えられたのを見ましたか?<p><strong> メソッド<code>Attributemethod 属性を使用して最初のメソッドを作成しましょう。 Methods 属性値もオブジェクトです。 <p><pre class="brush:php;toolbar:false"><script>
export default {
data: function() {
return {
title: "Vuejs"
};
},
methods:{
welcomeMsg:function(){
return `Welcome to ${this.title} world`
}
}
};
</script></pre>上記のコードでは、文字列を返す <p>welcomeMsg<code> メソッドを追加しました。 <p>methods<code> 内では、this.propertyname<code> を使用してデータ オブジェクトにアクセスできます。 テンプレート タグで <p>welcomeMsg<code> メソッドを呼び出しましょう。 <pre class="brush:php;toolbar:false"><template>
<div>
<h1>Hello {{title}}</h1>
<h2>{{welcomeMsg()}}</h2>
</div>
</template></pre><p><img src="https://img.php.cn/upload/image/704/657/842/1555554791623899.png" title="1555554791623899.png" alt="Vuejs でのメソッドとデータ属性の使用"/><p><br/><p><br/>#</script>
以上がVuejs でのメソッドとデータ属性の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
