VueJS 기초
9210 단어 vuetutorialjavascriptbeginners
프로젝트 설정
선택한 프로젝트 디렉터리로 이동하여 다음 콘텐츠로 index.html 및 app.js 파일 2개를 만듭니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Import VueJS from CDN. In a production app, we wouldn't do
it this way. Instead, we would download the libraries locally or
use vue-cli -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body {
width: 80%;
margin: auto;
}
</style>
<title>Vue Basics</title>
</head>
<body>
<!-- This will be our "root" element for Vue
Everything that we do with Vue will be rendered inside
this tag.
-->
<div id="app">
<!-- In app.js, we are giving the Vue engine a data object.
One of the properties of this object is :title. The following
line tells the Vue engine to output that value -->
<h1>{{ title }}</h1>
</div>
<script src="app.js"></script>
</body>
</html>
// app.js
// Here we are initializing the Vue engine, telling it where
// we want to render, and giving it some data
new Vue({
// the "el" property tells the Vue engine where in the DOM we
//want to render our content. Below, we are telling Vue to use
// the element with id=app
el: "#app",
// The "data" property is where we give the Vue engine our data.
// In this case, we're giving a title
data: {
title: "Welcome to Vue!"
}
});
이제 개발자 서버를 시작하고 브라우저에서 적절한 URL로 이동합니다. 라이브 서버는 http://localhost:5500/ 에서 시작해야 합니다. 코드의 주석이 지금까지 무슨 일이 일어나고 있는지 충분히 보여주기를 바랍니다. HTML에서 이중 괄호
{{}}를 사용하면 Vue 인스턴스의 데이터에 액세스할 수 있습니다. 이제 조금 더 흥미로운 것을 해보자.사용자 정의 방법
Vue 엔진이 사용할 커스텀 메소드를 생성할 수 있습니다. 이제 실제로 실행해 보겠습니다. app.js에서 아래와 같이 다른 데이터 속성과 메서드를 추가해 보겠습니다.
new Vue({
el: "#app",
data: {
title: "Welcome to Vue!",
name: "Big Boss"
},
methods: {
greet() {
return `Hello ${this.name}`;
}
}
});
이제 다음과 같이 View에서 메서드를 사용하겠습니다.
<!-- For brevity I'm only showing the "root" element where Vue is
rendering -->
<div id="app">
<h1>{{ title }}</h1>
<h2>{{ greet() }}</h2>
</div>
다시 말하지만, 이중 괄호 안의 Vue 인스턴스에서 메서드를 호출할 수 있습니다. 브라우저에서 페이지에 렌더링된 "Hello Big Boss"가 표시되어야 합니다. 이제 간단한 데이터 바인딩을 확인해보자.
v-bind를 사용한 데이터 바인딩
데이터 바인딩을 사용하면 뷰 요소를 모델 속성에 바인딩하여 모델이 업데이트될 때 뷰가 자동으로 업데이트되도록 할 수 있습니다. 이것은 모델에서 보기로의 단방향 바인딩입니다. 우리는 곧 양방향 바인딩을 확인할 것입니다. 지금은 요소의 클래스 속성을 모델 속성에 바인딩하는 간단한 단방향 바인딩을 수행해 보겠습니다. 우리는 이것을 v-bind 지시어로 합니다. app.js에서 아래와 같이 데이터 객체를 업데이트합니다.
// app.js
data: {
title: 'Welcome to Vue!',
name: 'Big Boss',
my_cool_class: 'cool'
}
index.html에서 기존 코드 아래(여전히 "app"div 안에 있음)에서 h1 태그를 만들고 해당 클래스를 "my_cool_class"속성에 바인딩합니다.
<!-- Data-binding -->
<!-- Bind our class attribute to a model property -->
<h1 v-bind:class="my_cool_class">Hi there {{ name }}</h1>
인라인 CSS에서 .cool이라는 클래스 선택기를 추가하고 원하는 대로 스타일을 지정하여 우리가 수행한 작업의 효과를 볼 수 있습니다. 렌더링된 후 DOM에서 위의 h1 요소를 검사하면 "멋진"클래스가 있음을 알 수 있습니다. 참고 사항: v-bind 지시문에 대한 약식 구문을 사용할 수 있습니다. 이것은 다음과 같이 바인딩하려는 속성이 뒤에 오는 것입니다.
<!-- Data-binding (shorthand) -->
<h1 :class="my_cool_class">Hi there {{ name }}</h1>
양방향 바인딩
좋아, 그래서 꽤 멋졌다. 뷰 속성을 데이터 속성에 바인딩할 수 있었지만 단방향이었습니다. 이제 v-model 지시문을 사용하여 name 속성에 양방향 바인딩을 수행해 보겠습니다. index.html에서 앱 div에 다음을 추가합니다.
<!-- Two-way binding with v-model -->
<input type="text" v-model:value="name" />
브라우저에서 볼 때 입력 상자에 이미 "Big Boss"값이 포함되어 있어야 합니다. 이 값을 변경하면 이전 h1 태그의 값도 업데이트된 것을 볼 수 있습니다. 얼마나 멋진데요?! 정답은 아주 멋집니다. v-model 지시문은 Vue가 특정 속성에 바인딩하고 뷰에서 변경할 때 해당 속성을 업데이트하도록 지시합니다. 나는 당신이 이것으로 더 실험하기를 권장합니다. 내부 CSS에 다른 스타일 선택기를 만들고 my_cool_class에 양방향 바인딩을 사용하여 놀 수 있습니다.
결론
이 게시물에서는 VueJS를 사용하는 매우 기본적인 사항을 살펴보았습니다. 나는 이 시리즈를 계속해서 다음과 같은 최소한의 기본적인 것들을 다룰 계획입니다.
그리고 아마도 더 많은 것을 지켜봐 주시기 바랍니다. 이것이 도움이 되었기를 바라며 의견/비판/요청은 항상 환영합니다!
Github repo
Reference
이 문제에 관하여(VueJS 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/nkratzmeyer/vuejs-basics-19mo텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
