Vue의 템플릿 구문을 알아보고 컨테이너와 인스턴스 간의 관계에 대해 이야기해 보세요.

이 글은 vue의 템플릿 구문을 안내하고, 보간 구문과 명령어 구문을 소개하고, 컨테이너와 인스턴스 간의 관계에 대해 이야기하는 것이 모든 사람에게 도움이 되기를 바랍니다.

한걸음씩 올라가고 싶어요~ 안녕하세요 여러분 오늘은 템플릿 구문의 개념에 대해 알아보겠습니다!

1. 템플릿 구문

템플릿 구문은 보간 구문과 명령어 구문으로 구분됩니다.

1. 보간 구문

보간 구문은 두 개의 중괄호로 표시되며 태그 본문의 내용을 설명하는 데 사용됩니다. {{xxx}}里面的xxx반드시 js 표현식이어야 하며 xxx는 자동으로 읽혀질 수 있습니다. 구문 분석됨 인스턴스에 정의된 속성을 가져옵니다. (동영상 공유 학습: vuejs 튜토리얼)

· 태그 본문: 이 위치는 태그 본문입니다 예를 들어

<h3>插值语法</h3> [插值语法就是标签体]
<h1>Hello,{{name}}</h1> [Hello,{{name}}就是标签体 ]

· js 표현식: 값을 생성할 수 있습니다. 몇 가지 예를 들어 이해해 보세요.

• name
• 1+1
• ok ? 'YES' : 'NO'

· js 코드(문) 는 값을 생성하는 특별한 종류의 js 코드입니다. Node.js 코드(문): 몇 가지 일반적인 예를 들어보세요

• if(){}
• for(){}

2. 명령어 구문

명령어 구문은 v-</code >At입니다. 처음에는 v-for, v-on, v-bind...를 포함하여 익숙해져야 합니다.<code>v-开头，你应该不会陌生，包括v-for、v-on、v-bind......

它的作用是解析标签（包括标签属性，标签体内容，绑定事件），功能就非常强大了，我们这里举个v-bind的使用案例，它是用来绑定属性的，v-on则是用于绑定事件：

<div id="app">
            <h3>插值语法</h3>
            <h1>Hello,{{name}}</h1>
            <h3>指令语法</h3>
            <a v-bind:href="url">点我点我！</a>
            <li v-for="(item,index) in student.name">
                <label>{{index+1}}. {{item.toUpperCase() }}</label>
            </li>
        </div>

        <script >
            new Vue({
                el:&#39;#app&#39; ,
                data:{
                    name:&#39;三年二班&#39;,
                    url:"https://www.baidu.com",
                    student:{
                        name:["Sam","Bob","Alice"]
                    }
                }
            })

结果如下图所示：

这里的v-bind:href="url"，双引号的内容也要写成js表达式，v-bind将href属性和url进行了绑定，这样就可以正确的读取data中url属性https://www.baidu.com。

注意：如果不加v-bind，写成href="url"，那此时双引号里的内容就编程了字符串，给href

이 기능은 태그(태그 속성, 태그 본문 내용, 바인딩 이벤트 포함) 및 함수를 구문 분석하는 것입니다. 매우 강력합니다. 여기서는 속성을 바인딩하는 데 사용되는 v-bind의 사용 사례를 제공하고 이벤트를 바인딩하는 데 사용되는 v-on:

rrreee결과

여기 v-bind:href="url"에서 큰따옴표 안의 내용은 js 표현식으로도 작성되어야 하며, v-bind는 href 속성은 url에 바인딩되므로 데이터의 url 속성 https://www.baidu.com을 올바르게 읽을 수 있습니다.

참고: v-bind를 추가하지 않고 href="url"로 작성하면 큰따옴표 안의 내용이 문자열로 프로그래밍됩니다. href과제를 제공합니다.

2. 컨테이너와 인스턴스의 관계

• 컨테이너와 인스턴스의 관계는 1:1입니다. 즉, 하나의 인스턴스가 하나의 컨테이너에만 바인딩될 수 있습니다. 다음 두 가지 상황은 허용되지 않습니다. :

앱 ID가 포함된 컨테이너 1개, 앱 el이 포함된 인스턴스 2개: 이런 방식으로 컨테이너의 이름이 구문 분석된 후 첫 번째 인스턴스에서 데이터 속성만 읽혀집니다.

2 앱 컨테이너의 ID, el이 앱인 1개 인스턴스: 코드 세그먼트 뒤에 있는 컨테이너는 구문 분석되지 않습니다. 실제 개발 시나리오에서는 코드가 구성 요소와 함께 빌드되므로 Vue 인스턴스가 하나만 있습니다. . 이므로 인스턴스의 코드는 특별히 복잡하지 않습니다. 🎜🎜 (학습 영상 공유: 🎜웹 프론트엔드🎜)🎜

위 내용은 Vue의 템플릿 구문을 알아보고 컨테이너와 인스턴스 간의 관계에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!