[입문] Vue.js 해봤어요.
Vue.js 소개
JavaScript의 프레임워크 중 하나로서 프런트엔드를 효율적으로 개발할 수 있습니다.
Hello World!
먼저, Vue.《Hello World》아이콘
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> <!DOCTYPE html>
<html lang="ja">
<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.js入門</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
});
</script>
</body>
</html>
지시성
디렉토리는 접두어가 있는 Vue입니다.js에서 준비한 특별한 속성입니다.
더 자세히 말하면, DOM 요소에 대해 실행된 것을 라이브러리로 전송한다.
Vue.js에서 이 지도부터 지도로 끝날 때까지 매우 중요한 개념이다.
※ 다음은 바디 부분의 소스 코드만 기재됩니다.
v-bind
HTML 측면의 요소에 대한 속성을 동적으로 설정할 수 있습니다.
index.html
<body>
<div id="app">
<p v-bind:class="error_class">エラーが発生しました。</p>
<!- 省略記法 -->
<p :class="error_class">エラーが発生しました。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
error_class: "error"
}
});
</script>
</body>
v-on
이벤트 청중을 정의하여 Vue 인스턴스를 호출하는 방법을 사용할 수 있습니다.
index.html
<body>
<div id="app">
<p>{{ now }}</p>
<button v-on:click="time">現在時刻を表示</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
now: "00:00:00"
},
methods: {
time: function() {
var date = new Date();
this.now = date.getHours() + ":"
+ date.getMinutes() + ":"
+ date.getSeconds();
}
}
});
</script>
</body>
v-if
조건의 분기를 통해 유무 요소를 전환할 수 있다.
v-가 사실이라면 오류가 발생합니다.화면에 나타나다.isError가 가짜라면 오류가 발생합니다.화면에 안 나와요.index.html
<body>
<div id="app">
<p v-if="isError">エラーが発生しました。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var error = new Vue({
el: "#app",
data: {
isError: true
}
});
</script>
</body>
v-once
Vue.js 렌더링을 한 번만 합니다.
Vue 인스턴스의 변수에 액세스할 때는
isError로 설명됩니다.index.html
<body>
<div id="app">
<p v-once>{{ count }}回クリックされました</p>
<button v-on:click="counter">カウントボタン</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue ({
el: '#app',
data: {
count: 0
},
methods: {
counter: function(){
this.count++
}
}
})
</script>
</body>
v-for
어레이로서의 데이터의 각 요소를 제어할 수 있다.
v-for에서 확장 for문과 같은 기법을 기술합니다.
v-for를 사용하는 경우
this.変数名를 지정해야 합니다.키를 지정하지 않으면, 서열의 인덱스는 키 값에 사용되지만, 키로 사용되어서는 안 된다.
- 배열에 요소를 추가/삭제하거나 순서를 변경하면 색인 값도 변경됩니다.
index.html
<body>
<div id="app">
<button v-on:click="shuffle">シャッフル</button>
<ul>
<li v-for="prefecture in prefectures" :key="prefecture.id">
{{ prefecture.name }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
prefectures: [
{ id:1, name: "福岡県" },
{ id:2, name: "佐賀県" },
{ id:3, name: "長崎県" },
{ id:4, name: "大分県" },
{ id:5, name: "熊本県" },
{ id:6, name: "宮崎県" },
{ id:7, name: "鹿児島県" }
]
}
});
</script>
</body>
v-model
간단하게 정보와 데이터를 입력하는 양방향 데이터 연결을 할 수 있다.
더욱 구체적으로 말하면 텍스트 상자의 값(value 속성 값)이 바뀌면 데이터가 가지고 있는 값
v-bindのkeyプロパティ에 자동으로 반영될 수 있다.text는 속성을 무시하는 초기값의 특징이 있기 때문에 v-model 또는 dataに初期値を持たせる가 필요하다.index.html
<body>
<div id="app">
<p>{{ text }}</p>
<input v-model="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue ({
el: '#app',
data: {
text: ''
}
})
</script>
</body>
계산 속성
계산 속성은
カスタムディレクティブで独自に実装을 가리킨다.vue 실례에서 묘사
関数で算出したデータを返すことができるプロパティ.index.html
<body>
<div id="app">
{{ fullName }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Nobi',
lastName: 'Nobita'
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
conputed도 같을 수 있다.index.html
<body>
<div id="app">
{{ getFullName() }}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
firstName: 'Nobi',
lastName: 'Nobita'
},
methods: {
getFullName: function() {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
conputed VS methods
conputed
methods
메모 (호출)
() 필요 없음
() 필요
캐시
이불
하지 않다
<body>
<div id="app">
// conputed
<ol>
<li>{{ randomNum }}</li>
<li>{{ randomNum }}</li>
<li>{{ randomNum }}</li>
</ol>
// methods
<ol>
<li> {{ getRandomNum() }}</li>
<li> {{ getRandomNum() }}</li>
<li> {{ getRandomNum() }}</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
computed: {
randomNum: function () {
console.log("computed");
return Math.random();
}
},
methods: {
getRandomNum: function () {
console.log("methods");
return Math.random();
}
}
});
</script>
</body>
// computed
0.5562891327999486
0.5562891327999486
0.5562891327999486
// methods
0.10127439472454514
0.530424483259178
0.4696634887357811
재활동 데이터(data 옵션으로 설정된 데이터)를 업데이트하지 않으면 컴퓨터가 실행되지 않습니다!!
참고 자료
Reference
이 문제에 관하여([입문] Vue.js 해봤어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/web_tips/articles/3c52020af5810d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
