版权声明:啦啦啦 https://blog.csdn.net/qq_37199582/article/details/80352740

     Vue中使用组件使,自定义组件row不会添加进tbody中,是因为table中tbody里面只允许有tr,所以可以使用这种方法解决,使用is属性代替,保证符合H5页规则,同理,使用ul,select等标签时这样写等等


2.vue中只能在主组件中创建data对象,子组件中只能定义方法,这样可以使每个子组件的数据不互相影响。

这样写就会报错

这样写,他就是对的

Vue建议我们不要在代码中去操作dom,但是有些复杂的情况必须使用dom,vue种怎么操作dom?通过ref这种引用的方式来获取dom节点

vue中父组件通过属性的方式向子组件传值,子组件通过事件触发的方式向父组件传值,

但是父组件传递的值,子组件无法修改。

子组件绑定原生事件,使用native修饰符

Mixins的基本用法

varaddLog = {

            updated:function () {

                console.log("数据放生变化,变化成" + this.num + ".");

            }

        }

        varapp = newVue({

            el:'#app',

            data: {

                num:1

            },

            methods: {

                add:function () {

                    this.num++;

                }

            },

            mixins: [addLog] //混入

        })

mixins的调用顺序

从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,需要注意的是,这并不是方法的覆盖,而是被执行了两边

 

Vue.mixin({

                updated:function () {

                    console.log('我是全局被混入的');

                }

            })

PS:全局混入的执行顺序要前于混入和构造器里的方法。

 

Extends Option  扩展选项

varbbb = {

            created:function () {

                console.log("我是被扩展出来的");

            },

            methods: {

                add:function () {

                    console.log('我是被扩展出来的方法!');

                }

            }

        };

        varapp = newVue({

            el:'#app',

            data: {

                message:'hello Vue!'

            },

            methods: {

                add:function () {

                    console.log('我是原生方法');

                }

            },

            extends:bbb

        })

 

 

delimiters 选项

delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{}}。但有时我们会有需求更改这个插值的形式。

delimiters:['${','}']现在我们的插值形式就变成了${}

 

VueJquery.js一起使用

和以前的引入方法是一样的

<scriptsrc="../assets/js/vue.js"></script>

    <scripttype="text/javascript"src="../assets/js/jquery-3.1.1.min.js"></script>

但是操作要写在mounted

  mounted:function(){

                $('#app').html('jQuery!');

            }

 

实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。

 

$on  在构造器外部添加事件。

app.$on('reduce',function(){

    console.log('执行了reduce()');

    this.num--;

});

$on接收两个参数第一个参数是调用时的事件名称第二个参数是一个匿名方法

 

如果按钮在作用域外部,可以利用$emit来执行。

$emit触发自定义事件

//外部调用内部事件

functionreduce(){

    app.$emit('reduce');

}

$once执行一次的事件

app.$once('reduceOnce',function(){

    console.log('只执行一次的方法');

    this.num--;

 

});

 

$off关闭事件

//关闭事件

functionoff(){

   app.$off('reduce');

}

PS:当混入方法和构造器的方法重名时,混入的方法无法展现,也就是不起作用。

全局API混入方式


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页