vue 控件component

最新推荐文章于 2024-01-16 09:05:49 发布
最新推荐文章于 2024-01-16 09:05:49 发布
阅读量129 收藏
点赞数
文章标签： javascript 设计模式 ViewUI
原文链接：http://www.cnblogs.com/otways/p/11372299.html
版权 
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
       <script>
       window.οnlοad=function(){
           //组件
           var myComp = Vue.extend({
               //模板：必须有一个根节点、
               template:'<h1>hello comPonent</h1>'
           })
           //规范命名 连接符 -
           Vue.component('hello',myComp);
           //方式二：
           Vue.component('my-component',{
               template:'<h2>张。。。</h2>'
           })
           new Vue({
            el: "#app",     
            data: {
                flag: 'my-tr',
                flag2: 'my-chenge1',
            },
            components:{
                'my-address': {
                    template:'<h2>张。。。</h2>'
                },
                'my-address2': {
                    template:"#myAddress2",
                    data:function(){
                        return {
                            title: "title",
                            list:[1,2,3,4]
                        }
                    }
                },
                'my-tab': {
                    template :"#myAddress3",
                    data:function(){
                        return {
                            tabtitil: ['标题一','标题二','标题三',],
                            tabContent: ['a','b','c'],
                            cur2: 1,
                        }
                    }
                },
                'my-tr':{
                    template :'#myAddress4'
                },
                'my-slot':{
                    template : '#myAddress5'
                },
                'my-chenge1':{
                    template:'<h1>{{x}}</h1>',
                    data:function(){
                        return {
                            x: Math.random()
                        }
                    }
                },
                'my-chenge2':{
                    template:'<h3>{{x}}</h3>',
                    data:function(){
                        return {
                            x: Math.random()
                        }
                    }
                }
            }
         })
       }
       </script>
       <style>
            ul,li {
                padding: 0;margin: 0
            }
            .tab-tit li {
                padding: 10px 15px;
                text-align: center;
                list-style: none;
                cursor: pointer;
                display: inline-block;
            }
            .tab-con li {
                padding: 10px 15px;
                text-align: center;
                list-style: none;
                cursor: pointer;
                display: inline-block;
            }
        </style>
        <template id="myaddress2">
            <div>
                <p>{{title}}</p>
                <ul>
                    <li v-for="(v,i) in list">{{v}}</li>
                </ul>
            </div>
        </template>
        <template id="myAddress3">
             <div>
                <ul class="tab-tit">
                    <li v-for="(v,i) in tabtitil" @click="cur2=i" :class="{active:cur2==i}">{{v}}</li>
                </ul>
                <ul class="tab-con">
                    <li v-for="(v,i) in tabContent" v-show="cur2===i">{{v}}</li>
                </ul>
            </div>
        </template>
        <template id="myAddress4">
            <div>
                <tr>
                    <li>vvvvv</li>
                </tr>
            </div>
        </template>
        <template id="myAddress5">
            <div>
                <p>my slot</p>
                <slot name="s2"></slot>
                <p>张。。。</p>
                <slot name="s2"></slot>
            </div>
        </template>
    </head>

    <body>
        <div id="app">
           <hello></hello>
           <my-component> </my-component>
           <my-address></my-address>
           <my-address2></my-address2>
           <my-tab></my-tab>
           <!-- 组件的高级用法 -->
            <table border="2" padding = "100px">
                <!-- <my-tr></my-tr> -->
                <tr is="my-tr"></tr>
            </table>
            <!-- 插槽 -->
            <!-- 设计模式：模板模式 -->
            <my-slot>
                <ul slot="s1">
                    <li>asccc</li>
                </ul>
                <ul slot="s2">
                        <li>asccc</li>
                    </ul>
            </my-slot>
            <!-- 动态组件 -->
            <button @click="flag='my-tab'">my-tab</button>
            <button @click="flag='my-tr'">my-tr</button>
            <!-- is   data变量 -->
            <componet :is="flag"></componet>
            
            <!-- 状态 my-chenge1 -->
            <!-- 动态组件 -->
            <button @click="flag2='my-chenge1'">my-chenge1</button>
            <button @click="flag2='my-chenge2'">my-chenge2</button>
            <!-- is   data变量 -->
            <!-- <componet :is="flag2"></componet> -->

            <!-- 切换组建状态不变 缓存非活动组件 -->
            <keep-alive>
                <component :is="flag2"></component>
            </keep-alive>
        </div>
    </body>
</html>

　　

