Vue 치트시트
10819 단어 tutorialvuejavascriptbeginners
설치 - 프로덕션 버전
뷰2:
https://v2.vuejs.org/js/vue.min.js
Vue3:
https://unpkg.com/[email protected]/dist/vue.global.prod.js
선적 서류 비치
뷰2:
https://v2.vuejs.org/v2/guide/syntax.html
Vue3:
https://vuejs.org/guide/essentials/template-syntax.html
Vue2용 스타터 템플릿:
이 템플릿은 개발 버전을 사용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue2</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<h1>Hello, {{name}}!</h1>
<button @click="popup('alert bind')">click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
name: "Nivethan",
},
methods: {
popup(message) { alert(message); },
}
});
</script>
</body>
</html>
Vue3용 스타터 템플릿:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue3 Starter</title>
<link rel="icon" href="data:;base64,=">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<h1>Hello, {{name}}!</h1>
<button @click="popup('alert bind')">click me</button>
</div>
<script src="https://unpkg.com/vue@3"></script>
<script>
Vue.createApp({
data() {
return {
name: 'Nivethan'
}
},
methods: {
popup(message) { alert(message); },
}
}).mount('#app')
</script>
</body>
</html>
템플릿 구문
데이터는 Vue 인스턴스의 데이터 객체를 통해 템플릿으로 전달됩니다.
HTML에 변수 포함:
<div>Hello, {{ name }}!</div>
html 직접 삽입:
<div><span v-html="rawData"></span>
...
data...
rawData: `<span style="color:blue;">Hi!</span>`,
...
템플릿에서 반복:
<ol>
<li v-for="item in items">item</li>
</ol>
...
data...
items: ['One', 'Two', 'Three'],
...
변수를 사용하여 속성 설정:
<div v-bind:id="item.id"></div>
<div :id="someId"></div>
...
data...
item: { id: "wow" },
someId: 'shorthand-id',
...
토글 클래스:
<div v-bind:class="{ active: isActive }" class="red-text">Hello!</div>
<div :class="{ active: isActive }" class="red-text">Hello!</div>
html에서 조건문 사용:
<div v-if="true">This will appear conditionally.</div>
<div v-if="true">This will appear conditionally.</div>
<div v-else>This will show otherwise.</div>
이벤트 핸들러 사용:
이 함수는 Vue 인스턴스의 메소드 객체에 추가됩니다.
<div v-on:click="popup('hi!')">click me</div>
<div @click="log('hi!')">shorthand click me</div>
...
methods...
popup(message) { alert(message); },
log(message) { console.log(message); },
...
Reference
이 문제에 관하여(Vue 치트시트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/krowemoh/a-vue-cheatsheet-1bih텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
