簡単に理解するために - クイックスタートヴュー - 3

点1を使用した成分の1詳細

• これは、TBODYにおけるアプリケーションのプロパティです

<div id="root">
    <table>
        <tbody>
            <row></row>
            <row></row>
            <row></row>
        </tbody>
    </table>
</div>
<script>
    Vue.component('row',{
        template:`<tr><td>this is a row</td></tr>`
    });


    var vm = new Vue({
        // el限制一个vue实例的管理范围。
        el:"#root",
    });

</script>

• 一見何の問題もなく、上記のコードを書いていますが、以下の画像を参照するページを開きます。

  

  すべてのtrタグには非対応である外TBODYを、行ってきました。

• プロパティを使用しているどのようにこの問題を解決すべく、単に元のコードでそれを変更します。

  <div id="root">
      <table>
          <tbody>
              <tr is="row"></tr>
              <tr is="row"></tr>
              <tr is="row"></tr>
          </tbody>
      </table>
  </div>

  それはタグが外に上昇TRタグTBODYを避けることができますので、そのまま元のHTMLインスタンス。

• また、UL（LI）、選択します（オプション）などの

  <ul>
    <li is="row"></li>
    <li is="row"></li>
    <li is="row"></li>
  </ul>
  
  <select>
      <option is="row"></option>
      <option is="row"></option>
      <option is="row"></option>
  </select>

点2を使用した成分の詳細2.

• サブアセンブリ内のデータ、関数は、データを返す機能しなければならないと。

  Vue.component('row',{
          data:function(){
              return {
                  content:"this is content"
              }
          },
          template:`<tr><td>{{content}}</td></tr>`
      });

DOMのVueの3.操作

• Vueのは、それが達成できない、コードでDOMを操作することは推奨されませんが、複雑なアニメーション効果では、単独のデータを結合、DOMを操作しないでください。

  <div id="app">
      <div ref="hw" @click="handleClick">hello world</div>
  </div>
  var app = new Vue({
          el:"#app",
          methods:{
              handleClick:function () {
                  //指的是ref="hw"的DOM
                  divDom = this.$refs.hw;
                  console.log(divDom.innerHTML)
              }
          }
      })

• その後、アセンブリは、REFを適用する方法で、我々はカウント機能を定義します。

  <div id="root">
      <!-- 父组件监听change变化并交给 handleChange处理-->
      <counter @change="handleChange" ref="one"></counter>
      <counter @change="handleChange" ref="two"></counter>
      <div>{{total}}</div>
  </div>

  Vue.component("counter",{
      template:`<div @click="handleClick">{{number}}</div>`,
      data:function () {
          return {
              number:0
          }
      },
      methods:{
          handleClick:function () {
              this.number ++;
              //子组件需要向父组件传递事件，当当前组件数据发生变化时。
              this.$emit('change')
          }
      }
  });
  
  var vm = new Vue({
      // el限制一个vue实例的管理范围。
      el:"#root",
      //total用来计算两个counter组件内数据的和
      data:{
          total:0
      },
      methods:{
          handleChange:function () {
              //total求和
              this.total = this.$refs.one.number + this.$refs.two.number
          }
      }
  });

4.データ転送アセンブリサンズ

