Vue.js의 구성 요소 및 템플릿에 대한 토론-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Vue.js의 구성 요소 및 템플릿에 대한 토론

黄舟

Oct 28, 2017 am 09:29 AM

javascript vue.js 논의하다

추상:

지시문은 Vue.js의 중요한 기능으로 주로 데이터 변경 사항을 DOM 동작에 매핑하는 메커니즘을 제공합니다. 그러면 데이터의 변경 사항이 DOM 동작에 매핑됩니다. Vue.js는 데이터에 의해 구동되므로 DOM 구조를 직접 수정하지 않으며 $('ul').append('

one< ;/li>'), 데이터가 변경되면 명령어는 set 연산으로 DOM을 수정하므로 DOM의 변경 사항 및 상태를 관리할 필요 없이 데이터의 변경 사항에만 집중할 수 있습니다,

Vue에 내장된 명령어

1.v-bind

v-bind는 주로 DOM 요소 속성(속성)을 바인딩하는 데 사용되며,

즉, 요소 속성의 실제 값은 데이터 속성입니다. 제공된 vm 인스턴스에서.

예:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo">
  <span v-bind:cutomId="id">{{message}}</span>
</p>
<script>
  //数据
  let obj ={
    message:"Hello World",
    id:&#39;123&#39;
  };
 //声明式渲染
  var vm = new Vue({
    el:&#39;#demo&#39;,
    data:obj  });
</script>
</body>
</html>

로그인 후 복사

v-bind는 ":"으로 축약될 수 있습니다.

위의 예는

<span :cotomId="id">로 축약될 수 있습니다. 구현 효과는 다음과 같습니다.

Bind 이벤트 리스너, 약어로 @.

어제도 사용했는데, 약어로 효과를 살펴보겠습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!-- HTML模版 -->
  <p id="demo">
    <span @click="clickHandle">{{message}}</span>
  </p>
  <script>
    //数据
    let obj = {
      message:"hello Vue"
    };
    //声明式渲染
    var vm = new Vue({
      el:"#demo",
      data:obj,
      methods:{
        clickHandle(){
            alert("click")
            }
      }
    });
  </script>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다:

3.v-html

v-html, 매개변수 유형은 문자열,

은 innerHTML을 업데이트하는 데 사용됩니다.

에서 허용하는

문자열

은 컴파일되지 않으며 다른 작업도 수행되지 않습니다.

는 일반 HTML로 처리됩니다.

코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<p id="demo" v-html="HTML"></p>
<script>
  //数据
  let obj = {
    HTML:"<p>Hello World</p>"
  };
  var vm = new Vue({
    el:"#demo",
    data:obj  })
</script>
</body>
</html>

로그인 후 복사

구현 효과는 다음과 같습니다

더 많은 내장 지침을 보려면 공식 웹사이트를 확인하세요: Vue.js 지침

Template

html template

DOM 템플릿을 기반으로 템플릿은 구문 분석 가능하고 유효한 html

Interpolation

Text입니다. : "Mustache" 구문 사용(이중 중괄호) {{value}}

함수: 인스턴스의 속성 값을 대체합니다.

값이 변경되면 보간된 내용이 자동으로 업데이트됩니다.

Native html: 이중 중괄호 출력 텍스트이며 html을 구문 분석하지 않습니다

속성: 바인딩에 v-bind 사용, 변경 사항에 응답 가능

JavaScript 사용

Expression: 간단한 표현식을 작성할 수 있습니다 문자열 템플릿

템플릿 문자열

님 's's's

d-- 요소에 걸려 있는 콘텐츠는 무시됩니다.

코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <p id="demo"></p>
  <script>
    //数据
    let obj = {
      html:"<p>String</p>",
      abc:1
    };
    var str = "<p>Hello</p>";
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:str    })
  </script>
</body>
</html>

로그인 후 복사

놀라운 변화를 발견하셨나요? "

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <p id="demo">
    <span>vue</span>
  </p>
  <script type="x-template" id="temp">
    <p>
      Hello,{{abc}},
      <span>sunday</span>
    </p>
  </script>
  <script>
    //数据
    let obj = {
      html:"<p>String</p>",
      abc:1
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:"#temp"
    });
  </script>
</body>
</html>

로그인 후 복사

구현 효과는 다음과 같습니다.

스크립트 태그에 작성했지만 아직은 상대적으로 제한적입니다.

다른 파일에도 이 구조가 있으면

재사용할 수 없습니다.

템플릿 렌더링 함수

render 함수

렌더링 옵션 객체의 속성

createElement(태그 이름, {데이터 객체}, [하위 요소]);

하위 요소는 텍스트 또는 배열입니다

코드 조각 데모

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>render函数</title>
  <script src="../vue.js"></script>
  <style type="text/css">
    .bg{
      background: #ee0000;
    }
  </style>