< html >
< head >
< title ></ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script >
< script >
window. onload= function(){
//组件
var myComp = Vue. extend({
//模板：必须有一个根节点、
template: '<h1>hello comPonent</h1>'
})
//规范命名 连接符 -
Vue. component( 'hello', myComp);
//方式二：
Vue. component( 'my-component',{
template: '<h2>张。。。</h2>'
})
new Vue({
el: "#app",
data: {
flag: 'my-tr',
flag2: 'my-chenge1',
},
components:{
'my-address' : {
template: '<h2>张。。。</h2>'
},
'my-address2' : {
template: "#myAddress2",
data : function(){
return {
title: "title",
list:[ 1, 2, 3, 4]
}
}
},
'my-tab' : {
template : "#myAddress3",
data : function(){
return {
tabtitil: [ '标题一', '标题二', '标题三',],
tabContent: [ 'a', 'b', 'c'],
cur2: 1,
}
}
},
'my-tr' :{
template : '#myAddress4'
},
'my-slot' :{
template : '#myAddress5'
},
'my-chenge1' :{
template: '<h1>{{x}}</h1>',
data : function(){
return {
x: Math. random()
}
}
},
'my-chenge2' :{
template: '<h3>{{x}}</h3>',
data : function(){
return {
x: Math. random()
}
}
}
}
})
}
< / script >
< style >
ul, li {
padding: 0; margin: 0
}
.tab-tit li {
padding: 10px 15px;
text-align: center;
list-style: none;
cursor: pointer;
display: inline-block;
}
.tab-con li {
padding: 10px 15px;
text-align: center;
list-style: none;
cursor: pointer;
display: inline-block;
}
< / style >
< template id= "myaddress2" >
< div >
< p >{{title}} </ p >
< ul >
< li v-for= "(v,i) in list" >{{v}} </ li >
</ ul >
</ div >
</ template >
< template id= "myAddress3" >
< div >
< ul class= "tab-tit" >
< li v-for= "(v,i) in tabtitil" @click= "cur2=i" :class= "{active:cur2==i}" >{{v}} </ li >
</ ul >
< ul class= "tab-con" >
< li v-for= "(v,i) in tabContent" v-show= "cur2===i" >{{v}} </ li >
</ ul >
</ div >
</ template >
< template id= "myAddress4" >
< div >
< tr >
< li >vvvvv </ li >
</ tr >
</ div >
</ template >
< template id= "myAddress5" >
< div >
< p >my slot </ p >
< slot name= "s2" ></ slot >
< p >张。。。 </ p >
< slot name= "s2" ></ slot >
</ div >
</ template >
</ head >

< body >
< div id= "app" >
< hello ></ hello >
< my-component > </ my-component >
< my-address ></ my-address >
< my-address2 ></ my-address2 >
< my-tab ></ my-tab >
<!-- 组件的高级用法 -->
< table border= "2" padding = "100px" >
<!-- <my-tr></my-tr> -->
< tr is= "my-tr" ></ tr >
</ table >
<!-- 插槽 -->
<!-- 设计模式：模板模式 -->
< my-slot >
< ul slot= "s1" >
< li >asccc </ li >
</ ul >
< ul slot= "s2" >
< li >asccc </ li >
</ ul >
</ my-slot >
<!-- 动态组件 -->
< button @click= "flag='my-tab'" >my-tab </ button >
< button @click= "flag='my-tr'" >my-tr </ button >
<!-- is data变量 -->
< componet :is= "flag" ></ componet >
 
<!-- 状态 my-chenge1 -->
<!-- 动态组件 -->
< button @click= "flag2='my-chenge1'" >my-chenge1 </ button >
< button @click= "flag2='my-chenge2'" >my-chenge2 </ button >
<!-- is data变量 -->
<!-- <componet :is="flag2"></componet> -->

<!-- 切换组建状态不变 缓存非活动组件 -->
< keep-alive >
< component :is= "flag2" ></ component >
</ keep-alive >
</ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/otways/p/11372299.html

