首页 > 其他 > 详细

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

时间:2020-01-23 00:43:53      阅读:154      评论:0      收藏:0      [点我收藏+]

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>

    持续更新中.....

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!