Vue.js 의 구성 요소 와 템 플 릿 을 탐구 합 니 다.

7903 단어 Vue.js구성 요소템 플 릿
요약:
명령 은 Vue.js 의 중요 한 특성 으로 데이터 의 변 화 를 DOM 행위 로 표시 하 는 메커니즘 을 제공 합 니 다.데이터 의 변 화 는 DOM 행위 로 비 춰 집 니 다.Vue.js 는 데이터 로 작 동 되 기 때문에 우 리 는 DOM 구 조 를 직접 수정 하지 않 습 니 다.$(ul).append('li'one'/li')와 같은 조작 이 나타 나 지 않 습 니 다.데이터 가 변화 할 때 명령 은 한 마디 로 설 정 된 조작 으로 DOM 을 수정 합 니 다.그러면 데이터 의 변화 에 만 관심 을 가 질 수 있 습 니 다.DOM 의 변화 와 상 태 를 관리 하지 않 아 도 되 고,
Vue 의 내장 명령
1. v-bind
v-bind 는 DOM 요소 속성(attribute)을 연결 하 는 데 사 용 됩 니 다.
즉,요소 속성의 실제 값 은 vm 인 스 턴 스 의 data 속성 이 제공 합 니 다.
예 를 들 면:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue   </title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML   -->
<div id="demo">
  <span v-bind:cutomId="id">{{message}}</span>
</div>
<script>
  //  
  let obj ={
    message:"Hello World",
    id:'123'
  };
 //     
  var vm = new Vue({
    el:'#demo',
    data:obj  });
</script>
</body>
</html>
v-bind 는':'로 간략하게 쓸 수 있 습 니 다.
상술 한 예 는 간략하게 쓸 수 있다<span :cotomId="id">.
실현 효 과 는 다음 과 같다.
 
2. v-on
이벤트 감청 기 를 연결 합 니 다.@이 라 고 간략하게 쓰 십시오.
어제 도 우리 가 사용 한 적 이 있 으 니,우 리 는 간략하게 써 서 효 과 를 보 자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue   </title>
  <script src="../vue.js"></script>
</head>
<body>
  <!-- HTML   -->
  <div id="demo">
    <span @click="clickHandle">{{message}}</span>
  </div>
  <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,매개 변수 유형 은 string,
innerHTML 업데이트 역할,
받 아들 인 문자열 은 컴 파일 등 작업 을 하지 않 습 니 다.
일반 HTML 로 처리
코드 는 다음 과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue   </title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML   -->
<div id="demo" v-html="HTML"></div>
<script>
  //  
  let obj = {
    HTML:"<div>Hello World</div>"
  };
  var vm = new Vue({
    el:"#demo",
    data:obj  })
</script>
</body>
</html>
실현 효 과 는 다음 과 같다.

더 많은 내 장 된 명령 은 홈 페이지 를 조회 하 십시오:Vue.js 명령
템 플 릿
html 템 플 릿
        DOM 기반 템 플 릿,템 플 릿 은 모두 유효한 html 를 분석 할 수 있 습 니 다.
삽입 값
텍스트:"Mustache"문법(이중 괄호){{value}}사용 하기
    역할:인 스 턴 스 의 속성 값 을 교체 합 니 다.
    값 이 바 뀌 면 플러그 인 내용 이 자동 으로 업 데 이 트 됩 니 다.
원생 html:이중 괄호 로 출력 한 것 은 텍스트 입 니 다.html 를 해석 하지 않 습 니 다.
속성:v-bind 로 바 인 딩 하여 변화 에 응답 할 수 있 습 니 다.
JavaScript 표현 식 사용 하기:간단 한 표현 식 을 쓸 수 있 습 니 다.
문자열 템 플 릿
template 문자열
        template 옵션 대상 의 속성
        템 플 릿 은 요소 에 걸 려 있 는 것 을 바 꿀 것 입 니 다.요소 에 걸 려 있 는 내용 은 모두 무 시 됩 니 다.
코드 는 다음 과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template  </title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML  -->
  <div id="demo"></div>
  <script>
    //  
    let obj = {
      html:"<div>String</div>",
      abc:1
    };
    var str = "<div>Hello</div>";
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:str    })
  </script>
</body>
</html>
어떤 놀 라 운 변 화 를 발견 한 나무 가 있다.

        루트 노드 는 하나만 있 을 수 있 습 니 다.
        html 구 조 를 script 태그 에 쓰 고 type="X-template"를 설정 합 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template  </title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML  -->
  <div id="demo">
    <span>vue</span>
  </div>
  <script type="x-template" id="temp">
    <div>
      Hello,{{abc}},
      <span>sunday</span>
    </div>
  </script>
  <script>
    //  
    let obj = {
      html:"<div>String</div>",
      abc:1
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:"#temp"
    });
  </script>
</body>
</html>
실현 효 과 는 다음 과 같다.

script 태그 에 쓰 는 것 은 한계 가 있 습 니 다.
다른 파일 도 이 구조 일 때
이것 은 중복 사용 할 수 없다.
템 플 릿 렌 더 링 함수
render 함수
  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>
  <div id="demo"></div>
  <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 홈 페이지
총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue.js 의 구성 요소 와 템 플 릿 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
위 챗 애플 릿 이 프로필 사진 을 올 리 는 인 스 턴 스 상세 설명
360 힌트[고위 험]빈틈 이 있 는 JQuery 버 전의 해결 방법 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage