vue.js
ユーザーインターフェイスを構築するためのプログレッシブフレームワーク。
公式チュートリアル：https://cn.vuejs.org/v2/guide/
オンライン編集：https://codepen.io/pen
Vue.jsの中核は、簡潔なテンプレート構文を使用して宣言的にデータをDOMにレンダリングできるシステムです。
Vueテンプレートの構文
補間
- テキスト：{ {メッセージ}}
- 補間を1回だけ実行し、後続のオブジェクトで変更しない：{ {msg}}
- htmlタグを挿入します。
- 機能（htmlタグの属性）：
- JavaScript式（ユーザーが作成したグローバル変数にアクセスできません）：{ {msg？ 'YES'： 'NO'}}
命令
- v-ifにより、Vueはこのタグをロードするかどうかを決定できます。
今あなたは私を見ます
- v-bindはパラメーターをurlに渡すことができます：
- v-onは、DOMイベントを監視するために使用されます。
- 動的パラメーターの角括弧でJavaScript式を記述します。ヌル、引用符、スペースは使用し
ません：<a v-bind:[attributeName]=“url”>
<a v-on:[eventName]=“doSomething”> - 命令修飾子「。」
：.preventは、次の
ように、トリガーされたイベントに対してevent.preventDefault（）を呼び出すようにv-on命令に指示します。
略語
Vueは一般的に使用されるv-bindとv-onの略語を提供しており、公式ウェブサイトはVueをサポートするブラウザーがこの記述をサポートすると主張しています：
- v-bind =：など：
完全な構文の
省略形 - v-on = @など：
完全な構文
<a @click="doSomething">の省略形
計算された属性
実際、JavaScript式はVueのテンプレート構文で記述できます。
{
{ message.split('').reverse().join('') }}
ただし、読みやすさと後での保守性を高めるために、Vueインスタンスにはより強力な「計算」属性があります。
var vm = new Vue({
el: '#example',
data: {message: 'Hello'},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
その後、直接{
{reversedMessage}}値を取得でき、このメッセージはレスポンシブ計算で使用されるため、コンソールメッセージの変更値、reversedMessageの変更が続きます。
** PS：計算された属性はキャッシュされます。**つまり、レスポンシブ依存関係の値（上記の例ではメッセージ）が変化しない場合、統合された計算属性を複数回呼び出すと、最初の計算の結果が取得されます。公式説明は、同じ値の計算が多数ある場合の計算速度を改善することです。したがって、この計算された属性には、特定の監視機能があります。
さらに、上記はすべて計算プロパティのゲッターメソッドです。公式Webサイトでは、セッターメソッドもあると指摘しています。
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
以下はアクティブに実行している場合です：、vm.fullName = 'willson H'setterメソッドが呼び出されます。
それは不必要だと思います。fullNameを変更する必要がある場合、ほとんどの場合、firstNameとlastNameを変更する必要があります。現時点では、計算が自動的にトリガーされます。手動でセッターを追加すると、Vueがより複雑に見えます。
メソッド属性メソッド
中括弧で直接呼び出すことができます
<p>Reversed message: "{
{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
上記の2つの例の計算結果はまったく同じであり、計算された属性は、応答依存性に基づいてキャッシュされます。ただし、違いは、計算された属性が、応答の依存関係に基づいてキャッシュされることです。これらは、関連する事後依存関係が変更された場合にのみ再評価されます。メソッド属性は、呼び出されるたびに再計算されます。
リスニング属性ウォッチ
Vueは、Vueインスタンスのデータ変更を監視して応答するためのより一般的な方法、つまりプロパティのリスニングを提供します。つまり、データソースが変更されると、リスナープロパティの対応するメソッドが呼び出されます。
<div id="div1">
城市：<input v-model="city">
整理：<p>{
{cityStr}}</p>
</div>
var vm = new Vue({
el: '#div1',
data: {
city: '',
cityStr: ''
},
watch: {
city: function (val) {
if(val.indexOf('市')<0){
this.cityStr = val + '市'
}else{
this.cityStr = val
}
}
}
})
私が挙げた例は比較的単純です。公式Webサイトで提供されている例には、lodashツールライブラリとaxios httpライブラリが含まれています。興味がある場合は、公式Webサイトの例をご覧ください。
リスナーは、主にリスナーをカスタマイズする必要がある場合に使用されます。実際、ほとんどの場合それを使用できます。属性の計算を解決できます。
著作権表示：記事の内容はインターネット上で要約されています。元の著者の権利を侵害している場合は、削除または承認について私に連絡してください