vue--公有组件以及组件的使用和特点

QinXiao.Shou QinXiao.Shou     2022-10-01     189

关键词:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定义一个vue的管理区块,(MVVM中的View) -->
13 <div id="app">
14     <!-- <login></login> -->
15 
16     <template id="tlogin">
17         <div>
18             用户名: <input type="text">
19             密码: <input type="text">
20         </div>
21     </template> 
22 
23     <!--<script type="x-template" id="tlogin">
24             <div>
25                     用户名: <input type="text">
26                     密a码: <input type="text">
27             </div>
28         </script>-->
29 </div>
30 
31 
32 </body>
33 
34 <script>
35     //公有组件
36     //注意:
37     // 1.所有的模板代码都必须要有一个根标签
38     // 2.如果组件的名称如果首字母大写
39         // a.所有的字母全部小写
40         // b.如果首字母和内部如果也有大写将大写字母改为小写并且在这个字母之前加上一个"-"
41             //UserName  -> user-name 
42 
43     // 1.0将组件的定义与组成分两步来执行
44     // 定义:
45     // Vue.extend({
46     //     template:"组件的html代码"
47     // });
48     /*var login = Vue.extend({
49         template:"<h1>我是login</h1>"
50     });
51     // 注册:
52     // 参数一: 当前组成组件的名称
53     // 参数二: 组件对象
54     //Vue.component("login",login); // 向Vue中注册组件
55     Vue.component("login",login);
56    */
57 
58    //2.0组件的定义和组成一步到位
59    // 使用组件时候,一定要给组件一定要加上根标签 否则会报编译错误
60     /*Vue.component("login",{
61        template:"<h1>login</h1>"
62    });*/
63    
64    // 以上两种写template麻烦
65    //3.0组件的使用三 (!!!常用)
66    Vue.component("login",{
67        template:"#tlogin"
68    });
69 
70    //4.0 组件的使用四(了解即可)
71 //    Vue.component("login",{
72 //         template:"#tlogin"
73 //    });
74 
75 
76     // 实例化vue对象(MVVM中的View Model)
77     new Vue({
78         // vm控制的区块为id为app的div,此div中的所有vue指令均可以被vm解析
79         el:‘#app‘,
80         data:{
81         // 数据 (MVVM中的Model)   
82         },
83         methods:{
84             
85         }
86     })
87 </script>
88 </html>

 

vue复习全家桶

...、v-if和v-show  (vue常用方法以及面试问题)四、父子组件通信、非父子组件通信  (vue2.0父子组件以及非父子组件如何通信)五、单个组件生命周期,父子组件,生命周期  (Vue生命周期和考点) Vue高级特性一、自... 查看详情

vue组件(代码片段)

  什么是组件:组件是可复用的vue实例,它的特点是独立、可复用且整体化。  为什么要组件化:为了实现功能模块的复用,高执行率,便于开发单页面复杂应用。  组件化带来的问题:组件状态管理(vuex);    ... 查看详情

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据一、父组件利用props往子组件传输数据父组件:<div><childv-bind:my-message="parentMsg"></child>//... 查看详情

自定义组件

参考技术A1、Vue中如何创建全局组件?第一步:创建组件构造器第二步:注册已经创建好的组件第三步:使用注册好的组件2、注册组件包含两种方法3、弊端此时的模板是用模板字符串编写的,那么将不会有文本提示词,不太方... 查看详情

注册全局组件和局部组件

...考技术A①创建一个PageTools文件夹并同时创建一个index.vue组件文件②就和我们平时使用普通组件一样,先在使用该组件的文件中导入,在compoents中注册,然后在结构中使用我们的业务组件一般都定义成了局部组件,使用的时候需要... 查看详情

vue基础之基本指令以及使用(代码片段)

组件组件的定义:为例拆分Vue实例的代码,能够以不同的组件划分出不同的功能,需要什么样的功能就调用什么样的组件。组件的创建全局组件模板的创建使用vue.extend()创建组件模板varcom=Vue.extend(//模板组件中只能有一个根节点t... 查看详情

01-集群环境及组件介绍

...标是促进完善组件和工具的生态系统,以减轻应用程序在公有云或私有云中运行的负担。Kubernetes特点可移植:支持公有云,私有云,混合云,多重云(multi-cloud)可 查看详情

vue之component

因为组件是可复用的Vue实例,所以它们与newVue接收相同的选项,例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。组件基础:全局组件:可以在任何(根)实例中使用的组件;局部组... 查看详情

vue之$children和$parent,provide和inject用法以及使用style的方式显示背景图片

参考技术A1.使用$parent可以获取父组件没传的属性和方法第一步:父组件定义一个数据第二步:$parent和$children的区别是$parent方法在created里调用,$children方法在mounted里调用2.通过provide和inject可以父传子也可以爷爷传孙子 可以... 查看详情

bootstrap和vue的区别是啥?

...适应平板电脑和PC。缺点在于,缺少一套有力的成体系的组件,我在实际使用时,发生了作用域冲突的问题,如果没有整理好一整套组件。Vue:特点在于,站在了React的肩膀上,许多方面更出色了:1.数据的双向绑定,数据改,页... 查看详情

支持复杂场景的vue和react集成引用的js插件

...,Vue做的封装更多,所以大多数的难度都是集中在react的组件引用vue组件的过程中请参考https://github.com/devilwjp/vuereact-for-vuecli3-demo请参考https://github.com/devilwjp/vuereact-for-cra-demo由于reacthooks的取名规范是use开头,所以将use开头的方法... 查看详情

vue介绍和安装,创建项目,组件使用,指令(代码片段)

...3.项目目录详解4.项目代码详解4.1入口文件`main.js`5.组件5.1vscodev 查看详情

vue介绍和安装,创建项目,组件使用,指令(代码片段)

...3.项目目录详解4.项目代码详解4.1入口文件`main.js`5.组件5.1vscodev 查看详情

vue介绍和安装,创建项目,组件使用,指令(代码片段)

...3.项目目录详解4.项目代码详解4.1入口文件`main.js`5.组件5.1vscodev 查看详情

如何在 Vuetify 组件中使用 Vue v-model 绑定以及计算属性和 Vuex?

】如何在Vuetify组件中使用Vuev-model绑定以及计算属性和Vuex?【英文标题】:HowtouseVuev-modelbindinginVuetifycomponentstogetherwithcomputedpropertiesandVuex?【发布时间】:2020-04-1718:03:50【问题描述】:我正在尝试将v-radio-group与来自Vuex的计算值结... 查看详情

vue引入全局组件和局部组件的区别以及全局注册公共函数(代码片段)

一,先看看全局组件的引用,就拿最常用的全局的暂无数据来举例,看看全局的是如何实现的。Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index.js用来导出这个组件。&l... 查看详情

一张图说清楚vue3父子组件传值,以及props可否改的本质问题

...、事件等。内部成员一般都是私有的(其实也可以设置为公有),调用者不可以直接访问内部成员,而是要通过属性来访问内部成员。属性是内部成员的安全通道,可以限制访问方式,比如只读;也可以设置关卡,比如年龄>18... 查看详情

vue3的组件通信以及ref的使用(代码片段)

一.组件通信1.props=>父向子传值props主要用于父组件向子组件通信。在父组件中通过用:msg=“msg”绑定需要传给子组件的属性值,然后再在子组件中用props接收该属性值。方法一普通方式://父组件传值<child:msg1=... 查看详情