Vue入门3-组件

最新推荐文章于 2024-07-11 16:13:04 发布

Doigt_

最新推荐文章于 2024-07-11 16:13:04 发布

阅读量492

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Doigt_/article/details/114303465

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、定义组件

（1）局部组件
组件的定义模式可以直接在程序里面采用HTML字符串的方式进行定义，先进行一个局部组件的定义，所谓局部组件指的是针对于某个Vue对象定义的。

JS代码：

app=new Vue({
		el:'#msgDiv',
		components:{ //定义局部组件，这个组件只对当前对象有效
		 "message-component":{
		 template:"<div>嗨皮的学习vue.js开发框架</div>"
		 }
		}
	})

HTML代码：

<div id="msgDiv" >
<message-component></message-component><!--  此元素是自定义组件 -->
</div>

运行结果：
在这里插入图片描述
（2）全局组件
以上所定义的组件只能够在当前Vue对象使用，所以按照习惯性的做法，组件是一段可以被重复调用的代码段，所以这段代码应该定义为全局组件。

JS代码：

    Vue.component('message-component',{
	 template:"<div>嗨皮的学习vue.js开发框架</div>"
	
	}); <!-- 定义全局组件 -->
	app=new Vue({
		el:'#msgDiv'

	})

HTML代码：

<div id="msgDiv" >
<message-component></message-component><!--  此元素是自定义组件 -->
</div>

运行结果：
在这里插入图片描述

2、组件事件处理

JS代码：

 window.onload = function () {
            Vue.component('message-component',{<!-- 定义全局组件  -->
            template: "<div>" +
            "<p>原始内容：{{message}}</p>"+
            "<p>翻转内容：{{statement}}</p>" +
            "<input type='text' v-model='message'/>"+
            "<button @click='changemessage'>修改信息</button>"+
   "</div>",
                data: function () {
                    return { 'message':'快乐的Vue学习！！！'}
                },
                methods: {
                changemessage: function () {
                    this.message = '积极向上的生活！！！';
                }
            },
                computed: {
                statement: function () {
                    return this.message.split('').reverse().join('');
                }
            }
});
        app = new Vue({
            el: '#msgDiv'
        })

HTML代码：

<div id="msgDiv">
        <message-component></message-component>
    </div>

运行结果：
在这里插入图片描述

3、代码引用

在之前的程序中，所有的组件中的代码都是通过具体字符串来实现HTML代码编写，很明显这样的做法是非常低效的，最好的做法应该是引用一个已有的代码。
JS代码：

  window.onload = function () {
            Vue.component('message-component',{<!-- 定义全局组件  -->
                template:"#messageTemplate",
                data: function () {
                    return { 'message':'快乐的Vue学习！！！'}
                },
                methods: {
                changemessage: function () {
                    this.message = '积极向上的生活！！！';
                }
            },
                computed: {
                statement: function () {
                    return this.message.split('').reverse().join('');
                }
            }
});
        app = new Vue({
            el: '#msgDiv'
        })

HTML代码：

<body>
    <div id="msgDiv">
        <message-component></message-component>
    </div>
</body>
</html>
<template id="messageTemplate"> 
<div>
<p>原始内容：{{message}}</p>
<p>翻转内容：{{statement}}</p>
<input type='text' v-model='message'/>
<button @click='changemessage'>修改信息</button>
</div>
</template>

运行结果：
在这里插入图片描述

Doigt_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门3-组件

1、定义组件（1）局部组件组件的定义模式可以直接在程序里面采用HTML字符串的方式进行定义，先进行一个局部组件的定义，所谓局部组件指的是针对于某个Vue对象定义的。JS代码：app=new Vue({ el:'#msgDiv', components:{ //定义局部组件，这个组件只对当前对象有效 "message-component":{ template:"<div>嗨皮的学习vue.js开发框架</div>" } } })HTML代码
复制链接

扫一扫

专栏目录