Vue에 대한 간략한 소개 . . .
뷰란?
Vue.js는 사용자 인터페이스와 단일 페이지 애플리케이션을 구축하기 위한 경량의 프론트엔드 프레임워크입니다. 일반적으로 Vue라고 하는 오픈 소스 JavaScript 프레임워크입니다.
뷰는 왜 만들어졌나요?
Vue는 Evan You가 만들었습니다. 그는 Angular에 대해 가장 좋아하지만 가벼운 기능으로 프레임워크를 만들고 싶었습니다. Vue는 2014년에 출시되었습니다.
Vue 출시 이후 인기가 높아졌습니다. 가장 기본적인 수준에서는 선언적 렌더링 및 구성 요소 구성에 중점을 둡니다.
뷰 렌더링
Vue는 Vue의 인스턴스 데이터와 DOM을 바인딩할 수 있는 HTML 기반 구문을 사용합니다. Vue는 템플릿 사용을 권장합니다. 그러나 JavaScript를 활용하려면 렌더링 기능이 필요할 수 있습니다.
안녕하세요 월드입니다!
Vue가 얼마나 간단한지 설명하기 위해 Hello World를 만들어 봅시다! 앱.
먼저 터미널에 다음 명령을 입력하여 Vue를 설치합니다.
$ npm install vue
그런 다음 html 파일을 만들고 다음을 입력합니다.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
<script> 태그 내에서 Vue의 새 인스턴스가 new Vue 단어로 생성됩니다. 이 새 인스턴스에는 요소 ID 및 연결된 데이터가 있습니다.
el: #app 선언은 Vue가 app의 ID를 사용하여 DOM 요소 내부에 앱을 렌더링하도록 지시합니다. 위의 코드에서 이것은 <div> 태그에 해당합니다.
data 개체는 앱에 대한 데이터를 보유합니다. 위의 코드에서 message 는 <div> 태그 내에서 {{ message }} 로 참조됩니다. 메시지 값이 변경되면 Vue는 페이지를 업데이트합니다. 이것을 선언적 렌더링이라고 합니다.
뷰 구성 요소
Vue 구성 요소는 기본 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화합니다. 구성 요소는 기본적으로 미리 정의된 옵션이 있는 Vue 인스턴스입니다. 고유한 상태, 마크업 및 스타일을 가질 수 있습니다.
Hello World 예제에서 렌더링 기능을 통합하려면 html 파일과 {{ message }} 에서 스크립트를 제거하십시오.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
JavaScript 파일에 다음을 입력합니다.
new Vue({
el: '#app',
render(createElement) {
return createElement('h1', 'Hello World!');
}
});
위 자바스크립트 파일에 포함된 코드는 Vue 컴포넌트입니다. 그러나 Vue 구성 요소를 만드는 다른 방법이 있습니다.
다음은 아래와 같이 키워드component를 사용하여 생성됩니다.
Vue.component('component-name', {
/* Add component options here */
});
명명된 구성 요소를 구현하려면 구성 요소 호출을 캡슐화하는 <div> 태그를 포함합니다.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id = "component_hello1">
<hellocomponent></hellocomponent>
</div>
<div id = "component_hello2">
<hellocomponent></hellocomponent>
</div>
</body>
</html>
JavaScript 파일에는 다음과 유사한 코드가 포함되어야 합니다.
Vue.component('hellocomponent',{
template : '<div><h1>Hello World!</h1></div>'
});
new Vue 또는 Vue.component를 사용하는 것은 응용 프로그램이 단일 페이지 응용 프로그램이 아닐 때 Vue 구성 요소를 구현하는 표준 방법입니다. 단일 페이지 응용 프로그램에서는 단일 파일 구성 요소를 사용하는 것이 더 일반적입니다.
결론
Vue는 다른 프레임워크에 비해 배우기가 매우 쉽습니다. 또한 매우 유연합니다. 인기가 높아지면서 Vue를 배우는 데 시간을 할애할 가치가 있습니다. Vue는 가까운 장래에 React와 Angular를 능가할 수 있습니다.
Reference
이 문제에 관하여(Vue에 대한 간략한 소개 . . .), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/zeppa/a-brief-intro-to-vue-1c71
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Vue는 Evan You가 만들었습니다. 그는 Angular에 대해 가장 좋아하지만 가벼운 기능으로 프레임워크를 만들고 싶었습니다. Vue는 2014년에 출시되었습니다.
Vue 출시 이후 인기가 높아졌습니다. 가장 기본적인 수준에서는 선언적 렌더링 및 구성 요소 구성에 중점을 둡니다.
뷰 렌더링
Vue는 Vue의 인스턴스 데이터와 DOM을 바인딩할 수 있는 HTML 기반 구문을 사용합니다. Vue는 템플릿 사용을 권장합니다. 그러나 JavaScript를 활용하려면 렌더링 기능이 필요할 수 있습니다.
안녕하세요 월드입니다!
Vue가 얼마나 간단한지 설명하기 위해 Hello World를 만들어 봅시다! 앱.
먼저 터미널에 다음 명령을 입력하여 Vue를 설치합니다.
$ npm install vue
그런 다음 html 파일을 만들고 다음을 입력합니다.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
<script> 태그 내에서 Vue의 새 인스턴스가 new Vue 단어로 생성됩니다. 이 새 인스턴스에는 요소 ID 및 연결된 데이터가 있습니다.
el: #app 선언은 Vue가 app의 ID를 사용하여 DOM 요소 내부에 앱을 렌더링하도록 지시합니다. 위의 코드에서 이것은 <div> 태그에 해당합니다.
data 개체는 앱에 대한 데이터를 보유합니다. 위의 코드에서 message 는 <div> 태그 내에서 {{ message }} 로 참조됩니다. 메시지 값이 변경되면 Vue는 페이지를 업데이트합니다. 이것을 선언적 렌더링이라고 합니다.
뷰 구성 요소
Vue 구성 요소는 기본 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화합니다. 구성 요소는 기본적으로 미리 정의된 옵션이 있는 Vue 인스턴스입니다. 고유한 상태, 마크업 및 스타일을 가질 수 있습니다.
Hello World 예제에서 렌더링 기능을 통합하려면 html 파일과 {{ message }} 에서 스크립트를 제거하십시오.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
JavaScript 파일에 다음을 입력합니다.
new Vue({
el: '#app',
render(createElement) {
return createElement('h1', 'Hello World!');
}
});
위 자바스크립트 파일에 포함된 코드는 Vue 컴포넌트입니다. 그러나 Vue 구성 요소를 만드는 다른 방법이 있습니다.
다음은 아래와 같이 키워드component를 사용하여 생성됩니다.
Vue.component('component-name', {
/* Add component options here */
});
명명된 구성 요소를 구현하려면 구성 요소 호출을 캡슐화하는 <div> 태그를 포함합니다.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id = "component_hello1">
<hellocomponent></hellocomponent>
</div>
<div id = "component_hello2">
<hellocomponent></hellocomponent>
</div>
</body>
</html>
JavaScript 파일에는 다음과 유사한 코드가 포함되어야 합니다.
Vue.component('hellocomponent',{
template : '<div><h1>Hello World!</h1></div>'
});
new Vue 또는 Vue.component를 사용하는 것은 응용 프로그램이 단일 페이지 응용 프로그램이 아닐 때 Vue 구성 요소를 구현하는 표준 방법입니다. 단일 페이지 응용 프로그램에서는 단일 파일 구성 요소를 사용하는 것이 더 일반적입니다.
결론
Vue는 다른 프레임워크에 비해 배우기가 매우 쉽습니다. 또한 매우 유연합니다. 인기가 높아지면서 Vue를 배우는 데 시간을 할애할 가치가 있습니다. Vue는 가까운 장래에 React와 Angular를 능가할 수 있습니다.
Reference
이 문제에 관하여(Vue에 대한 간략한 소개 . . .), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/zeppa/a-brief-intro-to-vue-1c71
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Vue가 얼마나 간단한지 설명하기 위해 Hello World를 만들어 봅시다! 앱.
먼저 터미널에 다음 명령을 입력하여 Vue를 설치합니다.
$ npm install vue
그런 다음 html 파일을 만들고 다음을 입력합니다.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
<script> 태그 내에서 Vue의 새 인스턴스가 new Vue 단어로 생성됩니다. 이 새 인스턴스에는 요소 ID 및 연결된 데이터가 있습니다.el: #app 선언은 Vue가 app의 ID를 사용하여 DOM 요소 내부에 앱을 렌더링하도록 지시합니다. 위의 코드에서 이것은 <div> 태그에 해당합니다.data 개체는 앱에 대한 데이터를 보유합니다. 위의 코드에서 message 는 <div> 태그 내에서 {{ message }} 로 참조됩니다. 메시지 값이 변경되면 Vue는 페이지를 업데이트합니다. 이것을 선언적 렌더링이라고 합니다.뷰 구성 요소
Vue 구성 요소는 기본 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화합니다. 구성 요소는 기본적으로 미리 정의된 옵션이 있는 Vue 인스턴스입니다. 고유한 상태, 마크업 및 스타일을 가질 수 있습니다.
Hello World 예제에서 렌더링 기능을 통합하려면 html 파일과 {{ message }} 에서 스크립트를 제거하십시오.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
JavaScript 파일에 다음을 입력합니다.
new Vue({
el: '#app',
render(createElement) {
return createElement('h1', 'Hello World!');
}
});
위 자바스크립트 파일에 포함된 코드는 Vue 컴포넌트입니다. 그러나 Vue 구성 요소를 만드는 다른 방법이 있습니다.
다음은 아래와 같이 키워드component를 사용하여 생성됩니다.
Vue.component('component-name', {
/* Add component options here */
});
명명된 구성 요소를 구현하려면 구성 요소 호출을 캡슐화하는 <div> 태그를 포함합니다.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id = "component_hello1">
<hellocomponent></hellocomponent>
</div>
<div id = "component_hello2">
<hellocomponent></hellocomponent>
</div>
</body>
</html>
JavaScript 파일에는 다음과 유사한 코드가 포함되어야 합니다.
Vue.component('hellocomponent',{
template : '<div><h1>Hello World!</h1></div>'
});
new Vue 또는 Vue.component를 사용하는 것은 응용 프로그램이 단일 페이지 응용 프로그램이 아닐 때 Vue 구성 요소를 구현하는 표준 방법입니다. 단일 페이지 응용 프로그램에서는 단일 파일 구성 요소를 사용하는 것이 더 일반적입니다.
결론
Vue는 다른 프레임워크에 비해 배우기가 매우 쉽습니다. 또한 매우 유연합니다. 인기가 높아지면서 Vue를 배우는 데 시간을 할애할 가치가 있습니다. Vue는 가까운 장래에 React와 Angular를 능가할 수 있습니다.
Reference
이 문제에 관하여(Vue에 대한 간략한 소개 . . .), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/zeppa/a-brief-intro-to-vue-1c71
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
new Vue({
el: '#app',
render(createElement) {
return createElement('h1', 'Hello World!');
}
});
Vue.component('component-name', {
/* Add component options here */
});
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id = "component_hello1">
<hellocomponent></hellocomponent>
</div>
<div id = "component_hello2">
<hellocomponent></hellocomponent>
</div>
</body>
</html>
Vue.component('hellocomponent',{
template : '<div><h1>Hello World!</h1></div>'
});
Vue는 다른 프레임워크에 비해 배우기가 매우 쉽습니다. 또한 매우 유연합니다. 인기가 높아지면서 Vue를 배우는 데 시간을 할애할 가치가 있습니다. Vue는 가까운 장래에 React와 Angular를 능가할 수 있습니다.
Reference
이 문제에 관하여(Vue에 대한 간략한 소개 . . .), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zeppa/a-brief-intro-to-vue-1c71텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