</head>
<body>
  <p id="demo"></p>
  <script>
    //数据
    let obj = {
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      render(createElement){
        return createElement(
          //元素名
          "ul",
          //数据对象
          {
            class:{
              bg:true
            }
           },
          //子元素
          [
            createElement("li",1),
            createElement("li",2),
            createElement("li",3)
          ]
        );
      }
    })
  </script>
</body>
</html>

로그인 후 복사

구현 효과는 다음과 같습니다

요약

위 내용은 Vue.js의 구성 요소 및 템플릿에 대한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7560

Cakephp 튜토리얼

1384

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

심층 분석: Django 프레임워크란 무엇인가요? Jan 19, 2024 am 09:23 AM

Django 프레임워크는 웹 애플리케이션을 생성하는 간단하고 강력한 방법을 제공하는 웹 애플리케이션용 Python 프레임워크입니다. 실제로 Django는 가장 인기 있는 Python 웹 개발 프레임워크 중 하나가 되었으며 Instagram 및 Pinterest를 포함한 많은 회사에서 첫 번째 선택이 되었습니다. 이 기사에서는 기본 개념과 중요한 구성 요소는 물론 특정 코드 예제를 포함하여 Django 프레임워크가 무엇인지 자세히 살펴보겠습니다. Django 기본 개념Djan

JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법 Jan 05, 2024 pm 01:37 PM

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

Vue는 프론트 엔드 또는 백엔드에 사용됩니까? Apr 03, 2025 am 12:07 AM

vue.js는 주로 프론트 엔드 개발에 사용됩니다. 1) 사용자 인터페이스 및 단일 페이지 응용 프로그램 구축에 중점을 둔 가볍고 유연한 JavaScript 프레임 워크입니다. 2) vue.js의 핵심은 반응 형 데이터 시스템이며, 데이터가 변경되면 뷰가 자동으로 업데이트됩니다. 3) 구성 요소 개발을 지원하고 UI는 독립적이고 재사용 가능한 구성 요소로 분할 될 수 있습니다.

vue.js는 배우기가 어렵습니까? Apr 04, 2025 am 12:02 AM

vue.js는 특히 JavaScript Foundation을 가진 개발자에게는 배우기가 어렵지 않습니다. 1) 진보적 인 설계와 반응 형 시스템은 개발 프로세스를 단순화합니다. 2) 구성 요소 기반 개발은 코드 관리를보다 효율적으로 만듭니다. 3) 사용 예제는 기본 및 고급 사용을 보여줍니다. 4) vuedevtools를 통해 일반적인 오류를 디버깅 할 수 있습니다. 5) V-IF/V- 쇼 및 주요 속성 사용과 같은 성능 최적화 및 모범 사례는 애플리케이션 효율성을 향상시킬 수 있습니다.

vue.js vs. React : 프로젝트 별 고려 사항 Apr 09, 2025 am 12:01 AM

vue.js는 중소형 프로젝트 및 빠른 반복에 적합한 반면 React는 크고 복잡한 응용 프로그램에 적합합니다. 1) vue.js는 사용하기 쉽고 팀이 불충분하거나 프로젝트 규모가 작는 상황에 적합합니다. 2) React는 더 풍부한 생태계를 가지고 있으며 고성능 및 복잡한 기능적 요구가있는 프로젝트에 적합합니다.

WebSocket과 JavaScript를 사용하여 온라인 전자 서명 시스템을 구현하는 방법 Dec 18, 2023 pm 03:09 PM

WebSocket 및 JavaScript를 사용하여 온라인 전자 서명 시스템을 구현하는 방법 개요: 디지털 시대의 도래와 함께 전자 서명은 다양한 산업에서 기존 종이 서명을 대체하는 데 널리 사용됩니다. WebSocket은 전이중 통신 프로토콜로서 서버와 실시간 양방향 데이터 전송을 수행할 수 있으며 JavaScript와 결합되어 온라인 전자 서명 시스템을 구현할 수 있습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 간단한 온라인 개발을 수행하는 방법을 소개합니다.

심층 분석: Go 언어의 단일 스레드 기능 Mar 15, 2024 pm 02:09 PM

현대 프로그래밍 언어인 Go 언어는 단순성과 효율성으로 인해 최근 몇 년 동안 점점 더 많은 개발자들로부터 사랑과 선호를 받아왔습니다. 독특한 특징 중 하나는 단일 스레드 특성입니다. 전통적인 멀티스레드 프로그래밍 언어에서는 일반적으로 개발자가 스레드 간 동기화 및 상호 배제를 수동으로 관리해야 하지만 Go 언어에서는 고유한 코루틴(Goroutine)과 통신 메커니즘(채널)을 사용하여 동시 프로그래밍을 구현하는 것이 편리하고 효율적일 수 있습니다. 1. 고루틴과 단일 스레드: Go 언어

See all articles

Vue.js의 구성 요소 및 템플릿에 대한 토론

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제