Vue 플러그 인 작성,상세 설명(데모 첨부)
1.개술
쉽게 말 하면 플러그 인 은 Vue 의 기능 을 강화 하거나 보충 하 는 것 을 말한다.
예 를 들 어 모든 페이지 의 구성 요소 에서 특정한 방법 을 호출 하거나 특정한 변 수 를 공유 하거나 특정한 방법 전에 코드 를 실행 할 수 있 도록 하 는 등 이다.
2.사용법
전체 절 차 는 다음 과 같다.
[설명 플러그 인]―[플러그 인 쓰기]―[등록 플러그 인]―[플러그 인 사용]
플러그 인과 설명 플러그 인 을 동기 화하 고 Vue 대상 에 등록 합 니 다(중복 등록 걱정 없 음).마지막 으로 Vue 구성 요 소 를 쓸 때 쓰 는 플러그 인 을 사용 합 니 다.
설명 플러그 인
먼저 js 파일 을 쓰 십시오.이 js 파일 은 플러그 인 파일 입 니 다.그 안의 기본 내용 은 다음 과 같 습 니 다.
/* ：
* ：service.js
* ： QQ：20004604
* */
export default {
install: function (Vue, options) {
//
}
};
Vue 실례 는 이해 하기 쉽 습 니 다.바로 Vue 대상 입 니 다.
options 설정 옵션 은 이 플러그 인 을 호출 할 때 대상 을 전달 할 수 있 습 니 다.
예 를 들 어 이 대상 에 속성 float 가 있 습 니 다.그리고 플러그 인의 방법/변 수 를 쓸 때 저 는 숫자 를 출력 한 다음 에 if 판단 문 구 를 써 야 합 니 다.
options.float 가 true 일 때 출력 부동 소수점;
false 나 undefined(즉 전 참 없 음)일 경우 출력 은 정수 입 니 다.
구체 적 으로 어떻게 추가 하 는 지 는 나중에 다시 이야기 하 자.
등록 플러그 인
Vue-router 를 사용 한 적 이 있다 면 이해 하기 쉽 습 니 다.import 를 통 해 도입 한 후 Vue.use(플러그 인 이름)를 통 해 플러그 인 을 등록 합 니 다.
예 를 들 어,우 리 는 보통 main.js 에 여러 가지 물건 을 도입 하고,구성 요소 의 루트 실례 도 여기에 있다
//main.js
import Vue from 'vue'
import App from './App.vue'
//
import service from './service.js'
Vue.use(service)
new Vue({
el: '#app',
render: (h) => h(App)
})
이렇게 간단 한 두 단 계 를 통 해 플러그 인 을 사용 할 수 있 습 니 다.
3.플러그 인 쓰기,플러그 인 사용
공식 문서 에 따 르 면 플러그 인 을 쓰 는 데 네 가지 방법 이 있 습 니 다.먼저 공식 코드 를 드 립 니 다.
// install
// 1.
Vue.myGlobalMethod = function () {
// ...
}
// 2.
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// ...
}
...
})
// 3.
Vue.mixin({
created: function () {
// ...
}
...
})
// 4.
Vue.prototype.$myMethod = function (options) {
// ...
}
3.1[인 스 턴 스 방법 이나 속성 추가]
1.핵심 사상:
prototype 을 통 해 방법 과 속성 을 추가 합 니 다.
2.쓰기:
// ， ， null
Vue.prototype.doubleNumber = function (val) {
if (typeof val === 'number') {
return val * 2;
} else if (!isNaN(Number(val))) {
return Number(val) * 2;
} else {
return null
}
}
이러한 구성 요소 가 있다 고 가정 합 니 다.
<template>
<div>
{{num}}
<button @click="double"> </button>
</div>
</template>
<script>
export default{
data(){
return {
num: 1
}
},
methods: {
double: function () {
// this.doubleNumber()
this.num = this.doubleNumber(this.num);
}
}
}
</script>
4.속성 을 추가 하면:
예 를 들 면:
Vue.prototype.number = 1;1.[값 에 따라 전달 유형]이 든[인용 에 따라 전달 유형]이 든 이 변 수 는 서로 다른 구성 요소 에 의 해 공유 되 지 않 습 니 다.더욱 정확하게 말하자면 A,B 두 구성 요소 가 있다 면.A 구성 요소 의 number 수치 가 바 뀌 고 B 구성 요소 의 number 수 치 는 바 뀌 지 않 습 니 다.따라서 이러한 변 수 를 인용 한 다음 에 A 의 값 을 수정 할 생각 을 하지 마 세 요.B 리 도 자동 으로 바 뀌 었 습 니 다.
2.구성 요소 에 이 속성 이 없 을 때 호출 할 때 플러그 인 을 통 해 가 져 온 값 을 표시 합 니 다.
구성 요소 에 이 속성 이 있 을 때 호출 할 때 구성 요소 에 있 는 이 속성의 값 을 표시 합 니 다.
이 를 통 해 함수 도 마찬가지 입 니 다.구성 요소 의 동명 함 수 는 항상 플러그 인 이 제공 하 는 함 수 를 덮어 씁 니 다.
즉,플러그 인 이 속성 을 제공 할 때 구성 요소 에 이 속성 이 없 으 면 플러그 인의 속성 을 사용 합 니 다.구성 요소 가 있 으 면 구성 요소 자체 의 것 을 사용 합 니 다.
3.2[전역 방법 또는 속성 추가]
1.핵심 사상:
Vue 대상 에 게 속성 을 추가 하 는 것 입 니 다.
첫 번 째 접촉 은 위 3.1 과 헷 갈 리 기 쉬 우 며,실제로 3.1 은 구성 요소 에 사용 되 고,3.2 는 Vue 대상 에 게 사용 된다.
예 를 들 어 test()방법 을 추가 하면:
3.1 을 통 해 추 가 됩 니 다.구성 요소 에서 this.test()를 통 해 호출 됩 니 다.
3.2 를 통 해 추 가 됩 니 다.밖 에 있 습 니 다.Vue 인 스 턴 스,예 를 들 어 Vue.test()를 통 해 호출 합 니 다.
2.쓰기:
//
Vue.test = function () {
alert("123")
}
// Vue
Vue.test()4.기타:
Vue 자체 속성 과 동명 이인 이 되면 무슨 일이 일어 날 지 묻 지 마 세 요.저 는 해 본 적 이 없어 요.
3.3【주입 모듈】
1.핵심 사상:
Vue 구성 요 소 를 쓸 때 처럼 방법 명 이 일치 하 며 구성 요소 에 대응 하 는 방법 명 을 실행 하기 전에 실 행 됩 니 다.
2.쓰기:
예 를 들 면:
Vue.mixin({
created: function () {
console.log(" ")
}
})각 구성 요소 의 created 방법 에 console.log 를 써 서 테스트 를 볼 수 있 습 니 다.
[인 스 턴 스 속성]과 함께 사용 할 수 있 습 니 다.디 버 깅 또는 제어 기능 에 사용 할 수 있 습 니 다.
//
Vue.mixin({
created: function () {
if (this.NOTICE)
console.log(" ")
}
})
// ， console.log
Vue.prototype.NOTICE = false;예 를 들 어 methods 속성 을 쓰 는 방법 이 라면 다음 과 같은 주입:
Vue.mixin({
methods: {
test: function () {
console.log("mixin test");
}
}
})그 중 하나 만 실행 하고 구성 요소 자체 의 동명 방법 을 우선 실행 합 니 다.이 점 은 주의해 야 한다.
3.사용:
수 동 으로 호출 할 필요 가 없습니다.대응 하 는 방법 을 실행 할 때 자동 으로 호출 됩 니 다.(플러그 인 에 있 는 것 을 먼저 호출 하고 구성 요소 자 체 를 호출 합 니 다)
4.기타:
1.여러 개의 플러그 인 이 하나의 방법 을 동시에 주입 한다 면(예 를 들 어 created,먼저 주입 한 방법 을 실행 한 다음 에 순서대로 실행 한 다음 에 주입 한 것,마지막 에 구성 요소 자 체 를 실행 합 니 다)
2.methods 속성 과 같은 방법 은 구성 요소 가 주 입 된 후에 각각 실행 되 지 않 고 하나만 실행 하 며 구성 요소 자 체 를 우선 실행 합 니 다.
3.4【전역 자원 추가】
1.핵심 사상:
첨가 방법 은 정상 적 인 첨가 방법 과 비슷 하고 거의 같다.
[사용자 정의 명령],[필터],[과도 등]을 추가 할 수 있 습 니 다.여 기 는[필터]를 예 로 들 수 있 습 니 다.
2.쓰기:
예 를 들 면:
// ， number Date ， YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //
"d+": this.getDate(), //
"h+": this.getHours(), //
"m+": this.getMinutes(), //
"s+": this.getSeconds(), //
"q+": Math.floor((this.getMonth() + 3) / 3), //
"S": this.getMilliseconds() //
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})
정상적으로 사용 하 는 것 과 똑 같이 사용 하면 됩 니 다.so easy.예 를 들 면:
{{num|formatTime}}이 걸 로 여러 가지 재 미 있 는 기능 을 찾 을 수 있 습 니 다.플러그 인 으로 쓰 고 필요 한 곳 을 가 져 오 면 됩 니 다.아주 편리 합 니 다!
4.예시 데모
간단 한 기능 을 가 진 예제 demo 를 추가 하여 참고 사용 을 제공 합 니 다.
/* ：
* demo，
*
* ： QQ：20004604
* */
export default {
install: function (Vue, options) {
// 1.
//
// 2.
// ， number Date ， YYYY-MM-DD HH-MM-SS
Vue.filter('formatTime', function (value) {
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //
"d+": this.getDate(), //
"h+": this.getHours(), //
"m+": this.getMinutes(), //
"s+": this.getSeconds(), //
"q+": Math.floor((this.getMonth() + 3) / 3), //
"S": this.getMilliseconds() //
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
})
// 2.
// ， console.log ，
Vue.prototype.NOTICE = true;
// 3.
// ，
Vue.mixin({
created: function () {
if (this.NOTICE)
console.log(" ")
},
methods: {
test: function () {
console.log("mixin test");
}
}
})
// 4.
// ， ， null
//
Vue.prototype.doubleNumber = function (val) {
if (typeof val === 'number') {
return val * 2;
} else if (!isNaN(Number(val))) {
return Number(val) * 2;
} else {
return null
}
}
// 4.
// ， $service ，
Vue.prototype.$service = {
//
telNumberCheck: function (tel) {
var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
return pattern.test(tel)
}
}
}
};
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
