vue组件 component

最新推荐文章于 2022-11-24 10:20:09 发布
最新推荐文章于 2022-11-24 10:20:09 发布
阅读量144 收藏
点赞数
分类专栏： vue

转载于：https://www.cnblogs.com/zycbloger/p/6429592.html

1创建组件

1.1.全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>
</body>
</html>
<script>
      //注册
        Vue.component('TestDiv', { //不区分大小写,这里写驼峰法
            template: '<div @click="change">{{msg}}</div>',
            data:()=>{return {msg:'我的组件'}},
            methods:{
                change:()=>{
                    console.log(this); //this指向window
                }
            }
        });

        //创建根实例
        var vm = new Vue({
            el:'#box',
        });

</script>

1.2.局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>
</body>
</html>
<script>
          ///定义组件
        var testTemplate = {
            template: '<div @click="change">{{msg}}</div>',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };
        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'TestDiv': testTemplate
            } 
        });
</script>

还有几个其他的写法

1.3.写在script中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>
</body>
</html>
 <script type="text/x-template" id="myComponent">
      <div @click="change">{{msg}}</div>
</script>
<script>
          ///定义组件
        var testTemplate = {
            template: '#myComponent',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };
        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'TestDiv': testTemplate
            } 
        });
</script>

1.4.使用template标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>

</head>
<body style="padding:30px">
    <div id="box">
       <test-div></test-div>
  </div>

   <template id="myComponent">
             <div @click="change">{{msg}}</div>
   </template>
</body>
</html>
<script>
          ///定义组件
        var testTemplate = {
            template: '#myComponent',
            data:function(){
                return {msg:'我的局部组件'}
            },
            methods:{
                change:function(){
                     //todo
                    console.log(this);
                }
            }
        };
        //创建根实例
        var vm = new Vue({
            el:'#box',
            components:{
                'TestDiv': testTemplate
            } 
        });
</script>

2.使用组件

2.1.使用

<div id="box">
       <test-div></test-div>
       <div is="test-div"></div>
  </div>

2.2.动态使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="../../css/reset.css"> -->
    <script type="text/javascript" src="../vue/vue.min.js"></script>
    <script type="text/javascript" src="../vue/babel.min.js"></script>
</head>

<body style="padding:30px">
    <div id="box">
        <input type="button" value="1" @click="buttonClick('TestDiv');">
        <input type="button" value="2" @click="buttonClick('TestDiv2')">
        <div :is="myCom"></div>
    </div>
    <template id="myComponent">
        <div @click="change">{{msg}}</div>
    </template>
    <template id="myComponent2">
        <div @click="change">{{msg2}}</div>
    </template>
</body>

</html>
<script>
//定义组件
var testTemplate = {
    template: '#myComponent',
    data(){
        return { msg: '我的局部组件1' }
    },
    methods: {
        change(){
            //todo
            console.log('1111');
        }
    }
};
var testTemplate2 = {
    template: '#myComponent2',
    data(){
        return { msg2: '我的局部组件2' }
    },
    methods: {
        change(){
            //todo
            console.log('2222');
        }
    }
};
//创建根实例
var vm = new Vue({
    el: '#box',
    data(){
        return {
            myCom: 'TestDiv'
        }
    },
    components: {
        'TestDiv': testTemplate,
        'TestDiv2': testTemplate2
    },
    methods: {
        buttonClick(t){
          this.myCom = t;
        }
    }
});
</script>

在用es6语法中，箭头函数中的this始终指向window，我们在vue中使用的是
buttonClick(t){this.myCom = t;}
这种写法，
等同于buttonClick：function(t){this.myCom = t;}
这里this指向 vm

