Vue.js 메모장(수시로 업데이트)
8677 단어 JavaScriptVue.js
HTML과 Javascript의 각 요소의 연관성을 보여 주었다
주의!
v-for 사용 시 이 그림에 국한되지 않습니다어셈블리 개체를 생성할 때
어셈블리 개체가 생성되지 않은 경우
HTML 쓰기 시 고려 사항
잘못된 예
wrong.html
<head>
:
<script src="/pub/js/vue.js"></script>
<script src="/pub/js/main.js"></script>
:
</head>
<body>
<div id="app-10">
<app10 v-bind:text="text"></app10>
</div>
</body>
정확한 예
correct.html
<body>
<div id="app-10">
<app10 v-bind:text="text"></app10>
</div>
<script src="/pub/js/vue.js"></script>
<script src="/pub/js/main.js"></script>
</body>
구성 요소의 친자 관계를 쓸 때 주의사항
잘못된 예
wrong.js
var app10 = new Vue({
el: '#app-10',
data: {
text :"Hi, My Name is vue sample!"
}
})
// コンポーネントを先に登録しないとコケる！
var comp_app10 = Vue.component('app10', {
props: ['text'],
template: '<span>OK! [{{ text }}]</span>'
})
정확한 예
correct.js
// コンポーネントを先に登録しないとコケる！
var comp_app10 = Vue.component('app10', {
props: ['text'],
template: '<span>OK! [{{ text }}]</span>'
})
var app10 = new Vue({
el: '#app-10',
data: {
text :"Hi, My Name is vue sample!"
}
})
라이프 사이클 다이어그램
HTML 및 Vue 인스턴스 연관
new Vue({...})Vue 인스턴스 속성
{{ ... }}(Mustache 구문)
data, computed, methods
v-on
methods
v-bind
data
v-if
data
v-for
data
Vue.jp 문서에서 오류 발생
구성 요소에서 v-model 사용하기 에서
<custom-input v-model="searchText"></custom-input>이런 HTML이 나타났지만 v-model의 값이 틀렸습니다.아래 참조<custom-input v-model="value"></custom-input>v-모델이란?
양방향 데이터 귀속은?
좀 더 가늘게
사용법
사용 조건
링크 세트
좋은 일이 적혀 있으니 미리 연락해라
잘 모르니까 링크를 적어두세요
v-model? 그럼 뭐가 맛있어요?링크
CSS 지식용
기타 편리한 링크 세트
Reference
이 문제에 관하여(Vue.js 메모장(수시로 업데이트)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ti39dx/items/728e529f122f20346085텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