• アセンブリは、親サブコンポーネントのパラメータが、一方向のデータフローであるサブアセンブリ、サブアセンブリのパラメータではない変更に送信することができます。

  • モード1：コピーしたパラメータを変更するためのパラメータをコピーしてサブコンポーネント

  <div id="root">
      <!--1.父组件向子组件传递名字为count的值-->
      <counter :count="0"></counter>
      <counter :count="5"></counter>
  </div>
  
  
  var counter = {
      // 2.子组件定义props接收count
      data:function(){
          return {
              // 3.既然子组件无法修改父组件传来的参数
              // 那么number为复制传过来的参数，咱们使用number
              number:this.count
          }
      },
  
      props:['count'],
      // 4.子组件使用复制过来的number，
      template:`<div @click="handleClick">{{number}}</div>`,
      methods:{
          handleClick:function () {
              // 并且还可以更改复制的number
              this.number ++
          }
      }
  };
  
  var vm = new Vue({
      // el限制一个vue实例的管理范围。
      el:"#root",
      components:{
          counter:counter
      }
  });
  

  • オプション2：サブアセンブリ親コンポーネントにイベントを渡します

  <div id="root">
      <!--1.父组件向子组件传递名字为count的值-->
      <!--监听inc事件，一旦触发执行父组件handleIncrease函数-->
      <counter :count="0" @inc="handleIncrease"></counter>
      <counter :count="5" @inc="handleIncrease"></counter>
      <div>{{total}}</div>
  </div>
  
  var counter = {
      // 2.子组件定义props接收count
      data:function(){
          return {
              // 3.既然子组件无法修改父组件传来的参数
              // 那么number为复制传过来的参数，咱们使用number
              number:this.count
          }
      },
      props:['count'],
      // 4.子组件使用复制过来的number，
      template:`<div @click="handleClick">{{number}}</div>`,
      methods:{
          handleClick:function () {
              // 并且还可以更改复制的number
              this.number ++;
              // 5.子组件通过触发事件，将触发的inc事件传递给父组件
              this.$emit('inc',1)
          }
      }
  };
  
  var vm = new Vue({
      // el限制一个vue实例的管理范围。
      el:"#root",
      data:{
        total:5,
      },
      components:{
          counter:counter
      },
      methods:{
          // 父组件定义函数
          handleIncrease:function (step) {
              // step 为子组件 $emit的第二个参数。
              this.total += step
          }
      }
  });

チェックパラメータ成分特性および非小道具

• あなたが知る必要があるすべての最初には、特徴的な小道具は何かということです

  props特性其实就是，在父组件中传入了参数，恰巧子组件在props也定义了该参数的校验规则。并且子组件能使用该参数在template进行渲染

  <child content="hell world"></child>
  
  Vue.component('child',{
      // 子组件接收props
      props:{
          // 传入content的类型
          // 方式1：content:[String,Number]
          // 方式2：
          content:{
              type:String,//要求传入值类型
              required:false,//是否必填
              defaule:"default value",//默认值
              validator:function (value) {
                  // 传入数据长度大于5
                  return (value.length > 5)
              }
          }
      },
     template:`<div>Child</div>`
  });
  var vm = new Vue({
      el:"#root",
  });

• 非小道具のプロパティ

  父组件向子组件传递的是一个属性，子组件并没有声明该属性定义的内容。
  
  1.这样子组件就不能使用该属性在子组件template渲染。
  2.那么该属性会在template定义的最外层标签的标签里，显示.e.g.: <div content="hello">hello</div>

ネイティブコンポーネントにイベントをバインドする方法6

• コンポーネントイベントに結合するラベルは、実際にカスタムイベントである場合には、ネイティブのイベントをトリガしません。

  <div id="root">
      <!--当给一个组件标签绑定一个事件其实是自定义事件，不会触发原生事件-->
      <child @click="handleClick"></child>
  </div>
  
  
  
  Vue.component("child",{
      // 在标签绑定事件时原生的事件
      template:"<div @click='handleClick'>Child</div>",
      methods:{
          //会触发
          handleClick:function () {
              alert("click click")
          }
      }
  });
  var vm = new Vue({
      el:"#root",
      methods:{
          // 不会触发
          handleClick:function () {
              alert("click")
          }
      }
  });

• それでは、どのようにカスタムイベントを発生させるのですか？$エミット

  Vue.component("child",{
      // 在标签绑定事件时原生的事件
      template:"<div @click='handleClick'>Child</div>",
      methods:{
          //会触发
          handleClick:function () {
              //通过$emit触发自定义事件
              this.$emit("click")
          }
      }
  });

• しかし、ライトコードの冗長性、煩雑すぎますか？修飾子.nativeイベントを追加することにより、

  <div id="root">
      <!--当给一个组件标签绑定一个事件其实是自定义事件，不会触发原生事件-->
      <!--通过添加.native将该事件转为原生click事件-->
      <child @click.native="handleClick"></child>
  </div>
  </body>
  <script>
      Vue.component("child",{
          // 在标签绑定事件时原生的事件
          template:"<div>Child</div>",
      });
      var vm = new Vue({
          el:"#root",
          methods:{
              // 不会触发
              handleClick:function () {
                  alert("click")
              }
          }
      });
  </script>

  継続的に更新さ.....