VUE.js快速入门(vue本地应用④)

Posted 蔡老板

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE.js快速入门(vue本地应用④)相关的知识,希望对你有一定的参考价值。

组件:

组件系统是将大型界面切分成一个个小可控单元

组件容易维护可以复用

组件有较强封装性

组件之间可以交互

语法:Vue.component(\'自定义标签\', {prop:...,data:...等})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button-count title="button1:" v-on:count="clicked"></button-count>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component(
            \'button-count\',{
                props:[\'title\'],
                data:function(){
                    return {
                        count:0
                    }
                },
                template:\'<button v-on:click="countAdd">{{title}}clicked {{count}} times</button> \',
                methods:{
                    countAdd:function(){
                        this.count++;
                        this.$emit(\'count\',this.count);
                    }
                }
            }
        );
        var vm=new Vue({
            el:"#app",
            methods:{
                clicked:function(e){
                    console.log(e);
                }
            }
        })
    </script>
</body>
</html>

 这里使用了组件component,首先自定义一个标签‘button-count’之后设定里面count的初始值,

data里函数的的声明是为了每次进来生成独立的返回值,以为组件的特点是复用,所以不能相同。

在写template的模板

模板的实现方式

1.在末尾添加\\

2.在使用`代替"

3.<template>

模板里写的是自定义标签内容,最后写methods方法里面有count加法

这里需要注意的是template里面的事件名称和组件内部保持一致

而且如果多个标签,需要一个父容器包裹下

之后使用的emit方法能将组件内的参数传递出去

this.$emit(\'count\',this.count);

count是传递的方法名称,也就是自定义方法名称,后面是传递参数,使用时:

v-on:count="clicked"
在组件外部可以写clicked
props自定义属性,这个可以向组件内部传递参数

 这里写的都是全局组件,也可以在new Vue创建局部组件。

vue组件其实就是一个扩展的vue实例,也就相当于它的子类。

组件注意事项:

1.正确嵌套方式,is属性能将嵌套错误的标签嵌套进去,但是尽量正确嵌套

2.单项数据流(父组件传递给子组件数据,父准建数据改变,会影响组件,但子组件变化不能影响父)

这里如果不讲父组件的值进行中间变量接受,子组件值会影响父组件,并且控制台会报警告,但不会影响结果

3.数据作用域,只适合当前组件下使用

4.在组件上使用原生事件需要添加.native

语法例:@click.native="show"

5.$refs:绑定dom操作

例:<h1 ref="myTitle">{{nowMessage}}</h1>

...function(){

  this.$refs.myTitle.innerHTML="..."

}

修改nowMessage。

以上是关于VUE.js快速入门(vue本地应用④)的主要内容,如果未能解决你的问题,请参考以下文章

VUE.js快速入门(vue本地应用⑤)

VUE.js快速入门(vue本地应用⑤)

VUE.js快速入门(vue本地应用⑥)

VUE.js快速入门(vue本地应用⑥)

VUE.js快速入门(vue本地应用⑥)

VUE.js快速入门(vue本地应用⑥)