Vue 렌더링 방법은 무엇입니까?
- WBOY원래의
- 2022-03-18 16:44:345207검색
방법은 다음과 같습니다. 1. 원래 템플릿 구문을 사용하여 렌더링을 마운트합니다. 2. render 속성과 createElement 함수를 사용하여 직접 렌더링합니다. 3. render 속성을 사용하여 구성 요소의 템플릿 속성과 createElement 함수를 사용합니다. 렌더링 속성, 단일 파일 구성 요소를 사용한 렌더링.
이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.
Vue 렌더링 방법은 무엇인가요?
Vue의 렌더링 방법에 대한 개인적인 요약은 4가지 유형으로 나눌 수 있습니다.
원본 템플릿 구문, 마운트된 렌더링
-
렌더 속성, createElement 함수를 사용하여 직접 렌더링
render 속성을 사용하고, 컴포넌트의 template 속성과 협력하고, createElement 함수 렌더링
render 속성을 사용하고, 단일 파일 컴포넌트와 협력하고, createElement 함수 render
방법 1:
원본 템플릿 구문, 마운트 렌더링, 즉 html로 렌더링합니다. 페이지가 반환되면 HTML의 v-model 및 기타 속성은 렌더링되지 않고 변경되지 않은 상태로 클라이언트에 전송됩니다. 클라이언트는 Vue가 로드되고 인스턴스가 생성될 때까지 이러한 식별자를 렌더링하지 않습니다.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TestVue</title>
6 </head>
7 <body>
8 <div id="app">
9 <input v-model="message">
10 <p>Message is: {{ message }}</p>
11 </div>
12 </body>
13 <script src="js/vue.js"></script>
14 <script type="text/javascript">
15 var v = new Vue({
16 el: '#app',
17 data: {
18 message: '这是内容'
19 }
20 });
21 </script>
22 </html>방법 2:
render 속성과 createElement 함수를 사용하여 직접 렌더링합니다. 원래 HTML이 없으며 JavaScript의 완전한 프로그래밍 기능을 통해 페이지가 생성됩니다. 출력이 완전히 제어되지만, 충분히 직관적이지 않고 구현이 복잡하다는 것이 특징입니다.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TestVue</title>
6 </head>
7 <body>
8 <div id="app">
9 </div>
10 </body>
11 <script src="js/vue.js"></script>
12 <script type="text/javascript">
13 var v = new Vue({
14 el: '#app',
15 data: {
16 message: '这是内容'
17 },
18 render: function (createElement) {
19 return createElement('p', 'Message is:' + this.message)
20 }
21 });
22 </script>
23 </html>방법 3:
render 속성을 사용하고, 구성 요소의 템플릿 속성을 일치시키고, createElement 함수를 사용하여 렌더링합니다.
이전 방법에 비해 구성 요소 추가 및 템플릿 속성을 사용하는 것이 더 직관적입니다. 또한 HTML이 없으며 렌더링 기능을 통해 렌더링됩니다.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>TestVue</title>
6 </head>
7 <body>
8 <div id="app">
9 </div>
10 </body>
11 <script src="js/vue.js"></script>
12 <script type="text/javascript">
13 var MyComponent = {
14 data () {
15 return {
16 message: '这是内容'
17 }
18 },
19 template: `
20 <div id="app">
21 <input v-model="message">
22 <p>Message is: {{ message }}</p>
23 </div>
24 `
25 };
26
27 var v = new Vue({
28 el: '#app',
29 components: {
30 'my-component': MyComponent
31 },
32 render: function (createElement) {
33 return createElement('my-component')
34 }
35 //ECMAScript6: render: h => h('my-component')
36 });
37 </script>
38 </html>는 컴포넌트를 통한 동적 렌더링과 모듈 분리가 특징입니다. 하지만 html 템플릿이 ````로 둘러싸여 있어 사용하기 불편하고, 대규모 프로젝트에는 적합하지 않습니다.
방법 4:
렌더링 속성, 단일 파일 구성 요소 및 createElement 함수를 사용하여 렌더링합니다. 이 방법은 대부분의 Vue 프로젝트의 렌더링 방법입니다(공식 스캐폴딩에서는 이 렌더링 방법을 사용합니다). vue CLI를 사용해보신 분이라면 익숙하실 겁니다. 특징은 단일 파일 구성 요소, 모듈성, 동적 렌더링 및 일반적인 단일 페이지 응용 프로그램입니다.
【관련 추천: "vue.js tutorial"】
위 내용은 Vue 렌더링 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!