이 기사에서는 vue에 대한 관련 지식을 제공합니다. 장바구니 합계에서 계산된 속성의 사용 등을 포함하여 계산된 속성, 리스너 및 필터에 대한 자세한 소개를 주로 소개합니다. 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
【관련 권장 사항: javascript 비디오 튜토리얼, vue.js tutorial】
1. 계산된 속성
1.1 사용 방법
개요:
Put 템플릿에 너무 많습니다 로직으로 인해 템플릿이 과중해지고 유지 관리가 어려워질 수 있습니다. 계산된 속성을 사용하면 템플릿을 간결하고 유지 관리하기 쉽게 만들 수 있습니다. 계산된 속성은 반응형 종속성에 따라 캐시됩니다. 계산된 속성은 여러 변수나 객체를 처리하고 결과 값을 반환하는 데 더 적합합니다. 즉, 여러 변수의 값 중 하나가 변경되면 우리가 모니터링하는 값도 변경됩니다. 변화.
계산된 속성은 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는 종속성입니다. 두 종속성 중 하나가 변경되면 다시 계산됩니다. 두 번째 호출 후에 호출됩니다. 캐시에. 이것이 위의 계산이 세 번 수행되는 이유인데, 계산된 속성의 종속성이 변경되지 않았기 때문에 계산 메서드는 한 번만 호출됩니다.
- 계산된 속성의 종속성은 계산된 속성에서 호출한 수에 따라 1 또는 N이 될 수 있습니다.
- 비동기 메서드는 계산 속성에 작성할 수 없습니다.
- 위에서 계산된 속성은 약어입니다. 약어는 가장 일반적으로 사용되는 방법입니다.
- 계산된 속성은 템플릿뿐만 아니라 메서드에서도 호출할 수 있습니다.
정의된 계산된 속성이 약어인 경우 계산된 속성에 값을 할당할 때 오류가 보고됩니다. 표준 방식으로 작성된 경우에만 계산된 속성에 할당 작업을 수행할 수 있습니다. 표준적인 글쓰기 방법이 무엇인지 살펴보겠습니다.
<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. Listener
개요:
watch의 속성은 데이터 데이터에 이미 존재해야 합니다.
객체의 변경 사항을 모니터링해야 할 때 일반 감시 방법으로는 객체 내부 속성의 변경 사항을 모니터링할 수 없습니다. 이때 객체를 모니터링하려면 deep 속성이 필요합니다. 깊이.
사용법:
표준 쓰기:
<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>
참고:
- 리스너는 데이터 구성에서 데이터 변경 사항을 모니터링하는 데 사용됩니다. 기본적으로 초기화됩니다. 트리거되지 않습니다.
- 이 객체를 리스너에서 얻을 수 있습니다.
- 리스너에는 일대일 종속성이 하나만 있습니다.
- 비동기(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
프론트 엔드의 vue.js : 실제 응용 프로그램 및 예제Apr 11, 2025 am 12:12 AMvue.js는 복잡한 사용자 인터페이스를 구축하는 데 적합한 점진적인 JavaScript 프레임 워크입니다. 1) 핵심 개념에는 반응 형 데이터, 구성 요소화 및 가상 DOM이 포함됩니다. 2) 실제 응용 분야에서는 TODO 응용 프로그램을 구축하고 Vuerouter를 통합하여 시연 할 수 있습니다. 3) 디버깅 할 때 VuedeVtools 및 Console.log를 사용하는 것이 좋습니다. 4) 성능 최적화는 V-IF/V- 쇼, 목록 렌더링 최적화, 구성 요소의 비동기로드 등을 통해 달성 할 수 있습니다.
vue.js and React : 주요 차이점 이해Apr 10, 2025 am 09:26 AMvue.js는 중소형 프로젝트에 적합하지만 REACT는 크고 복잡한 응용 프로그램에 더 적합합니다. 1. Vue.js의 응답 형 시스템은 종속성 추적을 통해 DOM을 자동으로 업데이트하여 데이터 변경을 쉽게 관리 할 수 있습니다. 2. 반응은 단방향 데이터 흐름을 채택하고 데이터 흐름에서 하위 구성 요소로 데이터가 흐르고 명확한 데이터 흐름과 곤란하기 쉬운 구조를 제공합니다.
vue.js vs. React : 프로젝트 별 고려 사항Apr 09, 2025 am 12:01 AMvue.js는 중소형 프로젝트 및 빠른 반복에 적합한 반면 React는 크고 복잡한 응용 프로그램에 적합합니다. 1) vue.js는 사용하기 쉽고 팀이 불충분하거나 프로젝트 규모가 작는 상황에 적합합니다. 2) React는 더 풍부한 생태계를 가지고 있으며 고성능 및 복잡한 기능적 요구가있는 프로젝트에 적합합니다.
태그를 vue로 점프하는 방법Apr 08, 2025 am 09:24 AMVUE에서 태그의 점프를 구현하는 방법에는 다음이 포함됩니다. HTML 템플릿의 A 태그를 사용하여 HREF 속성을 지정합니다. VUE 라우팅의 라우터 링크 구성 요소를 사용하십시오. javaScript 에서이. $ router.push () 메소드를 사용하십시오. 매개 변수는 쿼리 매개 변수를 통해 전달 될 수 있으며 동적 점프를 위해 라우터 옵션에서 경로가 구성됩니다.
VUE의 구성 요소 점프를 구현하는 방법Apr 08, 2025 am 09:21 AMVUE에서 구성 요소 점프를 구현하는 방법은 다음과 같습니다. 라우터 링크 및 & lt; router-view & gt; 하이퍼 링크 점프를 수행하고 대상 경로로 속성을 지정합니다. & lt; router-view & gt; 현재 라우팅 된 렌더링 된 구성 요소를 표시하는 구성 요소. 프로그래밍 방식 탐색을 위해 router.push () 및 router.replace () 메소드를 사용하십시오. 전자는 역사를 구하고 후자는 기록을 떠나지 않고 현재 경로를 대체합니다.
Vue의 div로 점프하는 방법Apr 08, 2025 am 09:18 AMVUE에서 DIV 요소를 점프하는 두 가지 방법이 있습니다. VUE 라우터를 사용하고 라우터 링크 구성 요소를 추가하십시오. @Click 이벤트 리스너를 추가하고 이것을 호출하십시오. $ router.push () 메소드를 점프하십시오.
vue 점프로 값을 전송하는 방법Apr 08, 2025 am 09:15 AMVUE에서 데이터를 전달하는 두 가지 주요 방법이 있습니다 : Props : 일원 데이터 바인딩, 부모 구성 요소에서 자식 구성 요소로 데이터를 전달합니다. 이벤트 : 이벤트와 사용자 정의 이벤트를 사용하여 구성 요소간에 데이터를 전달합니다.
Vue의 소개 방법으로 점프하는 방법Apr 08, 2025 am 09:12 AMvue.js는 점프하는 세 가지 방법을 제공합니다. 기본 JavaScript API : Window.location.href를 사용하여 점프하십시오. Vue 라우터 : & lt; router-link & gt를 사용하십시오. 태그 또는이. $ router.push () 메소드 점프. Vuex : 파견 경로 점프는 파견 동작을 통과하거나 돌연변이를 커밋합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
드림위버 CS6
시각적 웹 개발 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
