この記事では、vue に関する関連知識を提供します。主に、ショッピング カートでの計算プロパティの全体的な使用方法など、計算プロパティ、リスナー、フィルターの詳細な紹介を紹介します。以下の内容が皆様のお役に立てれば幸いです。
【関連する推奨事項: javascript ビデオ チュートリアル 、vue.js チュートリアル ]
1計算されたプロパティ
1.1 使用法
概要:
テンプレートにロジックを入れすぎると、テンプレートが重くなりすぎてメンテナンスが困難になります。 、計算されたプロパティを使用すると、テンプレートが簡潔になり、保守が容易になります。計算されたプロパティは、応答性の高い依存関係に基づいてキャッシュされます。計算されたプロパティは、複数の変数またはオブジェクトを処理し、結果値を返すのに適しています。つまり、複数の変数の値の 1 つが変更された場合、監視する値は次の値になります。も変わります。
計算プロパティは Vue オブジェクトで定義されます。関数はキーワード計算プロパティ オブジェクトで定義され、値を返します。計算プロパティを使用する場合、データ内のデータと同じように使用されます。
使用法:
計算プロパティを使用しない場合、テンプレートで結果を計算する必要があります。結果を記述する方法はいくつかあります。
<p id="app">
<!-- 方法1：vue在使用时，不推荐在模板中来写过多的逻辑 -->
<h3 id="nbsp-n-n-nbsp">{{ n1+n2 }}</h3>
<!-- 方法2：对于一个计算结果，可能在当前的页面中，显示多个，显示几次就调用这个函数几次，性能会降低 -->
<h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
<h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
<h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2
},
methods: {
sum() {
console.log('sum --- methods');
return this.n1 + this.n2
}
}
})
</script>
結果を計算したい場合は、vue を使用して計算されたプロパティを提供できます。また、計算されたプロパティにはキャッシュ機能もあります。依存関係が変更されていない場合は、再度呼び出されたときにキャッシュ内のデータが読み取られます。
<p id="app">
<p>{{total}}</p>
<p>{{total}}</p>
<p>{{total}}</p>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2
},
// 计算[属性]
computed: {
// 调用时，直接写名称就可以，不用写小括号
// 计算属性中的依赖项，可以是一个，也是可以N个,取决于你在计算属性中调用多少
// 注：此方法中不能写异步
// 简写 使用最多的写法
total() {
console.log('computed -- total')
// 在计算属性中，调用了 n1和n2，则n1和n2就是它的依赖项，如果这两个依赖项，有一个发生改变，则它会重新计算，如果两个都没有发生改变，则第2之后调用，读取缓存中的数据
return this.n1 + this.n2
}
},
methods: {
// 计算属性中的方法在 methods 中也可以调用
sum() {
console.log('sum --- methods', this.total);
return this.n1 + this.n2
}
}
})
</script>
注:
- 計算属性を呼び出す場合は、かっこを使用せずに名前をテンプレートに直接記述します。
- 計算された属性では、n1 と n2 が呼び出され、n1 と n2 がその依存関係になります。これら 2 つの依存関係のいずれかが変更されると、再計算されます。どちらも存在しない場合、変更が発生すると、それが再計算されます。キャッシュ内のデータを読み取るための 2 回目の呼び出しの後に呼び出されます。このため、上記の計算は 3 回実行されますが、計算された属性の依存関係は変更されていないため、計算メソッドが呼び出されるのは 1 回だけです。
- 計算されたプロパティの依存関係は、計算されたプロパティで呼び出す数に応じて 1 または N になります。
- calculated 属性のメソッドに非同期を記述することはできません。
- 上記の計算されたプロパティは略語です。略語は最も一般的に使用される方法です。
- 計算されたプロパティは、テンプレートだけでなくメソッドからも呼び出すことができます。
定義された計算プロパティが省略されている場合、計算プロパティに値を割り当てるときにエラーが報告されます。標準的な方法で記述された場合にのみ、計算されたプロパティに対して代入操作を実行できます。標準的な書き方を見てみましょう。
<p id="app">
<h3 id="nbsp-sum-nbsp">{{ sum() }}</h3>
<h3 id="msg">{{msg}}</h3>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
n1: 1,
n2: 2,
msg: ''
},
// 计算[属性]
computed: {
// 标准写法
total: {
// 简写只是实现的了标准写法中的get方法
get() {
return this.n1 + this.n2
},
set(newVal) {
if (newVal > 10) {
this.msg = '值有点的大'
}
}
}
},
methods: {
sum() {
// 赋值只会触发标准方式中的set方法，然后你可以得到它，完成一些别的工作
if (this.total > 6) {
this.total = 101
}
return this.n1 + this.n2
}
}
})
</script>
注:
- 省略メソッドは、標準の記述メソッドの get メソッドのみを実装します。
- 代入は標準的な方法で set メソッドをトリガーするだけで、その後は新しい値を取得して他の作業を完了することができます。
1.2 ケース - 計算プロパティを使用したショッピング カートの合計
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习使用</title>
<!-- 第1步： 引入vue库文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：挂载点 -->
<p id="app">
<table border="1" width="600">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr v-for="item,index in carts">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="setNum(1,index)">+++</button>
<input type="number" v-model="item.num">
<button @click="setNum(-1,index)">---</button>
</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
</table>
<hr>
<h3>
合计：
{{totalPrice}}
</h3>
</p>
<!-- 第3步：实例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
carts: [
{ id: 1, name: '小米12pro', price: 1, num: 1 },
{ id: 2, name: '华为手机', price: 2, num: 1 },
{ id: 3, name: '水果手机', price: 3, num: 1 },
]
},
methods: {
setNum(n, index) {
this.carts[index].num += n
this.carts[index].num = Math.min(3, Math.max(1, this.carts[index].num))
},
del(index) {
confirm('确定删除') && this.carts.splice(index, 1)
}
},
// 计算属性
computed: {
totalPrice() {
return this.carts.reduce((prev, { price, num }) => {
// 依赖项
prev += price * num
return prev
}, 0)
}
}
})
</script>
</body>
</html>
2. リスナー
概要:
watch を使用して、data 内のデータの変更をリッスンします。watch 内の属性は、data 内に既に存在するデータである必要があります。
オブジェクトの変更を監視する必要がある場合、通常の監視メソッドではオブジェクトの内部属性の変更を監視できません。変更を監視できるのはデータ内のデータだけです。このとき、深い監視メソッドが必要です。オブジェクトを詳細に監視する属性。
使用法:
標準的な書き方:
<p id="app">
<p>
<input type="text" v-model="username">
<span>{{errorUsername}}</span>
</p>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '',
errorUsername: ''
},
// 监听器，它用来监听data配置中的数据的变化，一但有变化，就会自动触发.默认情况下，初始化不触发
// 在监听器中是可以得到this对象的
// 监听器它的依赖项，只有一个，一对一
// 监听器中可以写异步
watch: {
// 方法名或属性名 就是你要观察的data中的属性名称
// 标准写法
username: {
// newValue 变化后的值;oldValue 变化前的值
handler(newValue, oldValue) {
if (newValue.length >= 3) this.errorUsername = '账号过长'
else this.errorUsername = ''
}
}
})
</script>
注:
- リスナーは監視に使用されます。データ設定 データ内のデータが変更されると、自動的にトリガーされますが、デフォルトでは初期化はトリガーされません。
- このオブジェクトはリスナーで取得できます。
- リスナーには 1 対 1 の依存関係が 1 つだけあります。
- 非同期(AjaxまたはsetTimeout)をリスナーに記述できます。
省略形:
<p id="app">
<p>
<input type="text" v-model="username">
<span>{{errorUsername}}</span>
</p>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
username: '',
errorUsername: ''
},
watch: {
username(newValue, oldValue) {
if (newValue.length >= 3) this.errorUsername = '账号过长'
else this.errorUsername = ''
}
}
})
</script>
初期化時に、リスナー書き込みメソッドを有効にします:
<p id="app">
<p>
<input type="text" v-model="username">
<span>{{errorUsername}}</span>
</p>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'aaa',
errorUsername: ''
},
watch: {
// 方法名或属性名 就是你要观察的data中的属性名称
// 标准写法
username: {
handler(newValue, oldValue) {
if (newValue.length >= 3) this.errorUsername = '账号过长'
else this.errorUsername = ''
},
// 初始时，执行1次 --- 一般情况下，不启用 只有在标准写法下面，才有此配置
immediate: true
}
})
</script>
注意：这个配置只有在标准写法下才能有。
监听对象中的属性变化：
<p id="app">
<p>
<input type="number" v-model.number="user.id">
</p>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
user: { id: 100, name: 'aaa' }
},
// 监听对象中的指定的属性数据的变化 推荐如果你监听的是一个对象中数据变化，建议这样的方式
watch: {
'user.id'(newValue, oldValue){
console.log(newValue, oldValue);
}
}
})
</script>
监听对象变化：
<p id="app">
<p>
<input type="number" v-model.number="user.id">
</p>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
user: { id: 100, name: 'aaa' }
},
watch: {
// 监听对象,只能使用标准方式来写
// 监听对象变化，它的前后值是一样的，无法区分
user: {
// 深度监听
deep: true,
handler(newValue, oldValue) {
console.log(newValue, oldValue);
},
}
}
})
</script>
注意：
- 监听对象，只能使用标准方式来写
- 监听对象变化，它的前后值是一样的，无法区分
3. 过滤器
概述：
在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。
过滤器的作用就是为了对于界面中显示的数据进行处理操作。
过滤器可以定义全局或局部。
定义全局过滤器：
<p id="app">
<h3 id="nbsp-phone-nbsp-nbsp-phoneCrypt-nbsp">{{ phone | phoneCrypt }}</h3>
</p>
<script>
// 参数1：过滤器的名称，可以随意起名
// 参数2：回调函数，回调函数中的参数最少要有一个，第1位参数，永远指向为要过滤的数据
Vue.filter('phoneCrypt', value => {
return value.slice(0, 3) + '~~~~' + value.slice(7)
})
const vm = new Vue({
el: '#app',
data: {
phone: '13523235235'
}
})
</script>
上面的全局过滤器的回调函数中只有一个参数，我们还可以定义多个参数：
<p id="app">
<!-- 这里传的第一个参数,对应全局过滤器的回调函数中定义的第二个参数 -->
<h3 id="nbsp-phone-nbsp-nbsp-phoneCrypt-nbsp">{{ phone | phoneCrypt('!!!!') }}</h3>
</p>
<script>
Vue.filter('phoneCrypt', (value, salt = '****') => {
return value.slice(0, 3) + salt + value.slice(7)
})
const vm = new Vue({
el: '#app',
data: {
phone: '13523235235'
}
})
</script>
定义局部过滤器：
<p id="app">
<h3 id="nbsp-phone-nbsp-nbsp-phoneCrypt-nbsp">{{ phone | phoneCrypt('!!!!') }}</h3>
</p>
<script>
const vm = new Vue({
el: '#app',
data: {
phone: '13523235235'
},
// 局部过滤器
filters:{
phoneCrypt(value, salt = '****'){
return value.slice(0, 3) + salt + value.slice(7)
}
}
})
</script>
【相关推荐：javascript视频教程、vue.js教程】
以上がVue の計算プロパティとリスナーとフィルターの超詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Vue.js：Web開発におけるその役割を定義しますApr 18, 2025 am 12:07 AMWeb開発におけるVue.jsの役割は、開発プロセスを簡素化し、効率を向上させるプログレッシブJavaScriptフレームワークとして機能することです。 1）開発者は、レスポンシブデータのバインディングとコンポーネント開発を通じてビジネスロジックに集中できるようになります。 2）VUE.JSの作業原則は、パフォーマンスを最適化するためにレスポンシブシステムと仮想DOMに依存しています。 3）実際のプロジェクトでは、VUEXを使用してグローバルな状態を管理し、データの応答性を最適化することが一般的な慣行です。
Vue.jsの理解：主にフロントエンドフレームワークApr 17, 2025 am 12:20 AMVue.jsは、2014年にYou YuxiがリリースしたプログレッシブJavaScriptフレームワークで、ユーザーインターフェイスを構築します。その中心的な利点には、次のものが含まれます。1。レスポンシブデータバインディング、データ変更の自動更新ビュー。 2。コンポーネントの開発では、UIは独立した再利用可能なコンポーネントに分割できます。
Netflixのフロントエンド：React（またはVue）の例とアプリケーションApr 16, 2025 am 12:08 AMNetflixは、Reactをフロントエンドフレームワークとして使用します。 1）Reactのコンポーネント開発モデルと強力なエコシステムが、Netflixがそれを選択した主な理由です。 2）コンポーネント化により、Netflixは複雑なインターフェイスをビデオプレーヤー、推奨リスト、ユーザーコメントなどの管理可能なチャンクに分割します。 3）Reactの仮想DOMおよびコンポーネントライフサイクルは、レンダリング効率とユーザーインタラクション管理を最適化します。
フロントエンドの風景：Netflixが選択にアプローチした方法Apr 15, 2025 am 12:13 AMNetflixのフロントエンドテクノロジーでの選択は、主にパフォーマンスの最適化、スケーラビリティ、ユーザーエクスペリエンスの3つの側面に焦点を当てています。 1。パフォーマンスの最適化：Netflixは、Reactをメインフレームワークとして選択し、SpeedCurveやBoomerangなどのツールを開発して、ユーザーエクスペリエンスを監視および最適化しました。 2。スケーラビリティ：マイクロフロントエンドアーキテクチャを採用し、アプリケーションを独立したモジュールに分割し、開発効率とシステムのスケーラビリティを改善します。 3.ユーザーエクスペリエンス：Netflixは、Material-UIコンポーネントライブラリを使用して、A/Bテストとユーザーフィードバックを介してインターフェイスを継続的に最適化して、一貫性と美学を確保します。
React vs. Vue：Netflixはどのフレームワークを使用していますか？Apr 14, 2025 am 12:19 AMnetflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.
フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AMNetflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。
Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AMNetflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。
フロントエンドのvue.js：実際のアプリケーションと例Apr 11, 2025 am 12:12 AMVue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1）そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2）実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3）デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4）パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
SublimeText3 中国語版
中国語版、とても使いやすい
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
