30분 안에 Vue 시작하기
머리말(!important)
vue를 시작하고 싶다면 이 블로그가 매우 적합합니다. 루키 튜토리얼 에 갈 수 있지만 MDN 공식 웹사이트 에 갈 수 있고 w3cschool 에 가서 vue에 대한 지식을 찾을 수 있습니다. 그러나 공식 설명을 잘 이해하지 못하는 경우 이 블로그로 돌아가는 것이 매우 친절할 수 있습니다.
30분이면 vue를 시작할 수 있지만 이 블로그를 작성하는 데 많은 시간이 걸렸습니다.
블로거는 중국 전통 문화, 특히 한의학을 좋아하는 사람입니다. 의학 현자 Zhang Zhongjing이 쓴 "열병에 대한 논문"을 읽었습니다. . 미래 세대가 이 처방의 의미를 이해하지 못할까 두렵고, 이 약의 기능이 명확하게 설명되지 않은 것이 두렵습니다.
이 블로그를 쓸 때도 같은 느낌을 받는 것 같습니다. .
Vue 기반의 프로그래머라면 이 블로그에서 관련 기본 지식을 확인할 수 있습니다.
당신이 vue를 처음 접하는 프로그래머라면, 나는 당신에게 말하고 싶습니다: 그것은 단지 작은 vue가 아닙니까? 해! ! !
특정 언어 구성과 요약 능력이 있는 한 인터뷰 중에 공식 언어를 말할 수 있습니다. 그러나 무언가를 배울 때 공식적으로 무엇을 하고 있습니까? 오는 방법을 이해하기 쉽습니다.
인터넷의 많은 블로거들이 이 분야에 대한 소개 튜토리얼을 작성했으며 그러한 교육 비디오도 있습니다. 그러나 나는 당신에게 좀 더 현실적인 vue를 더 투명하게 전달하고 싶습니다. 그래서 이해력이 약간 떨어지고 새로운 것을 받아들이는 능력이 떨어지기 때문에 vue를 스스로 배울 수 있습니다. 초보자가 헷갈려 하시는 분들은 여기에서 자신에게 맞는 방법을 찾으시면 됩니다.
알겠습니다. 텍스트 시작
vue 학습을 위한 전제 조건
프론트엔드 검객 3인방(HTML, CSS, JavaScript)을 공부했다면 JQuery 도 배운 것이 가장 좋습니다 .vue를 배우기 전에 특정 프론트엔드 기초가 있어야 합니다. vue는 프론트엔드 삼총사를 기반으로 하는 것이기 때문입니다.
이 기본 지식이 있다면 계속 읽으십시오!
이 기본 지식이 없다면 여전히 vue를 배우고 싶을 것입니다. 내 제안은 이 블로그를 세 번 연결한 다음 이 블로그를 종료하고 프런트 엔드 삼총사 학습을 완료하고 마스터한 후에 다시 돌아오는 것입니다. 시간을 낭비하지 않았으면 합니다. 달리고 싶다면 먼저 걷기를 마스터해야 합니다 .
뷰가 무엇인가요?
Vue는 웹 사용자 인터페이스를 구축하기 위한 프런트 엔드 JavaScript 프레임워크입니다. 프로그레시브 프레임워크입니다.
여기서 세 가지 개념을 명확히 할 필요가 있습니다.
1. 프레임이란?
액자는 사진을 담는 액자로 이해될 수도 있고, 국가로 이해될 수도 있다.
사진 프레임에 사진을 넣으려면 요구 사항이 있습니다. 예를 들어 이 사진 프레임에는 500px*400px의 사진 크기가 필요합니다. 그런 다음 사진 크기가 이 사진 프레임에 필요한 크기와 일치하지 않으면 맞지 않습니다.
나라는 그 나라의 영토를 가지고 있고, 당신이 이 나라에 있으면 이 나라의 권리를 누리게 될 것입니다. 물론 이 나라에는 자체 법과 규칙이 있으며, 이 나라의 법과 규칙을 지키지 못하면 이 나라에 머물 수 없습니다.
따라서 프레임워크는 일종의 사양입니다.프레임워크는 사용자에게 편의를 제공할 수 있지만 동시에 프레임워크에는 자체 규칙 집합과 해당 제한 제품이 있습니다.
2. 프로그레시브란?
프로그레시브는 배우기 쉽고, 사용하기 쉽고, 매우 유연하고 효율적이며 진보적인 방법으로 이해할 수 있습니다.
예를 들어 루빅스 큐브 마스터가 되려면 먼저 2차 루빅스 큐브를 마스터한 다음 점차적으로 3차 루빅스 큐브, 4차 루빅스 큐브, 그리고 상위 루빅스 큐브를 마스터해야 합니다. . 이것은 단계별로 수행됩니다. 프로그래밍에서 그것은 당신이 사용하고 싶은 것을 취하는 것을 의미합니다.
예를 들어 긴 코드가 있으면 두 줄의 코드만 쓰면 되고 그냥 쓰면 되는 것이 점진주의(gradualism) 개념입니다.
긴 코드 조각이 있고 두 줄의 코드를 사용하려는 경우 이 두 줄을 사용하려면 모든 코드를 가져와야 합니다. 예를 들어 플러그인의 경우 플러그인의 일부만 사용할 수 있지만 전체 플러그인을 다운로드하여 참조해야 합니다. 이것이 비프로그레시브 개념입니다.
따라서 점진적이라는 것은 너무 많은 규칙, 너무 많은 제약, 너무 많은 제한이 없다는 것을 의미합니다. 코드를 사용하려면 이 코드만 사용합니다.
3. 프로그레시브 프레임워크란 무엇입니까?
프로그레시브 프레임워크는 너무 많은 규칙 없이, 너무 많은 제약 없이, 너무 많은 제한 없이 사용자에게 편리함을 제공하는 제품입니다.
프로그레시브 프레임워크는 웹 컴포넌트, 서비스 작업자, 웹 앱 매니페스트 등과 같은 최신 웹 기술을 사용하여 더 빠른 로딩 속도, 오프라인 액세스 및 기본 앱과 같은 사용자 경험을 제공합니다. 또한 프로그레시브 프레임워크를 통해 개발자는 고급 기능을 점진적으로 추가하여 구형 브라우저 및 장치와의 호환성을 보장할 수 있습니다. 일반적인 진보적 프레임워크에는 Vue.js、React、Angular다음이 포함됩니다.
프로그레시브 프레임워크의 장점은 다음 사항에 반영됩니다.
유연성: 단계별 적용 기능으로 인해 개발자는 프레임워크의 다양한 기능과 모듈을 사용하거나 사용하지 않도록 자유롭게 선택할 수 있습니다.
재사용성: Progressive Framework의 구성 요소 및 모듈은 독립적이며 다른 프로젝트에서 사용하기 위해 쉽게 전송할 수 있습니다.
확장성: 개발자는 기존 코드를 수정하지 않고도 필요에 따라 새로운 기능과 모듈을 추가할 수 있습니다.
성능: 프로그레시브 프레임워크는 애플리케이션에 필요한 필수 코드만 포함하기 때문에 일반적으로 더 효율적으로 실행됩니다.
이 세 가지 기본 개념을 이해하고 나면 vue가 무엇인지 쉽게 이해할 수 있습니다.
Vue는 타사에서 개발한 프레임워크로, 이 프레임워크를 사용하여 웹 페이지를 빠르고 효율적으로 개발할 수 있습니다.
Vue는 jquery와 유사하며 다른 사람이 패키징한 것이므로 직접 사용할 수 있습니다. jQuery에서는 매우 간단한 방법으로 요소를 가져옵니다.
let but = document.querySelectorAll('#button');
//等价于
$('#button')
//这个$就是人家封装好的东西，直接拿来用
Vue에는 다른 사람이 패키징한 것도 있지만 사용 규칙이 다릅니다.
뷰를 가져오는 방법
일반적으로 사용되는 두 가지 가져오기 방법이 있습니다.
첫번째:
로컬 가져오기: vue 공식 웹사이트 에서 Vue.min.js 파일을 다운로드 하고
<script src=""></script>태그와 함께 가져옵니다.
주소: 클릭하여 다운로드
두 번째 유형:
온라인 소개:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
개체를 인스턴스화하고 개체를 만듭니다.
⭐ 인스턴스화는 단순히 생성으로 이해할 수 있지만 본질적으로 인스턴스화와 생성에는 차이가 있습니다.
개체를 인스턴스화하는 것과 개체를 만드는 것의 차이점은 무엇입니까?
- 개체를 생성한다는 것은 새 개체를 위한 메모리 공간을 할당하는 것을 의미합니다. JavaScript에서 객체는 객체 리터럴, 생성자 등을 사용하여 생성할 수 있습니다. 개체를 생성하면 메모리에 개체에 대한 공간만 할당되며 이 개체에 값을 초기화하거나 할당하지 않습니다.
- 인스턴스화된 객체는 생성된 객체를 변수에 할당하고 필요에 따라 객체를 초기화하거나 할당하는 것입니다. 개체를 인스턴스화하는 것은 메모리 공간을 차지하는 것이 아니라 개체를 사용할 수 있도록 하는 것입니다. JavaScript에서 new 연산자를 사용하여 개체를 인스턴스화합니다. 일반적으로 생성자를 사용하여 개체 인스턴스를 만듭니다.
vue 객체 인스턴스화
Vue.createApp()새로운 Vue 애플리케이션 인스턴스를 생성하는 데 사용되는 Vue.js 3.x의 전역 API입니다. 이 함수는 구성 요소 옵션이 포함된 개체를 매개 변수로 받고 렌더링 및 상호 작용을 위해 DOM 요소에 마운트하는 데 사용할 수 있는 응용 프로그램 인스턴스 개체를 반환합니다.
createApp()애플리케이션에서 자신만의 구성 요소, 지시문, 필터 등을 정의 할 수 있으며 상태 관리, 라우팅 제어 및 서버 상호 작용과 같은 작업을 쉽게 수행할 수 있습니다.
⭐ 다음은 직접 사용할 수 있는 템플릿입니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
// 写变量
}
},
methods:{
// 写函数，写方法
}
}).mount('#app')
</script>
</body>
</html>
⭐ 사용이 간편함:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<div v-show="flag"> {
{name}} </div>
<button @click="show">显示</button>
<button @click="clo">隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
name:'爱学习的akali king',
flag:true
}
},
methods:{
show(){
this.flag = true;
},
clo(){
this.flag = false;
}
}
}).mount('#app')
</script>
</body>
</html>
⭐Effect:
vue로 구현한 전환 효과입니다. 다음으로 vue의 구문을 살펴보고 그것이 무엇인지 자세히 살펴보겠습니다.
템플릿 구문
공식 웹 사이트의 정의는 매우 명확하고 이해하기 어렵지 않습니다.
⭐주로 vue의 템플릿 구문을 살펴보세요.
1. 보간식
문법 형식: {
{데이터의 값}}
⭐⭐⭐핵심 사항:
위 그림에서 div에 있는{
{name}}보간 표현식이라고 합니다. 보간된 값은 값이며, 그 값은 무엇입니까? 이름값!
여기서 이름을 이해하는 방법?
return{
name：‘爱学习的akali king’
}
여기서 이 문장은 변수 선언 방식을 var name = ‘爱学习的akali king’
생략 name여전히 변수입니다. 그래서 보간식은 name변수인데 보간식의 값이 바뀌면 페이지에 보간식에 표시되는 것들도 바뀌게 됩니다 return{}.name
또한 ~으로 알려진. return{}의 모든 것은 변수이며 배열, 객체 등을 작성할 수 있습니다.
다음과 같이 작성할 수 있습니다.
return {
name:'爱学习的akali king',
flag:true,
arr:[
{
msg:'你'},
{
msg:'好'},
{
msg:'帅'},
{
msg:'啊'},
],
price:10,
str:''
}
이 변수를 다시 느껴 봅시다.
2. v-text 및 v-html 지시문
⭐이 두 가지 지침은 이해하기 쉽고 직관적입니다.다음 코드를 예로 들어 보겠습니다.
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<div v-text="example1"></div>
<div v-html="example1"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
example1:"<h1>v-text显示效果</h1>",
example2:"<h1>v-html显示效果</h1>"
}
},
methods:{
}
}).mount('#app')
</script>
</body>
</html>
⭐Effect:
⭐위의 코드와 효과에 따라 우리는 v-text와 v-htmldo
v-textnot parse tags의 차이점을 발견했습니다. 이는 네이티브 js의 구문 분석 가능한 태그와 동일하며 innerText
v-html네이티브 js와 동일합니다.innerHTML
3. v-바인드 명령
v-bind지침은 동적 바인딩 속성을 나타내며 약어는 (:)입니다.
<div v-bind:title="111">绑定属性</div>
위 표기법은 다음과 같습니다.
<div :title="111">绑定属性</div>
4. v-on 명령어
v-on지침은 다음과 같이 축약할 수 있는 이벤트 바인딩을 나타냅니다.@事件名称=‘函数名称’
<button v-on:click="fun">新增</button>
위 표기법은 다음과 같습니다.
<button @click="fun">新增</button>
매개변수를 전달해야 하는 경우 다음과 같이 작성할 수 있습니다.
<button @click="fun(参数1，参数2)">新增</button>
⭐이벤트 바인딩 후 이벤트에 해당하는 함수를 작성해야 합니다. Vue 객체에서 메서드 속성을 추가하고 메서드는 키-값 쌍을 하나씩 포함하는 JSON 객체이며 값은 함수입니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="fun">新增</button>
<button @click="fun2">新增2</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
}
},
methods:{
fun(){
console.log(1);
},
fun2(){
console.log(2);
}
}
}).mount('#app')
</script>
</body>
</html>
⭐효과:
5. v-모델 명령
v-model양방향 바인딩을 구현하는 데 주로 사용되는 Vue에서 일반적으로 사용되는 명령어 중 하나입니다. 양식 요소(예: 입력, 텍스트 영역 등)와 Vue 인스턴스의 데이터를 양방향으로 바인딩할 수 있습니다. 즉, 양식 요소의 값이 변경되면 Vue 인스턴스의 해당 데이터가 동기식으로 업데이트됩니다. 발생하면 양식 요소의 값이 그에 따라 업데이트됩니다.
⭐ v-model지시문의 사용법은 매우 간단합니다. 양식 요소에서 사용 v-model하고 해당 값을 Vue 인스턴스의 데이터 속성에 지정하기만 하면 됩니다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<input v-model="message" type="text">
<p>你好: {
{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
message: '小朋友'
}
},
methods:{
}
}).mount('#app')
</script>
</body>
</html>
⭐효과:
위의 예에서는 입력 요소에 v-model="message"바인딩한 다음 메시지 속성 값을 페이지에 표시했습니다. 사용자가 입력란에 내용을 입력하면 메시지 속성 값이 동시에 업데이트되며, 반대로 Vue 인스턴스에서 메시지 속성 값을 수정하면 입력란의 내용도 그에 따라 변경됩니다. .
v-model양식 요소와 해당 구성 요소에서만 사용할 수 있으며 양식 요소에서만 유효하다는 점에 유의해야 합니다 . 형식이 아닌 요소에는 영향을 v-model미치지 않습니다 .
6. v-if 및 v-show 명령어
v-ifv-showVue.js에서 요소의 표시/숨기기를 제어하는 데 사용되는 지침입니다 .
⭐브이쇼：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<button v-show="flag">苹果</button>
<br>
<br>
<button @click="show">显示</button>
<button @click="clo">隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
flag:true
}
},
methods:{
show(){
this.flag=true;
},
clo(){
this.flag=false;
}
}
}).mount('#app')
</script>
</body>
</html>
⭐효과:
⭐v-if
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<div id="app">
<button v-if="flag">苹果</button>
<br>
<br>
<button @click="show">显示</button>
<button @click="clo">隐藏</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
flag:true
}
},
methods:{
show(){
this.flag=true;
},
clo(){
this.flag=false;
}
}
}).mount('#app')
</script>
</body>
</html>
⭐효과:
⭐위의 이해에서 다음과 같은 차이점이 있음을 v-if알 수 있습니다 .v-show
v-if표현식의 참값과 거짓값에 따라 요소를 동적으로 추가하거나 제거하는 것으로, 표현식 false이 참일 요소는 DOM에 렌더링되지 않고 true, 표현식이 참일 때 요소가 렌더링됩니다. DOM.
v-show요소에 display 속성을 설정하여 요소의 표시/숨기기를 제어합니다. 표현식 false이 요소가 숨겨지지만 여전히 DOM에 존재하고 표현식 true이 이면 요소가 표시됩니다.
따라서 요소의 표시/숨김 상태를 자주 전환해야 하는 경우 사용하면 v-show성능이 향상될 수 있으며, 요소의 표시/숨김 상태가 거의 변경되지 않고 요소가 더 복잡한 경우 사용하면 v-if불필요한 DOM 작업을 줄일 수 있습니다.
7. v-명령을 위해
v-for목록 데이터를 렌더링하기 위한 Vue.js의 명령입니다. 배열 또는 객체를 반복하고 각 요소를 해당 HTML 요소로 렌더링할 수 있습니다.
v-for의 주요 용도는 Vue.js 애플리케이션에서 목록 데이터를 동적으로 생성하는 것입니다. 일반적으로 지시문은 데이터 컬렉션을 기반으로 일부 보기를 표시해야 할 때 사용됩니다 v-for.
v-for지시문은 다음과 같이 Vue.js 템플릿에서 사용할 수 있습니다.
<div v-for="(item, index) in items" :key="id">
{
{ item }}
</div>
그 중 items배열은 위의 예에서 v-for배열의 각 요소에 대해 요소가 생성되고 현재 요소는 변수( 배열의 경우 배열의 각 항목<div> ) 에 저장되고 요소는 인덱스는 변수에 저장됩니다. 속성은 Vue.js가 각 요소의 상태를 올바르게 추적할 수 있도록 렌더링 성능( ID, ID 번호 등과 같은 고유하게 식별된 값 바인딩 )을 개선하는 데 사용됩니다.itemitemindex:key：key
v-for 지시문은 객체의 속성을 반복하는 데 사용할 수도 있습니다.
<div v-for="(value, key) in object" :key="key">
{
{ key }}: {
{ value }}
</div>
v-for객체의 각 속성에 대해 요소가 생성되어 <div>속성 값을 value변수에 저장하고 속성 이름을 key변수에 저장합니다.
이것이 vue의 시작입니다 일단 시작하면 vue2의 작성법과 기본 개념을 마스터한 다음 배우기 쉬운 vue3를 배우게 됩니다.