精华内容
下载资源
问答
  • Vue组件

    2020-07-20 08:49:54
    Vue组件化1. 组件化1.1 全局组件1.2 组件的复用1.3 局部组件1.4 组件之间的通信1.4.1 props(父向子传递)1.4.2 props验证1.4.3 动态静态传递1.4.4 子向父的通信:$emit 1. 组件化 在大型应用开发的时候,页面可以...

    1. 组件化

    在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。

    但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。

    在vue里,所有的vue实例都是组件

    1.1 全局组件

    我们通过Vue的component方法来定义一个全局组件。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
    </div>
    </body>
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        // 定义全局组件,两个参数:1,组件名称。2,组件参数
        Vue.component("counter",{
            template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
            data(){
                return {
                    count:0
                }
            }
        });
        var app = new Vue({
            el:"#app"
        })
    </script>
    
    • 组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
    • 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
    • 但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
    • 全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
    • data必须是一个函数,不再是一个对象。

    1.2 组件的复用

    定义好的组件,可以任意复用多次:

    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    


    我们会发现每个组件互不干扰,都有自己的count值。

    • 组件的data属性必须是函数

    当我们定义这个 <counter> 组件时,它的data 并不是像之前直接提供一个对象:

    data: {
      count: 0
    }
    

    取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

    data: function () {
      return {
        count: 0
      }
    }
    

    如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有实例!

    1.3 局部组件

    一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。

    因此,对于一些并不频繁使用的组件,我们会采用局部注册。

    我们先在外部定义一个对象,结构与创建组件时传递的第二个参数一致:

    const counter = {
        template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    };
    

    然后在Vue中使用它:

    var app = new Vue({
        el:"#app",
        components:{
            counter:counter // 将定义的对象注册为组件
        }
    })
    
    • components就是当前vue对象子组件集合。
      • 其key就是子组件名称
      • 其值就是组件对象名
    • 效果与刚才的全局注册是类似的,不同的是,这个counter组件只能在当前的Vue实例中使用

    1.4 组件之间的通信

    通常一个单页应用会以一棵嵌套的组件树的形式来组织:

    • 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
    • 左侧内容区又分为上下两个组件
    • 右侧边栏中又包含了3个子组件

    各个组件之间以嵌套的关系组合在一起,那么这个时候不可避免的会有组件间通信的需求。

    1.4.1 props(父向子传递)

    1. 父组件使用子组件时,自定义属性(属性名任意,属性值为要传递的数据)
    2. 子组件通过props接收父组件数据,通过自定义属性的属性名

    父组件使用子组件,并自定义了title属性:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h1>打个招呼:</h1>
        <!--使用子组件,同时传递title属性-->
        <introduce title="大家好,我是私忆一秒钟"/>
    </div>
    </body>
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        Vue.component("introduce",{
            // 直接使用props接收到的属性来渲染页面
            template:'<h1>{{title}}</h1>',
            props:['title'] // 通过props来接收一个父组件传递的属性
        })
        var app = new Vue({
            el:"#app"
        })
    </script>
    

    1.4.2 props验证

    我们定义一个子组件,并接收复杂数据:

        const myList = {
            template: '<ul>\
            			<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
            		  </ul>',
            props: {
                items: {
                    type: Array,
                    default: [],
                    required: true
                }
            }
        };
    
    • 这个子组件可以对 items 进行迭代,并输出到页面。
    • props:定义需要从父组件中接收的属性
      • items:是要接收的属性名称
        • type:限定父组件传递来的必须是数组
        • default:默认值
        • required:是否必须

    当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

    我们在父组件中使用它:

    <div id="app">
        <!-- 使用子组件的同时,传递属性,这里使用了v-bind,指向了父组件自己的属性lessons -->
        <my-list :items="lessons"/>
    </div>
    
    var app = new Vue({
        el:"#app",
        components:{
            myList // 当key和value一样时,可以只写一个
        },
        data:{
            lessons:[
                {id:1, name: 'java'},
                {id:2, name: 'php'},
                {id:3, name: 'ios'},
            ]
        }
    })
    


    type类型,可以有:

    注意:子组件模板有且只有一个根标签

    1.4.3 动态静态传递

    给 prop 传入一个静态的值:

    <introduce title="大家好,我是私忆一秒钟"/>
    

    给 prop 传入一个动态的值: (通过v-bind从数据模型中,获取title的值)

    <introduce :title="title"/>
    

    静态传递时,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 props。

    <!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
    <!-- 这是一个JavaScript表达式而不是一个字符串。-->
    <blog-post v-bind:likes="42"></blog-post>
    
    <!-- 用一个变量进行动态赋值。-->
    <blog-post v-bind:likes="post.likes"></blog-post>
    

    1.4.4 子向父的通信:$emit

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <h2>num: {{num}}</h2>
        <!--使用子组件的时候,传递num到子组件中-->
        <counter :num="num"></counter>
    </div>
    </body>
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        Vue.component("counter", {// 子组件,定义了两个按钮,点击数字num会加或减
            template:'\
                <div>\
                    <button @click="num++">加</button>  \
                    <button @click="num--">减</button>  \
                </div>',
            props:['num']// count是从父组件获取的。
        })
        var app = new Vue({
            el:"#app",
            data:{
                num:0
            }
        })
    </script>
    
    • 子组件接收父组件的num属性
    • 子组件定义点击按钮,点击后对num进行加或减操作

    我们尝试运行,好像没问题,点击按钮试试:

    子组件接收到父组件属性后,默认是不允许修改的。

    既然只有父组件能修改,那么加和减的操作一定是放在父组件:

    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{ // 父组件中定义操作num的方法
            increment(){
                this.num++;
            },
            decrement(){
                this.num--;
            }
        }
    })
    

    但是,点击按钮是在子组件中,那就是说需要子组件来调用父组件的函数,怎么做?

    我们可以通过v-on指令将父组件的函数绑定到子组件上:

    <div id="app">
        <h2>num: {{num}}</h2>
        <counter :count="num" @inc="increment" @dec="decrement"></counter>
    </div>
    

    在子组件中定义函数,函数的具体实现调用父组件的实现,并在子组件中调用这些函数。当子组件中按钮被点击时,调用绑定的函数:

    		Vue.component("counter", {
                template:'\
                    <div>\
                        <button @click="plus">加</button>  \
                        <button @click="reduce">减</button>  \
                    </div>',
                props:['count'],
                methods:{
                    plus(){
                        this.$emit("inc");
                    },
                    reduce(){
                        this.$emit("dec");
                    }
                }
            })
    

    vue提供了一个内置的this.$emit()函数,用来调用父组件绑定的函数

    展开全文
  • VUE-组件

    2020-01-02 11:23:54
    6.组件化 在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。...我们通过Vue的component方法来定义一个全局组件。 <div id="app"> ...

    6.组件化

    在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航。

    但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。

    6.1.全局组件

    我们通过Vue的component方法来定义一个全局组件。

    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // 定义全局组件,两个参数:1,组件名称。2,组件参数
        Vue.component("counter",{
            template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
            data(){
                return {
                    count:0
                }
            }
        })
        var app = new Vue({
            el:"#app"
        })
    </script>
    
    • 组件其实也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等
    • 不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。
    • 但是组件渲染需要html模板,所以增加了template属性,值就是HTML模板
    • 全局组件定义完毕,任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
    • data必须是一个函数,不再是一个对象。

    效果:
    在这里插入图片描述

    6.2.组件的复用

    定义好的组件,可以任意复用多次:

    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    

    效果:

    在这里插入图片描述

    你会发现每个组件互不干扰,都有自己的count值。怎么实现的?

    组件的data属性必须是函数

    当我们定义这个 <counter> 组件时,它的data 并不是像这样直接提供一个对象:

    data: {
      count: 0
    }
    
    

    取而代之的是,一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

    data: function () {
      return {
        count: 0
      }
    }
    

    如果 Vue 没有这条规则,点击一个按钮就会影响到其它所有实例!

    6.3.局部注册

    一旦全局注册,就意味着即便以后你不再使用这个组件,它依然会随着Vue的加载而加载。

    因此,对于一些并不频繁使用的组件,我们会采用局部注册。

    我们先在外部定义一个对象,结构与创建组件时传递的第二个参数一致:

    const counter = {
        template:'<button v-on:click="count++">你点了我 {{ count }} 次,我记住了.</button>',
        data(){
            return {
                count:0
            }
        }
    };
    

    然后在Vue中使用它:

    var app = new Vue({
        el:"#app",
        components:{
            counter:counter // 将定义的对象注册为组件
        }
    })
    
    • components就是当前vue对象子组件集合。
      • 其key就是子组件名称
      • 其值就是组件对象的属性
    • 效果与刚才的全局注册是类似的,不同的是,这个counter组件只能在当前的Vue实例中使用

    6.4.组件通信

    通常一个单页应用会以一棵嵌套的组件树的形式来组织:

    在这里插入图片描述

    • 页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
    • 左侧内容区又分为上下两个组件
    • 右侧边栏中又包含了3个子组件

    各个组件之间以嵌套的关系组合在一起,那么这个时候不可避免的会有组件间通信的需求。

    6.4.1.props(父向子传递)

    1. 父组件使用子组件时,自定义属性(属性名任意,属性值为要传递的数据)
    2. 子组件通过props接收父组件属性

    父组件使用子组件,并自定义了title属性:

    <div id="app">
        <h1>打个招呼:</h1>
        <!--使用子组件,同时传递title属性-->
        <introduce title="大家好,我是锋哥"/>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.component("introduce",{
            // 直接使用props接收到的属性来渲染页面
            template:'<h1>{{title}}</h1>',
            props:['title'] // 通过props来接收一个父组件传递的属性
        })
        var app = new Vue({
            el:"#app"
        })
    </script>
    

    效果:
    在这里插入图片描述

    6.4.2.props验证

    我们定义一个子组件,并接受复杂数据:

        const myList = {
            template: '\
            <ul>\
            	<li v-for="item in items" :key="item.id">{{item.id}} : {{item.name}}</li>\
            </ul>\
            ',
            props: {
                items: {
                    type: Array,
                    default: [],
                    required: true
                }
            }
        };
    
    • 这个子组件可以对 items 进行迭代,并输出到页面。
    • props:定义需要从父组件中接收的属性
      • items:是要接收的属性名称
        • type:限定父组件传递来的必须是数组
        • default:默认值
        • required:是否必须

    当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

    我们在父组件中使用它:

    <div id="app">
        <h2>传智播客已开设如下课程:</h2>
        <!-- 使用子组件的同时,传递属性,这里使用了v-bind,指向了父组件自己的属性lessons -->
        <my-list :items="lessons"/>
    </div>
    
    var app = new Vue({
        el:"#app",
        components:{
            myList // 当key和value一样时,可以只写一个
        },
        data:{
            lessons:[
                {id:1, name: 'java'},
                {id:2, name: 'php'},
                {id:3, name: 'ios'},
            ]
        }
    })
    

    效果:
    在这里插入图片描述

    type类型,可以有:
    在这里插入图片描述

    6.4.3.动态静态传递

    给 prop 传入一个静态的值:

    <introduce title="大家好,我是锋哥"/>
    

    给 prop 传入一个动态的值: (通过v-bind从数据模型中,获取title的值)

    <introduce :title="title"/>
    

    静态传递时,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 props。

    <!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
    <!-- 这是一个JavaScript表达式而不是一个字符串。-->
    <blog-post v-bind:likes="42"></blog-post>
    
    <!-- 用一个变量进行动态赋值。-->
    <blog-post v-bind:likes="post.likes"></blog-post>
    

    6.4.4.子向父的通信

    来看这样的一个案例:

    <div id="app">
        <h2>num: {{num}}</h2>
        <!--使用子组件的时候,传递num到子组件中-->
        <counter :num="num"></counter>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        Vue.component("counter", {// 子组件,定义了两个按钮,点击数字num会加或减
            template:'\
                <div>\
                    <button @click="num++">加</button>  \
                    <button @click="num--">减</button>  \
                </div>',
            props:['num']// count是从父组件获取的。
        })
        var app = new Vue({
            el:"#app",
            data:{
                num:0
            }
        })
    </script>
    
    • 子组件接收父组件的num属性
    • 子组件定义点击按钮,点击后对num进行加或减操作

    我们尝试运行,好像没问题,点击按钮试试:

    在这里插入图片描述

    子组件接收到父组件属性后,默认是不允许修改的。怎么办?

    既然只有父组件能修改,那么加和减的操作一定是放在父组件:

    var app = new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{ // 父组件中定义操作num的方法
            increment(){
                this.num++;
            },
            decrement(){
                this.num--;
            }
        }
    })
    

    但是,点击按钮是在子组件中,那就是说需要子组件来调用父组件的函数,怎么做?

    我们可以通过v-on指令将父组件的函数绑定到子组件上:

    <div id="app">
        <h2>num: {{num}}</h2>
        <counter :count="num" @inc="increment" @dec="decrement"></counter>
    </div>
    

    在子组件中定义函数,函数的具体实现调用父组件的实现,并在子组件中调用这些函数。当子组件中按钮被点击时,调用绑定的函数:

            Vue.component("counter", {
                template:'\
                    <div>\
                        <button @click="plus">加</button>  \
                        <button @click="reduce">减</button>  \
                    </div>',
                props:['count'],
                methods:{
                    plus(){
                        this.$emit("inc");
                    },
                    reduce(){
                        this.$emit("dec");
                    }
                }
            })
    
    • vue提供了一个内置的this.$emit()函数,用来调用父组件绑定的函数

    效果:

    在这里插入图片描述

    展开全文
  • 最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性为什么是函数而不是对象。 首先来了解一下Vue组件的使用理念:在Vue组件使用中,组件...

    最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象。

    首先来了解一下Vue组件的使用理念:在Vue组件使用中,组件复用是需要秉承的理念,组件创建好之初就要考虑到后期可复用性,考虑到可复用性,那么就涉及到组件中data数据是要相互独立、互不影响的,不管组件复用多少次,data数据都要被复制一遍,这样当某一处复用的组件数据发生变化的时候,其他地方的复用组件的data数据不受影响。而且由于JS的特性所致的原因,在component中,data属性值必须是以函数的形式存在,而不是对象。

    再来看一下在Vue组件中data的属性值是函数,如下所示:

    export default {

       data() { // data是一个函数, data: function() {}的简写

         return {

           name: 'sanzhanggui',   // 页面要初始化的数据

             };

         },

    };

    而不是Vue组件中data的属性值为对象&#

    展开全文
  • vue组件

    2021-08-30 11:25:42
    组件化思想: 在VUE中将一个组件看作一个页面,独立进行和管理 ...补充知识: 为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css. 全局组件 在网页中书写一个全局组件的网页需要三...

    传统的页面开发会将大量的HTML/CSS/JS进行引用,但是引入之后结构混乱,不便于管理,开发维护成本较高

    组件化思想:

           在VUE中将一个组件看作一个页面,独立进行和管理

            关键:一个组件就是一个页面(html/js/css)        各个组件之间复用,但是单独管理

    组件化的思想体现了“分治思想:分部式思想

    补充知识: 为了保证组件化 相互之间互不干扰,则应该在组件内部 单独定义html/js/css.

    全局组件

    在网页中书写一个组件的网页需要三个部分

    1.body中的vue渲染区间:标记组件的加载的位置

    <div id="app">
    			<!-- 如果需要用组件,则在Vue的渲染区中使用 -->
    			<!-- 规则:
    				在vue中如果使用标签的内容都是小写,如需引入驼峰规则,则使用-线代替
    			-->
    			<add-num-com></add-num-com>
    			<add-num-com></add-num-com>
    			<add-num-com></add-num-com>
    		</div>

    2. bady中的定义标签的语法,显示的内容

    <!--定义组件的框架,动态数据采用{{变量名称的方法动态赋值}} 
    			定义组件标签的语法 必须要有跟标签 -->
    		<template id="numTem">
    			<div><h1>我是一个组件</h1>
    			获取名字{{name}}
    			我的爱好{{like}}
    			</div>
    		</template>

    3.script中组件的实体内容,属性,数据,方法,采用页面标记指定拥有对应id的组件标签

    Vue.component("addNumCom",{
    				//数据的书写方法
    				data(){
    					return{
    						//自定义属性
    						name:"sayhi",
    						like:"听音乐"
    					}
    				},
    				//页面标记
    				template:"#numTem"
    				//方法
    				//methods:{}
    			})

     为什么要创建vue对象?

    1.创建动态数据渲染区域

    2.创建veu对象渲染组件

            1.创建动态数据渲染区域
    
    
        	<div id="app">
    			<!-- 如果需要用组件,则在Vue的渲染区中使用 -->
    			<!-- 规则:
    				在vue中如果使用标签的内容都是小写,如需引入驼峰规则,则使用-线代替
    			-->
    			<add-num-com></add-num-com>
    			<add-num-com></add-num-com>
    			<add-num-com></add-num-com>
    		</div>
    
                /* 2.实例化vue对象,找到区域交给vue渲染*/
    			const app = new Vue({
    				el:"#app",
    			})

    全部代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>组件</title>
    		<!-- 导入JS -->
    		<script src="./js/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<!-- 如果需要用组件,则在Vue的渲染区中使用 -->
    			<!-- 规则:
    				在vue中如果使用标签的内容都是小写,如需引入驼峰规则,则使用-线代替
    			-->
    			<add-num-com></add-num-com>
    			<add-num-com></add-num-com>
    			<add-num-com></add-num-com>
    		</div>
    		
    		<!--定义组件的框架,动态数据采用{{变量名称的方法动态赋值}} 
    			定义组件标签的语法 必须要有跟标签 -->
    		<template id="numTem">
    			<div><h1>我是一个组件</h1>
    			获取名字{{name}}
    			我的爱好{{like}}
    			</div>
    		</template>
    
    		
    		
    		<!-- 定义全局组件 -->
    		<script>
    	    /* 组建的定义:
    		*Vue.component(组件名称(要求满足驼峰规则),{
    		*组件的实体内容:
    		*	//属性
    		*	data(){
    		*		return{	
    		*		}
    		*	},
    		*	//页面标记
    		*	template:"#numTem"
    		*	//方法
    		*	methods
    		*})
    		*/		
    			//Vue要大写	
    			
    			//在script标签中描述组件的动态数据,方法
    			//利用页面标记指定对丁的id属性,与框架相结合,补充组件的具体内存
    			Vue.component("addNumCom",{
    				//数据的书写方法
    				data(){
    					return{
    						//自定义属性
    						name:"sayhi",
    						like:"听音乐"
    					}
    				},
    				//页面标记
    				template:"#numTem"
    				//方法
    				//methods:{}
    			})
    			
    			/* 4.实例化vue对象,找到区域交给vue渲染*/
    			const app = new Vue({
    				el:"#app",
    			})
    		</script>
    	</body>
    </html>
    

    局部组件

    局部组件的书写方法与全局组件类似,依旧是三部分,但是增加了多个组件可以在一个页面显示的功能

    1.在body中的多个的vue渲染区间:标记组件的加载的位置

    	    <div id="app">
    		    <hello1></hello1>	
    		</div>
    		
    		<!-- 定义app2 局部组件只能在特定位置使用,
    		 所以该位置 不能解析-->
    		<div id="app2">
    			<hello2></hello2>		
    		</div>
            <div id="app3">
    			<hello3></hello3>	
    		</div>
    

      2创建vue对象,在对象中加入创建的挂载组件信息

    const app1 = new Vue({
    				el : "#app1",
    				data : {
    					
    				},
    				//只能在当前元素中使用
    				components: {
    					'hello1' : hello1
    				}
    			})
    const app2 = new Vue({
    				el : "#app2",
    				data : {
    					
    				},
    				//只能在当前元素中使用
    				components: {
    					'hello2' : hello2
    				}
    			})
    const app3 = new Vue({
    				el : "#app3",
    				data : {
    					
    				},
    				//只能在当前元素中使用
    				components: {
    					'hello3' : hello3
    				}
    			})

     3.script中使用vue创建的组件对象建立局部组件的标签。

    实体内容,属性,数据,方法,采用页面标记指定拥有对应id的组件标签

    //定义全局组件
    			Vue.component('hello3',{
    				data(){
    					return {
    						name: '定义全局组件'
    					}
    				},
    				template: "#hello3"
    			})
    			
    			
    			/* 定义局部组件 */
    			let hello1 = {
    				data(){
    					return {
    						msg: '你好Hello1'
    					}
    				},
    				template: "#hello1"
    			}
    			
    			let hello2 = {
    				data(){
    					return {
    						msg: '你好Hello2'
    					}
    				},
    				template: "#hello2"
    			}
    			

    4. bady中的定义标签的语法,进一步完善组件

    编辑组件的显示的内容

    	<!-- 模板标签必须定义在vue渲染div外边 -->
    	<!-- 定义模版代码1 -->
    		<template id="hello1">
    			<div>
    				{{msg}}
    			</div>
    		</template>
    	<!-- 定义模版代码2 -->
    		<template id="hello2">
    			<div>
    				{{msg}}
    			</div>
    		</template>
    	<!-- 定义模版代码3 -->
    		<template id="hello3">
    			<div>
    				{{name}}
    				
    				<!-- 在全局组件中引用局部组件 使用不生效 -->
    				<!-- <hello1></hello1> -->
    			</div>
    		</template>

     全部代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>局部组件定义</title>
    		<script src="./js/vue.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			<msg-com></msg-com>
    			<msg-com></msg-com>
    		</div>
    		
    		<!-- 定义app2 局部组件只能在特定位置使用,
    		 所以该位置 不能解析-->
    		<div id="app2">
    			<msg-com></msg-com>
    			<msg-com></msg-com>
    		</div>
    		
    		
    		
    		<!-- 模板标签必须定义在vue渲染div外边 -->
    		<template id="msgTem">
    			<div>
    				<h3>我是一个局部组件</h3>
    			</div>
    		</template>
    		
    		
    		<script>
    			
    			let msgCom = {
    				template: "#msgTem"
    			}
    			
    			//定义局部组件 只对当前vue对象有效
    			const app = new Vue({
    				el: "#app",
    				components: {
    					//key: value
    					//msgCom: msgCom
    					//可以只写一个
    					msgCom
    				}
    			})
    			
    			const app2 = new Vue({
    				el: "#app2",
    			})
    			
    			
    		</script>
    	</body>
    </html>
    

    展开全文
  • Vue组件使用

    2021-06-15 11:23:42
    1、组件也是一个Vue实例,因此它在定义时也会接收:data、methods、生命周期函数等 2、不同的是组件不会与页面的元素绑定,否则就无法复用了,因此没有el属性。 3、但是组件渲染需要html模板,所以增加了template...
  • Vue组件和子组件

    2019-07-11 20:56:49
    目录 ...组件树可以显示出组件组件之间存在的层级关系,而其中一种非常重要的关系就是父子组件的关系,下面看一下代码是如何形成这种层级关系的: <div id="app"> <cpn2></...
  • Vue组件

    2020-02-29 09:19:51
    vue是“渐进式轻量级框架”的理解,如下图
  • vue组件

    2019-06-18 22:21:51
    1.组件化 在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航、尾部信息模块。...我们可以使用 Vue.component 来定义一个组件Vue.compon...
  • vue-组件化(一)

    2020-07-25 22:03:53
    vue组件化思想 组件使用分成三个步骤 ①调用Vue.extend()方法创建组件构造器(ES6中继承) 通常在创建组件构造器时,传入template代表我们自定义组件的模板(是以对象的形式),该模板就是在使用到组件的地方,要显示...
  • Vue从零开始之Vue组件

    2020-06-30 23:04:54
    文章目录Vue 组件组件基础组件模板抽离的写法组件中定义data/方法父子组件通信传值父传子:props属性props大小写问题子传父: 自定义事件数据双向绑定时 子传父父子组件访问父访问子 children和children和children和...
  • Vue组件定义

    2018-12-20 13:41:28
    组件是可复用的 Vue 实例。 本质上是一个对象,该对象包含data、computed、watch、methods、filters以及生命周期钩子等成员属性。 组件结构: { data(){ return { // } }, computed:{ displayName(){ ...
  • 本文我们来介绍下Vue中的组件组件是可复用的 Vue 实例,且带有一个名字。 组件的创建 extend方式 首先通过 Vue.extend 方法来定义一个全局组件。template 就是组件将来要展示的HTML内容。然后通过 Vue.component ...
  • vue组件详解

    2019-03-06 00:08:03
    1.组件的两种注册方法: 全局注册(全局注册后任何Vue实例都可以使用): 全局注册代码: &amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;lt;...
  • Vue笔记五:Vue组件

    2019-11-15 14:53:12
    Vue组件是可重用的Vue实例 组件component 拥有专属的HTML CSS JS和数据的页面独立功能区域 组件代码具有很高的重用性 只要页面中存在需要被反复使用的功能区域 都要定义为组件 创建组件 Vue.component(“组件名”,{ ...
  • 组件化开发是Vue里卖弄非常重要的一个思想 我们将一个完整的页面分成很多个组件 每个组件都用于实现页面的一个功能块 而每一个组件又可以进行细分 Vue.js 提供了一种抽象的,可以让我们...
  • 文章目录使用意义基础使用给组件添加属性单一根元素 ...自定义组件Vue.component('标签名', {})一般我们的HTML模板和data数据以及方法之类的都会放在组件的大括号中。下面我会创建一个可以记录点击次
  • vue学习篇-Vue组件

    2019-10-25 10:57:47
    回顾: 1、ES6–为Vue服务 2、Vue的基础语法 – 渐进式 {{插值表达式}} ...计算属性:本质是方法,但是可以像属性一样使用 ...3、综合练习-sms系统 ------- 像jQuery一样使用Vue ...4、像node一样使用Vue—...1.组件...
  • Vue基础(组件基础)

    2020-05-27 10:15:36
    • 每一个VUE组件都是一个独立的个体(独立的vue实例),作用域隔离(互不干扰),有完整的生命周期,有自己的响应式数据和各种方法(事件) • 能够实现组件的嵌套:需要掌握组件之间的信息通信 组件命名规范 • ...
  • 浅谈vue组件data

    2020-04-03 21:49:35
    可能刚刚学习vue的时候,vue对象里面的data与组件里面的data,明明都是加载数据可一个组件是data(){return {}}一个是data:{},组件之所以是函数而不是对象,正好也是函数的特性,调用完就释放互不干扰,而对象修改...
  • 上图: ... 是什么原因导致的,上代码 this.treeList= []这个是树的数据 this.treeList1 = this.treeList;...this.treeList2 = this.treeList;...我给他俩同时赋值导致状态一样的问题 ...this.treeLis...
  • Vue组件学习

    2019-10-06 12:07:10
    (三)Vue组件学习 1、通过Vue的component方法来定义一个全局组件。 <div id="app"> <!--使用定义好的全局组件--> <counter></counter> </div> <script src="./node_mod...
  • 解决办法:将树组件中的mounted和watch改为activated activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等; created():在创建vue对象时,当html...
  • vue ---- 组件

    2021-08-30 22:12:52
    为了保证组件化相互之间互不干扰,则应该在组件内部,单独定义html/js/css 2. 组件的组织 通常一个应用会以一棵嵌套的组件树的形式来组织: 为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两
  • [亲测]Vue组件

    千次阅读 2018-11-26 17:54:30
    1.组件化 在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。例如可能会有相同的头部导航、尾部信息模块。 但是如果每个页面都独自开发,这无疑增加了我们...Vue.component(组件...
  • vue组件传参、调用的方法

    千次阅读 2018-11-19 22:49:59
    虽然官网讲的比较详细,但是还是一直有人问起。就写一篇。 首先对于vue,很多人一直在用却不明白。第一点vue是一个数据驱动的框架,数据...第二点vue组件化,以及组件复用的概念。 一、先说一下父子组件传值 ...
  • Vue组件化+路由

    2020-08-04 00:30:04
    1组件化 在大型应用开发的时候,页面可以划分...在vue里,所有的vue实例都是组件 1.1.全局组件 我们通过Vue的component方法来定义一个全局组件。 <div id="app"> <!--使用定义好的全局组件--> <counte
  • 有时会有在单独组件内引入外部框架的需要,而又不想干扰其他组件。 放在main里,css会影响到所有组件。 放到index.html同样会有影响。 所以要放到单组件的style scoped里 你可以 单独放在一个style里面:是有效的...
  • 界面默认只能显示第2个组件。 代码: //template中页面插入子组件 <span class="dataStatistics-title">车总数:</span> <DigitRoll class="digitRoll" :rollDigits="totalNumber"></...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 690
精华内容 276
关键字:

vue相同组件值互不干扰

vue 订阅