vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명
이번에는 vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명을 가져왔습니다. vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명에서 주의사항은 무엇인가요?
Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 최소 비용을 기본적으로 채택하고 점진적으로 채택 가능한 디자인을 채택합니다. 뷰 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합됩니다. 반면 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 Vue 또한 복잡한 단일 페이지 애플리케이션을 위한 강력한 드라이버를 완벽하게 제공할 수 있습니다.
Vue.js는 기능과 구문이 일부 업그레이드되고 수정되어 2.x로 업데이트되었습니다. 이 문서에서는 먼저 기본 내용을 소개합니다.
1, 초보자 가이드
vue의 사용은 매우 간단합니다. vue.js 또는 vue.min.js를 다운로드하여 직접 가져옵니다.
2. vue 시작하기
2.1 선언적 렌더링
Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 선언적으로 데이터를 DOM으로 렌더링할 수 있다는 것입니다.
<p id="app">
{{ message }}
</p>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})이렇게 입력됩니다: Hello Vue!
첫 번째 Vue 애플리케이션을 생성했습니다! 이는 문자열 템플릿을 렌더링하는 것과 매우 유사해 보이지만 Vue는 뒤에서 많은 작업을 수행합니다. 이제 데이터와 DOM 이미 서로 연결되어 있으므로 모든 데이터와 DOM은 반응적입니다. 이 모든 것을 어떻게 명확하게 이해할 수 있습니까? 브라우저에서 JavaScript를 켜기만 하면 됩니다. 콘솔(이제 현재 페이지에서 열림)을 열고 app.message 값을 설정하면 위 예제에서 렌더링된 DOM 요소가 그에 따라 업데이트되는 것을 볼 수 있습니다.
텍스트 보간 외에도 다음과 같은 방식으로 DOM 요소 속성을 바인딩할 수도 있습니다.
<p id="app-2">
<span v-bind:title="message">
鼠标悬停此处几秒，
可以看到此处动态绑定的 title！
</span>
</p>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString() }
})몇 초 동안 마우스를 움직이면 동적 프롬프트를 볼 수 있습니다.
여기서 우리는 새로운 것을 만난다. 표시되는 v-bind 속성을 지시어라고 합니다. 지시문에는 Vue에 의해 생성되었음을 나타내기 위해 v- 접두사가 붙습니다. 특별한 속성이 제공됩니다. 짐작할 수 있듯이 렌더링된 DOM에서 특수한 반응 동작을 생성합니다. 간단히 말해서, 이 지시문이 하는 일은 다음과 같습니다: "이 요소의 제목 속성을 다음과 일치시킵니다. Vue 인스턴스의 메시지 속성은 관련성을 유지하고 업데이트됩니다."
브라우저의 JavaScript 콘솔을 다시 열고 app2.message = 'Some new message'를 입력하면 제목 속성에 바인딩된 HTML이 업데이트된 것을 다시 볼 수 있습니다.
2.1 조건 및 루프
요소 표시를 제어하는 것도 매우 간단합니다.
<p id="app-3">
<p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})ˆ콘솔에 app3.seen = false를 계속 입력하면 범위가 사라지는 것을 볼 수 있습니다.
이 예에서는 data를 텍스트 및 속성뿐만 아니라 DOM 구조에도 바인딩할 수 있음을 보여줍니다. 또한 Vue는 Vue가 요소를 삽입/업데이트/삭제할 때 자동으로 전환 효과를 사용할 수 있는 강력한 전환 효과 시스템을 제공합니다.
각각 고유한 특수 기능을 가진 다른 명령이 있습니다. 예를 들어, v-for 지시문은 배열의 데이터를 사용하여 항목 목록을 표시할 수 있습니다:
<p id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</p>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '创建激动人心的代码' }
]
}
})3, vue 인스턴스
모든 Vue 애플리케이션은 Vue 함수를 통해 새로운 Vue 인스턴스를 생성하는 것으로 시작됩니다:
var vm = new Vue({
// 选项
})MVVM 패턴을 완전히 따르지는 않지만 Vue의 디자인은 여전히 MVVM 패턴에서 영감을 받았습니다. 관례적으로 Vue 인스턴스를 나타내기 위해 일반적으로 변수 vm(ViewModel의 약어)을 사용합니다.
3.1데이터 및 방법
Vue 인스턴스를 생성하면 데이터 객체에서 발견된 모든 속성이 Vue의 반응형 시스템에 추가됩니다. 이러한 속성의 값이 변경될 때마다 뷰는 "반응"하고 해당하는 새 값으로 업데이트됩니다.
rreee데이터 개체가 변경될 때마다 뷰가 다시 렌더링되도록 트리거됩니다. 인스턴스가 생성된 경우 데이터에 이미 존재하는 속성만 반응적이라는 점은 주목할 가치가 있습니다. 즉, 인스턴스가 생성된 후 새 속성을 추가하는 경우입니다. 예:
vm.b = 'hi'
然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 此回调函数将在 `vm.a` 改变后调用
})3.2vue实例的声明周期
vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。
看下这段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="container">我的声明周期，大家看吧！</p>
</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//以下代码时显示vm整个生命周期的流程
var vm = new Vue({
el: "#container",
data: {
test : 'hello world'
},
beforeCreate: function(){
console.log(this);
showData('创建vue实例前',this);
},
created: function(){
showData('创建vue实例后',this);
},
beforeMount:function(){
showData('挂载到dom前',this);
},
mounted: function(){
showData('挂载到dom后',this);
},
beforeUpdate:function(){
showData('数据变化更新前',this);
},
updated:function(){
showData('数据变化更新后',this);
},
beforeDestroy:function(){
vm.test ="3333";
showData('vue实例销毁前',this);
},
destroyed:function(){
showData('vue实例销毁后',this);
}
});
function realDom(){
console.log('真实dom结构：' + document.getElementById('container').innerHTML);
}
function showData(process,obj){
console.log(process);
console.log('data 数据：' + obj.test)
console.log('挂载的对象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
</script>
</html>通过控制台的打印效果可以看出来，实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 vue.js 프로그레시브 프레임워크 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7569
15
1386
52
87
11
61
19
28
107
Spring MVC의 주요 개념을 익히십시오: 이러한 중요한 기능을 이해하십시오
Dec 29, 2023 am 09:14 AM
SpringMVC의 주요 기능 이해: 이러한 중요한 개념을 익히려면 특정 코드 예제가 필요합니다. SpringMVC는 개발자가 MVC(Model-View-Controller) 아키텍처 패턴을 통해 유연하고 확장 가능한 구조를 구축하는 데 도움이 되는 Java 기반 웹 애플리케이션 개발 프레임워크입니다. 웹 애플리케이션. SpringMVC의 주요 기능을 이해하고 익히면 웹 애플리케이션을 보다 효율적으로 개발하고 관리할 수 있습니다. 이 기사에서는 SpringMVC의 몇 가지 중요한 개념을 소개합니다.
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
필요와 기능에 따라 해당 Go 버전을 선택하세요.
Jan 20, 2024 am 09:28 AM
인터넷의 급속한 발전으로 프로그래밍 언어는 끊임없이 진화하고 업데이트되고 있습니다. 그 중 오픈소스 프로그래밍 언어인 Go 언어는 최근 몇 년간 많은 주목을 받고 있습니다. Go 언어는 간단하고 효율적이며 안전하고 개발 및 배포가 용이하도록 설계되었습니다. 높은 동시성, 빠른 컴파일, 메모리 안전성 등의 특징을 갖고 있어 웹 개발, 클라우드 컴퓨팅, 빅데이터 등 분야에서 널리 사용됩니다. 그러나 현재 다양한 버전의 Go 언어를 사용할 수 있습니다. 적합한 Go 언어 버전을 선택할 때 요구 사항과 기능을 모두 고려해야 합니다. 머리
Golang에 클래스와 유사한 객체지향 기능이 있나요?
Mar 19, 2024 pm 02:51 PM
Golang(Go 언어)에는 전통적인 의미의 클래스 개념이 없지만, 클래스와 유사한 객체지향 기능을 구현할 수 있는 구조체라는 데이터 형식을 제공합니다. 이 기사에서는 구조를 사용하여 객체 지향 기능을 구현하는 방법을 설명하고 특정 코드 예제를 제공합니다. 구조의 정의와 사용법 먼저 구조의 정의와 사용법을 살펴보자. Golang에서는 type 키워드를 통해 구조를 정의한 다음 필요한 곳에 사용할 수 있습니다. 구조에는 속성이 포함될 수 있습니다.
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
C++ 함수 유형 및 특성
Apr 11, 2024 pm 03:30 PM
C++ 함수에는 단순 함수, const 함수, 정적 함수 및 가상 함수 유형이 있습니다. 기능에는 인라인 함수, 기본 매개변수, 참조 반환 및 오버로드된 함수가 포함됩니다. 예를 들어,calculateArea 함수는 π를 사용하여 주어진 반경의 원의 면적을 계산하고 이를 출력으로 반환합니다.
vue.js는 배우기가 어렵습니까?
Apr 04, 2025 am 12:02 AM
vue.js는 특히 JavaScript Foundation을 가진 개발자에게는 배우기가 어렵지 않습니다. 1) 진보적 인 설계와 반응 형 시스템은 개발 프로세스를 단순화합니다. 2) 구성 요소 기반 개발은 코드 관리를보다 효율적으로 만듭니다. 3) 사용 예제는 기본 및 고급 사용을 보여줍니다. 4) vuedevtools를 통해 일반적인 오류를 디버깅 할 수 있습니다. 5) V-IF/V- 쇼 및 주요 속성 사용과 같은 성능 최적화 및 모범 사례는 애플리케이션 효율성을 향상시킬 수 있습니다.
Vue는 프론트 엔드 또는 백엔드에 사용됩니까?
Apr 03, 2025 am 12:07 AM
vue.js는 주로 프론트 엔드 개발에 사용됩니다. 1) 사용자 인터페이스 및 단일 페이지 응용 프로그램 구축에 중점을 둔 가볍고 유연한 JavaScript 프레임 워크입니다. 2) vue.js의 핵심은 반응 형 데이터 시스템이며, 데이터가 변경되면 뷰가 자동으로 업데이트됩니다. 3) 구성 요소 개발을 지원하고 UI는 독립적이고 재사용 가능한 구성 요소로 분할 될 수 있습니다.
