vue.js入門(5)-最下位DOMの操作方法

前言:
実はフロントエンドフレームワークを学ぶ前にdom操作を使用するのは非常に一般的ですが、フロントエンドフレームワークの1つの利点はdomベースの操作を避けることであり、安全で効率的ですが、時には避けられないので、vueはdom操作にバックドアを残して、私たちができない状況でそれを使用して私たちの機能を完成させます!
内容:

      ，  ref=“  A”；
        this.$refs.  A:
  1.   ref     dom   ，          dom  
  2.   ref      ，         。

例:app.vue template:

<template>
   <div>
          
     <input type="text" name="" v-model="text">
       ：{{text | myFilter }}
      
     <hello-world ref="sub">hello-world>
     
     <div ref="myDiv">heiehidiv> 
   div>
template>

app.vue script:

<script>
import HelloWorld from './components/HelloWorld.vue'; //     helloworld
export default {
   components:{
       helloWorld:HelloWorld
   },
   //        ，         ，  dom    
   create(){
       console.log('created:', this.$refs.myDiv);
   },
   //      dom  ，        ，      dom ，dom  ：mounted    ：  ，         dom 
   mounted(){
      console.log('mounted:', this.$refs.myDiv); //       dom
      console.log(this.$refs.sub.$el);  //       dom
      this.$refs.myDiv.innerHTML="nihao"; //       dom   
      this.$refs.sub.$el.innerHTML="      "; //           div  ，       。
      this.$refs.sub.$el.children[0].innerHtml="      ";//     div  ，        ，           ref，                       ，    dom    。
   }
}
script>

まとめ:domを操作する観点からangularはrendererなどのオブジェクトをカプセル化して下位dom要素の操作を実現し、vueはこのthis.$refs.の名前の方式を通じて、より簡単で学びやすい.angular 4がdomをどのように操作するかを見たい場合は、次のブログを参照してください:Angular 2の昇格(一)--Domの誤区を避ける方法