Vue 组件：第三天

最新推荐文章于 2024-06-21 16:54:51 发布
最新推荐文章于 2024-06-21 16:54:51 发布
阅读量272 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fanbin168/article/details/85775179
版权

全局组件的第一种定义方式

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--注意：如果组件的名称采用的是驼峰命名方式，则需要用-隔开-->
        <!--例如：下面定义的名称为myCom1的组件，就需要<my-Com1></my-Com1>这样来使用-->
        <my-com1></my-com1>
        <mycom2></mycom2>

        <mycom3></mycom3><!--简写1-->
        <mycom4></mycom4><!--简写2-->
        <mycom5></mycom5><!--简写3-->

        <mycom6></mycom6><!--简写4-->
    </div>

    <template id="temp3">
        <div>
            <p>简写3的组件</p>
        </div>
    </template>
    <template id="temp4">
        <div>
            <p>简写4的组件</p>
        </div>
    </template>

    <script>

       
        //定义全局Vue组件

        //Vue.extend 返回的是一个“扩展实例构造器”,即：组件的模板对象
        /*Vue.component 是用来全局注册组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件
         可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，
         并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜*/

        var com1 = Vue.extend({
            template: "<h3>我是组件</h3>" //通过template属性，指定了组件要展示的HTML结构
        })
        Vue.component("myCom1", com1); //myCom1是我定义的组件名字，com1是组件的内容 （驼峰命名）

        Vue.component("mycom2", com1); //mycom2是我定义的组件名字，com1是组件的内容（非驼峰命名）


        //简写1

        Vue.component("mycom3", Vue.extend({
            template: "<h4>简写1的组件</h4>"
        }))

        //简写2
        //相对上面的简写，这里更是简单了，直接省略Vue.extend()
        //这种写法虽然简单点，但是它有他的问题， 就是这个组件只能有且只有一个根元素
        Vue.component("mycom4", {
            //template: "<span>简写2的组件</span><span>哈哈</span>" 错误的写法；需要用在外面用一个div将span两个span元素包裹起来，形成一个唯一的根元素
            template: "<div><span>简写2的组件</span><span>哈哈</span></div>"
        });

        //简写3
        //这种写法，就是直接将模板设定为指定的模板
        Vue.component("mycom5", {
            template: "#temp3", //它的模板为id为temp的这个模 ：<template id="temp5"></template>
        })

        //简写4
        //这中方式就更简单了，可以直接得到一个组件的模板对象,对象名为mycom6 (在Vue路由中，需要用到这中方式声明的组件对象)
        //这里仅仅是声明了一个组件对象，所以不能直接在Vue中直接使用<mycom6></mycom6>,如果想要使用就需要在将这个组件对象注册为全局，或者私有的组件
        //例如：定义全局组件Vue.component("mycom6", mycom6); 或者在Vue中定义私有组件 components: { mycom6 }
        var mycom6 = { template: "#temp4" }
        //Vue.component("mycom6", mycom6); //声明一个名字为mycom6的全局组件，它使用的是上面定义的那个mycom6组件模板对象

        var vm = new Vue({
            el: "#app",
            data: {},
            components: {
                mycom6 //这里仅仅将我们声明好的组件对象放到这里就可以了。就可以在页面使用了：如<mycom6></mycom6>
            }
        })
    </script>
</body>
</html>

 

全局组件定义的第二种方式：推荐

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom></mycom> <!--组件的使用方式-->
    </div>


    <template id="temp"><!--组件模板-->
        <div>
            <h3>这是通过template元素，在外部定义的组件结构，这个方式有代码的智能提示和高亮</h3>
            <span>好用，不错</span>
        </div>
    </template>

    <script>
        //定义全局Vue组件 组件名叫mycom，组件的内容是#temp所指向的模板内容
        Vue.component("mycom", {
            template: "#temp"
        });

        var vm = new Vue({ el: "#app" })
    </script>
</body>
</html>

私有组件的定义方式

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom></mycom> <!--组件的使用方式-->

        <login></login>
    </div>


    <template id="temp">
        <!--组件模板-->
        <div>
            <h3>这是通过template元素，在外部定义的组件结构，这个方式有代码的智能提示和高亮</h3>
            <span>好用，不错</span>
        </div>
    </template>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: { //components中是定义私有组件的
                //定义个名字为mycom的私有组件
                "mycom": {
                    template: "#temp"
                },
                //定义个名字为login的私有组件
                "login": {
                    template: "<h1>这里是登陆窗口</h1>"
                }
            }

        })
    </script>
</body>
</html>