han_hanker
关注
专栏目录
vue组件component的使用
独宠子沫的博客
07-24 6674
一、全局注册组件 全局注册就是在构造器的外部用Vue.component来注册。 1.如何定义一个组件 <div id="app"> <wzq></wzq> </div> <script> Vue.component('wzq',{ template:`<h1...
ts泛型，函数返回类型为对象某个key值的类型
wang-ccnu的博客
04-15 1万+
泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。一直是ts学习中的一个重难点。 具体的学习资料还是看官网吧。这里出一个题目： 写一个函数，接受两个参数，一个为object，另一个为object中的一个key。函数返回类型指定为obj[key]的类型。 interface Person{ name:string, age:number } func...
vue - vue的动态组件(component)使用
qq_43886365的博客
11-24 4827
vue的动态组件(component)使用
15.Vue组件：component
高新园养鸡场
09-05 754
简介 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。 所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。   全局注册 extend + component 使用Vue.extend配合Vue.compon
Vue项目中components组件（模板）的使用
糖果π
11-03 2万+
在web项目开发过程中，我们经常会遇到重复代码结构，比如页面的头部、底部等，通常我们都是作为模板或者公共文件进行设计使用，在vue中，我们可以使用components组件（模板）来实现。下面我们按步骤实现组件的使用。 第一步：创建组件vue文件 我们在src目录中的视图view目录中，创建组件目录，如header，再在header目录下创建header.vue文件，作为组件文件，在header.vue中加入所需元素。 第二步：引入组件文件 在需要引入组件的vue文件中引入组件文件，如在in...
挑战百日学习计划(小程序开发)-第9天(Vue组件component)
01-08
今天的主题：Vue之 组件component 1.component的创建（组件 既一个功能代码集，方便反复使用） 模块化开发的需求 语法：component(‘创建的元素’,{配置选项}) {{msg}} 创建的方法分两种： 1.局部创建 new Vue...
挑战百日学习计划(小程序开发)-第10天(Vue组件component 组件传值)
01-06
每天进步1%。虽然公司已经有了，团队也有几个人，...Vue组件传值：props[] props:[‘message’] prop是子组件用来接收父组件传递过来的数据的一个自定义属性 new Vue({ el:#app, data:{ }, components:{ pr
vue内置组件component--通过is属性动态渲染组件操作
10-15
补充知识：Vue组件的 `is` 特性 Vue.js 中的 `is` 特性是为了处理HTML语法规则的限制。例如，`<ul>` 标签只能直接包含 `<li>` 子元素，不能直接插入自定义组件。在这种情况下，我们可以通过在 `<li>` 元素上使用 `...
vue-component-creator-plugin:通过自动创建的 vue 组件和 vuex 模块简化您的前端开发
05-31
vue-component-creator 一个头脑风暴插件，用于创建带有 Sass 文件的单个文件 vue.js 组件并完成 vuex 模块。 这个插件做了几件事情，以简化您的开发经验。 安装 在插件设置中搜索Vue Component Creator 。 或者从...
vue-component
爱偷吃香蕉的萌猴子
11-08 1万+
vue-componentvue组件简介组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树 什么是组件 组件可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。组件的创建和注册基本步骤 Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件 示例
vue 引入外部js文件 - 配置component
羽下佳人的博客
09-10 2万+
1.main.js   2.importJs.js // 导入外部js import Vue from 'vue' // 导入外部js import Vue from 'vue' Vue.component('remote-script', { render: function (createElement) { var self = this; ...
vue的学习之路（Vue中组件(component )
程序员小王的博客
12-20 1481
组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不同业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。
Vue.js(四) 组件(component)
人不风流枉少年
12-22 7391
一：Vue组件简介 传统前端中一个网页应用是由很多.html文件组成，每个html文件又分为三部分，第一部分就是&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp
vue内置动态组件component使用详解
蓑笠翁
03-05 5万+
vue动态组件使用介绍，包括动态组件切换，动态组件切换数据缓存等
vue组件的3种书写形式
久如云漂泊
05-18 5万+
第一种 使用script标签<!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在
vue中component标签的使用
hdy119yaner的博客
08-01 3636
vue中component内置组件的基本使用
vue 内置组件 component 的用法
热门推荐
weixin_42333548的博客
06-01 9万+
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 ...
基于STM32+MPU6050+TB6612FNG的双轮平衡车运动控制系统含程序+原理图.zip
10-07
个人大四的毕业设计、或者课程设计，经导师指导并认且高分通过的设计项目。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 【资源说明】 适用人群：该项目属于高分优质项目，上传之前都本地运行验证过。适合小白、高校学生、教师、科研人员、公司员工下载学习借鉴使用。 用途：学习借鉴，也可在此基础上二次开发，当然也可以直接用于课设、作业、毕设、实际项目等。 技术支持：关于项目的技术细节或更详细的介绍，可以私信与我沟通，或看项目内的项目说明(若有)、代码等，很乐意交流学习。 【特别强调】 若自己基础实在太差，自己不懂运行，可以与我私聊，可远程教学指导。当然也可以做项目二次开发和定制。
【电力系统】基于Benders分解算法解决混合整数规划问题机组组合问题附Matlab代码.rar
最新发布
10-07
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
vue动态组件component
11-17
Vue中的动态组件可以通过`<component>`标签来实现，通过`is`属性来指定要渲染的组件。当`is`属性的值发生变化时，`<component>`标签会自动销毁旧组件并创建新组件。 以下是一个简单的例子，通过点击按钮来动态切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值