weixin_30781433
关注
vue在动态html中渲染组件,vue内置组件component--通过is属性动态渲染组件操作
weixin_30562025的博客
06-08 1231
我就废话不多说了，大家看代码吧~{{msg}}{{msg}}{{msg}}//局部定义三个组件const Home = {template:"#home",data(){return{msg:"这里是home组件"}}}const Fenlei = {template:"#fenlei",data(){return{msg:"这里是fenlei组件"}}}const My = {template:...
vue使用vue-calendar-component日历组件（可直接使用）
qq_43557395的博客
06-15 2287
vue-calendar-component
Vue组件
小牛牛的博客
03-03 755
全局组件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
vue onload传参 赋值_Vue如何刷新当前页面？我是这样做的，你呢？
weixin_39605345的博客
12-12 3280
点击上方“执行上下文”，选择“置顶公众号”关键时刻，第一时间送达！function a(a,b)和function b({a,b})的区别 // 前者在传参的时候可以是单独的传参方式，也可以是键值对的方式如：a(1,2)Ora({a:1,b:2})// 后者传参的时候必须以键值对的方式出现如：b({a:1,b:2})vue如何动态加载组件 1、使用import导入组件，可以获取到组件le...
小程序问题：封装公共组件的onLoad方法不生效
m0_74802419的博客
11-06 7075
于是就出现了页面数据不能加载的问题，在一番打印查找之后，发现是组件中onLoad方法一直没有执行，导致内部的方法没有调用，表格里的数据没有拿到。然后在Component构造器的lifetimes配置项中，使用与onLoad方法同等作用的attached 方法，发现内部的方法成功调用，拿到表格数据。uni中，在页面当中引用公共组件时onLoad方法不执行 ，可以使用vue自带生命周期函数created、mounted ，或者使用$refs获取组件中的方法并调用来解决。// 组件所在页面的生命周期声明对象。
【Vue常用控件详细介绍】
最新发布
cz88888888666的博客
01-16 1837
此外，Vue 生态系统中还有很多基于 Vue 的 UI 组件库，如 Vuetify、Element UI、Ant Design Vue 等，提供了丰富的预制组件，可以快速地用于构建界面。Vue.js 是一个流行的前端 JavaScript 框架，常用于开发单页应用（SPA），Vue 提供了一套核心的概念和工具，让开发者可以通过组件化的方式构建大型应用，Vue 的控件通常指的是在 Vue 中的组件（Component），组件是 Vue 的基本构建块。Vue 组件通常定义为单文件组件（
vue配合gojs实现工业组态绘制
qq_37656005的博客
12-03 4165
vue配合gojs实现工业组态绘制 通过从左侧拖拽区拖拽图片到中间画布区，之后可对此图标进行大小尺寸调整，旋转，删除，绑定等操作进行合理布局 拖拽、复制、粘贴、选择、鼠标右键事件、剪切、文本编辑、删除、撤销、查看信息、模板、数据源绑定、事件处理程序、调色板、自动布局、添加画布或者节点的监听事件
vue 各种组件定义及父子之间控件传值
04-20
Vue.component('my-component', { template: '这是我的组件</div>' }); ``` 2. **定义模板**：组件的HTML结构通常在`template`选项中定义，也可以使用ES6的字符串模板或单文件组件（.vue文件）。 3. **数据和...
vue-happy-scroll:基于vue2.0实现的滚动条插件。scroll component for vue2.0
04-14
vue happy scroll Chrome Firefox Safari Edge IE √ √ √ √ 9 √10 √11 √ 当前版本不支持移动端(还未在移动端进行过测试)。The current version not support SP(I haven't tested it on the smartphone yet). ...
VUE笔记
qq_27917755的博客
07-15 518
vue笔记
[暑假]Vue生命周期-笔记
IDApprentice的博客
08-19 6855
onload 事件 (加载事件) 会在页面或图像加载完成后立即发生onload事件 通常用于 元素, 在页面完全载入后(包括图片, CSS文件等等). 然后执行脚本代码例子:将真实DOM放入页面的这一步中的放入, 官方的专业术语叫 挂载Vue完成模板解析并把初始的(也就是第一次解析的)真实的DOM元素放入页面后(完成挂载) 调用mounted函数拓展:Init : 全称: initialization 翻译:初始化。
vue 内置组件 component 的用法
热门推荐
weixin_42333548的博客
06-01 9万+
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 ...
Vue onload事件的坑
XIONGDA的博客
11-13 4507
先占个位，大概就是asnyc同步异步的问题 等我有时间再来写，开个新坑，基于webgis的矢量数据管理系统
vue内置动态组件component使用详解
蓑笠翁
03-05 5万+
vue动态组件使用介绍，包括动态组件切换，动态组件切换数据缓存等
Vue组件之间的三种数据传递方式
Queen_zdd的博客
04-15 6373
Vue组件之间有三种数据传递方式：Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。1.props:子组件的模板内并不能直接使用父组件的数据，所以子组件需要用props选项来获取父组件的数据。1.动态语法：用v-bind将动态props绑定到父组件的数据，父组件的数据发生改变，子组件也会随之改变&lt;div id="app"...
微信小程序 Component为什么不触发onLoad？
77今天也学习了的博客
03-22 2903
涉及到component和Page的区别 Component不会触发onLoad方法。生命周期函数的触发需要依赖lifetimes: Component({ properties: { }, data: { }, lifetimes: { attached: function(options) { // 在组件实例进入页面节点树时执行 console.log(options); } }, }) 参考： ...
vue时间控件精确到秒
10-29
Vue.component('datetime', Datetime); 接下来，在需要使用时间控件的组件中，可以通过引入datetime组件并在模板中使用来实现时间控件的功能。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值