组件中data的使用

在Vue中，除了vue实例有data外，组件是可以有自己的data和methods

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom1></mycom1> <!--组件的使用方式-->
    </div>


    <template id="temp">
        <!--组件模板-->
        <div>
            <h3>{{msg}}</h3> <!--这个msg是组件中的data-->
            <span>{{name}}</span>
        </div>
    </template>

    <script>
        //1>组件可以有自己的data数据

        //2>组件中的data与vue实例中的data有点不一样，vue实例中的data可以是一个对象，但是组件中的data只能是一个函数，并且函数必须返回一个对象

        Vue.component("mycom1", {
            template: "#temp",
            data: function () { //组件中的data与vue实例中的data有点不一样，他只能是一个函数，并且函数必须返回一个对象(将需要的数据放在对象中返回)
                return {
                    name:'张学友',
                    msg: "我是data中的数据"
                };
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>
</html>

组件中的data和methods

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <mycom1></mycom1> <!--组件的使用方式-->
        <hr />
        <mycom1></mycom1> <!--组件的使用方式-->
    </div>


    <!--组件模板-->
    <template id="temp">
        <div>
            <input type="button" value="+1" v-on:click="increment" /> <!--increment是组件中的方法-->
            <input type="text" v-model="count" /><!--count是组件中的count-->
            <h3>{{count}}</h3><!--count是组件中的count-->
        </div>
    </template>

    <script>
        //1>组件可以有自己的data数据 和 methods 方法

        //2>组件中的data与vue实例中的data有点不一样，vue实例中的data可以是一个对象，但是组件中的data只能是一个函数，并且函数必须返回一个对象

        Vue.component("mycom1", { 
            template: "#temp",
            data: function () { //组件中的data与vue实例中的data有点不一样，他只能是一个函数，并且函数必须返回一个对象(将需要的数据放在对象中返回)
                return {
                   count:0
                }

            },
            methods: { 
                increment: function () {
                    this.count += 1;
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {}
        })
    </script>
</body>
</html>

使用component占位符实现组件的切换

一般情况下，在同一个页面，我们要实现不同的功能（比如登录，注册）可以采用切换登录，注册的模块来实现不同的显示

这样就不用登录搞一个页面，注册也搞一个页面了。我们根据不同的需求来确定这个页面应该显示什么内容，比如下面的：

<html>
<head>
    <script src="~/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <a href="" v-on:click.prevent="comName='login'">登陆</a> 
        <a href="" v-on:click.prevent="comName='register'">注册</a>

        <!-- Vue提供了component来展示对应名称的组件-->
        <!-- component 是一个占位符，v-bind:is属性可以用来指定要展示的组件名称-->
        <!-- 例如v-bind:is="comName"  就表示这里要展示comName变量的值这个组件 ，例如：comName的值为login 那么这里就展示login这个组件-->
        <component v-bind:is="comName"></component>
    </div>


    <!--组件模板-->
    <template id="login">
        <div>
            <h3>登陆模块</h3>
        </div>
    </template>
    
    <template id="register">
        <div>
            <h3>注册模块</h3>
        </div>
    </template>

    <script>
        Vue.component("login", { //定义一个登陆组件
            template: "#login",
        })

        Vue.component("register", { //定义一个注册组件
            template: "#register",
        })

        var vm = new Vue({
            el: "#app",
            data: {
                comName: 'login'//默认展示登陆模块
            }
        })
    </script>
</body>
</html>

无盐海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
基于Vue开发的迷你实时天气预报组件 项目展示 基于Vue框架开发的一款迷你天气预报展示的小组件，目前只支持中国大陆的天气预报，原因在更新公告中有，有问题请提 :package: 安装 2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要下载只能切换npm源为官方源。 npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> <v></v> </template> // 2. 局部引入 //a
VUE组件练习：VUE.rar
11-30
在"VUE.rar"这个压缩包中，我们有两个关键文件：vue.js 和 VUE08，它们分别代表Vue.js的核心库文件和一个可能是第八个练习的Vue组件。 首先，让我们深入了解Vue.js的核心特性： 1. **组件化**：Vue.js 的核心理念...
【vue】天气插件
qq_40881695的博客
02-28 2853
vue 天气插件
【vue】天气组件使用与透明样式调整
最新发布
Anlittlecat的博客
06-21 271
【代码】天气组件使用与透明样式调整。
vue中使用天气插件
qq_40390762的博客
06-16 4740
（不知为什莫中国天气网cha'jian） 壹： 插件网址：
vue中使用天气插件（和风天气）
热门推荐
qq_42453890的博客
03-03 2万+
1.进入中国天气网插件首页 中国天气网 选择适合项目的插件 2.自定义插件样式，登录后生成代码 <div id="weather-v2-plugin-simple"></div> <script> WIDGET = { CONFIG: { "modules": "02", "background": 5, "tmpColor": "4A4A4A", "tmpSize": 16, "cityColor": "4A4A4A",
vue3:组件注册，路由自动注册
03-20
Vue3 是一款流行的前端框架，其在组件化开发方面有着出色的表现。组件是 Vue.js 应用的基础构建块，它们可以被复用，允许开发者将应用程序拆分成独立、可管理的部分。Vue3 引入了一些新特性，如Composition API，这...
vue第三章组件.pdf
08-12
vue 入门到进阶第三章 #资源达人分享计划 # 技术文档
vue 组件销毁并重置的实现
10-15
### Vue组件销毁与重置的实现 Vue提供了几种方式来控制组件的销毁与重置，最直接的方式是使用`vm.$destroy()`方法，这会触发Vue实例的`beforeDestroy`和`destroyed`钩子函数，使得开发者可以在这个过程中进行一些...
VUE3实用组件开发合集二：时钟、倒计时组件
07-11
VUE3实用组件开发合集二：时钟、倒计时组件，包括源码，开发文档、素材等。 使用vue3开发时钟、倒计时组件组件，实现电子时钟、钟表、农历、秒表、定时器及各种预定义样式等。封装为组件，可直接调用，通过参数可...
vue 中使用中国天气插件
01-08
export default { name: 'BIWeather.vue', created () { window.WIDGET = { ID: '自己的ID' }; (function (d) { var cs = d.createElement('link') cs.rel = 'stylesheet' cs.href = 'https://apip.weatherdt.com/view/static/css/tqw_widget_view.css?v=0101' var s = d.createElement('
vue加载天气组件
张一西的博客
07-07 1万+
天气插件 中国天气网 vue中使用 首先我们进入中国天气网生成一段代码 根据需要设置天气样式 复制并修改生成的这段代码到vue中 将script引入 修改为vue的动态引入方法 <template> <div id="weater"> <div id="weather-view-he" ref="weather"></div> <remote-script src="天气网生成代码中script的src"&
vue时间天气插件_在vue中使用天气插件
weixin_39758953的博客
12-20 512
在vue中使用天气插件插件网址： 中国天气选择自己需要的插件、生成代码复制即可在 vue 中的使用：template 中mounted 中window.WIDGET = {CONFIG:{"modules":"20","background":5,"tmpColor":"ffffff","tmpSize":16,"cityColor":"ffffff","citySize":16,"aqiSiz...
vue项目中可使用天气预报小组件推荐vue-mini-weather
deciduous_leaves的博客
05-16 1万+
该部分内容引自基于Vue开发的迷你实时天气预报组件 由于该组件在2021.4.24日刚上传到npm仓库，请用npm安装！ 1、安装 npm i vue-mini-weather --save 2、引入 // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import weather from 'vue-mini-weather' Vue.use(weather) //app.vue 项目文件 <template> ......
vue 天气插件的使用
KMINLIKE的博客
12-05 1061
天气插件
记录--东拼西凑造轮子--vue天气组件
yynikki的博客
11-23 4062
百度找出了一个免费可用的天气api接口：[https://www.tianqiapi.com/?action=v1](https://www.tianqiapi.com/?action=v1)没有特别需求的话，这个接口满足日常使用还是绰绰有余的；接口必填字段appid 账户ID 和 appsecret 账户密钥 登录注册即可获取。
vue 天气插件 —— 创建标准版天气插件的使用——基础积累
yehaocheng520的博客
05-09 5980
vue 天气插件 —— 创建标准版天气插件的使用
VueJs+chrome-extension+element-ui天气预报的小插件
觉醒法师的专栏
07-17 6689
这里通过chrome-extension + VueJs + element-ui来实现个天气预报的小插件。风天气预报API，提供全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。全球城市未来15天天气预报，包括日出日落、月升月落、最高最低温度、天气白天和夜间状况、风力、风速、风向、相对湿度、大气压强、降水量、降水概率、露点温度、紫外线强度、能见度等。...
Vue组件详解：生命周期与实战应用
本资源是关于Vue框架的入门到进阶教程，特别是第三章，主要聚焦于"Vue组件"的学习。Vue组件是Vue.js的核心概念，它们使得代码模块化，提高了代码复用性和维护性。在这一章中，作者首先定义了组件：Vue组件本质上是一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值