通俗易懂--快速入门Vue--3

1.组件使用的细节点1

• is属性在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外面，这是不符合规范的。

• 那么如何解决这个问题，通过is属性，只需要在原来代码改一下：

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

  原有的html实例不变，这样就可以避免tr标签上升到tbody标签外头了。

• 同样像ul(li),select(option)

  <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

• data在子组件中，必须为一个函数，同时函数有返回数据。

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

3.在Vue中操作DOM

• 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
          }
      }
  });

5.组件参数校验与非props特性

• 首先需要了解的是什么是props特性

  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",
  });

• 非props特性

  父组件向子组件传递的是一个属性，子组件并没有声明该属性定义的内容。
  
  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")
          }
      }
  });

• 那么如何触发自定义事件？$emit

  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>

  持续更新中.....

原文：https://www.cnblogs.com/xujunkai/p/12229983.html