Vue.js 동적 매개 변수 정보
8891 단어 Vue.js
입문
vue.나는 코드를 쓰면서 js의 문서를 복습했는데 결과가 꽉 차서 적어 놓았다
동적 매개 변수
vue.js 버전 2.6.0부터 괄호로 묶거나 지령 매개 변수에 JavaScript 공식을 사용할 수 있습니다(참조: vue.js 문서
hoge.html<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<a v-on:click="doSomething">click</a> <!-- clickするとdoSomethingを呼ぶ -->
<a v-on:[eventName]="doSomething">click</a>
<!--ここに書かれている[eventName]が動的引数 -->
<!-- eventNameの値をdataで設定することができる 今回でいうと値はclickとなる-->
<!-- なので 実際のページで見ると上と下どちらも同じように展開される。-->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!",
eventName: "click" //こちらでeventNameの値を設定
},
methods:
// clickすると呼び出させれる
doSomething: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
코드 안에 있는 설명이지만
이것만 동적 인자가 아닙니다.그냥 이번에 여기서 막혔어요.
여기 설명밖에 없어요.
이번에 막힌 곳.
hoge.html <!-- 省略 -->
<a v-on:[eventName]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventName: "click"
}
</script>
이번에는 v-bind에서 설정한 이벤트Name 이름 규칙으로 막혔습니다.
문서라면 이렇게 유당통 데이터로 설정하면 참조 값
하면, 만약, 만약...[Vue warn]: Property or method "eventname" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See:
나오다 
응, 맞춤법 오류를 여러 번 확인했지만 틀리지 않아서 오히려 곤란해.
하면, 만약, 만약...Property or method "eventname"
분명히 카멜 상자로 썼는데, 카멜 상자가 아니라는 것을 발견했다.
그래서 우리는 세 가지 모델을 검증했다.
검증
html와 js측은 모두 유당함의 작법이 아니다.
hoge.html <!-- 省略 -->
<a v-on:[eventname]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventname: "click"
}
</script>
결과
콘솔 오류 없음
html 낙타봉 케이스만
hoge.html <!-- 省略 -->
<a v-on:[eventName]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventname: "click"
}
</script>
결과
콘솔 오류 없음
js만 있는 유당통
hoge.html
<!-- 省略 -->
<a v-on:[eventname]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventName: "click"
}
</script>
결과
콘솔 오류
의 결과.
세 가지 검증을 토대로 우리는 동적 매개 변수 인용원의 데이터가 낙타봉 상황에서 인용할 수 없다는 것을 발견했다.
버전 검증
나는 이것이 나의 지식이 너무 적은 원인이라고 생각한다
동적 매개 변수에 적응하는 2.6.0을 지정하고 이동해 보았지만 결과는 변하지 않았습니다.
끝내다
이번에 우리는 동적 매개 변수에 대해 각종 검증을 진행하였다
이것은 확실한 결과가 아니다. 만약 누군가가 알고 있다면
교수님
보충하여 기록하다
문서를 아래로 잘 읽어라.
in-DOM 템플릿(HTML 파일에 직접 쓰인 템플릿)을 사용하는 경우 브라우저에서 속성 이름을 소문자로 강제로 줄여야 하기 때문에 키 이름을 대문자로 쓰는 것을 피해야 합니다. (참조: vue.js 문서
이런 일.대문자를 피하다.
스네크의 사례도 대체로 통과되었다.
참고문
Vue.js 문서
유당통
Reference
이 문제에 관하여(Vue.js 동적 매개 변수 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nakamo-03/items/cc512dd64d7adb936f39
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
<a v-on:click="doSomething">click</a> <!-- clickするとdoSomethingを呼ぶ -->
<a v-on:[eventName]="doSomething">click</a>
<!--ここに書かれている[eventName]が動的引数 -->
<!-- eventNameの値をdataで設定することができる 今回でいうと値はclickとなる-->
<!-- なので 実際のページで見ると上と下どちらも同じように展開される。-->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: "Hello Vue!",
eventName: "click" //こちらでeventNameの値を設定
},
methods:
// clickすると呼び出させれる
doSomething: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
<!-- 省略 -->
<a v-on:[eventName]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventName: "click"
}
</script>
[Vue warn]: Property or method "eventname" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See:
Property or method "eventname"
<!-- 省略 -->
<a v-on:[eventname]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventname: "click"
}
</script>
<!-- 省略 -->
<a v-on:[eventName]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventname: "click"
}
</script>
<!-- 省略 -->
<a v-on:[eventname]="doSomething">click</a>
<script>
//---省略
data: {
message: "Hello Vue!",
eventName: "click"
}
</script>
Reference
이 문제에 관하여(Vue.js 동적 매개 변수 정보), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakamo-03/items/cc512dd64d7adb936f39텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
