vue组件大集合 component

iaiai

浏览: 2203955 次
性别:
来自: 北京

最近访客更多访客>>

liuwuhen

jujkjj123

liunancun

jAmEs_

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
HTML5
web前端

　　vue组件分为全局组件、局部组件和父子组件，其中局部组件只能在el定义的范围内使用，全局组件可以在随意地方使用，父子组件之间的传值问题等。

Vue.extend 创建一个组件构造器
template:'' 组件要显示的内容
component('',); 　注册组件，接收两个参数，第一个参数用来使用的标签，第二个参数标识要显示内容的构建器

详情请看vue的API：　　http://v1-cn.vuejs.org/guide/components.html

一、简单的组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script type="text/javascript">
        var AAA = Vue.extend({        //创建一个组件构造器
            template:'<strong>123</strong>'    //组件要显示的内容
        });
        //var a = new AAA();    相当于又new了一个Vue，具有它的所有属性(一般不用这种方法)
        Vue.component('aaa',AAA);    //注册组件
        new Vue({
            el:'#box',
            data:{
                bSign:true
            }
        })
    </script>
</html>

二、给组件添加事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body>
        <div id="box">
            <aaa></aaa>
        </div>
    </body>
    <script type="text/javascript">
        Vue.component('aaa',{
            data(){
                return {
                    msg:'我是p标签'
                };
            },
            methods:{
                sj:function(){
                    alert(111);
                }
            },
            template:'<p @click="sj()">{{msg}}</p>'    //接收的data值必须是函数的形式，函数必须返回一个对象
        })
        new Vue({
            el:'#box',
            data:{
                
            },
        })
    </script>
</html>

三、vue动态组件--选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
    </head>
    <body id="box">
        <input type="button" @click="s='suning'" value="选项卡1" /><!--is后面跟着组件的名称 -->
        <input type="button" @click="s='saning'" value="选项卡2" />
        <comment :is='s'></comment>
    </body>
    <script type="text/javascript">
         new Vue({
             el:'#box',
             data:{
                 s:'suning'
             },
             components:{
                 'suning':{
                     template:'<p>选项卡1</p>'
                 },
                 'saning':{
                     template:'<p>选项卡2</p>'
                 }
             },
         })
    </script>
</html>

四、路由的嵌套

<html>
    <head>
        <title>iaiai - qq:176291935</title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-resource.js" ></script>
        <script type="text/javascript" src="js/vue-router.js" ></script>
    </head>
    <style>
        .v-link-active{
            color: red;
        }
    </style>
    <body>
        <div id="box">
            <ul>
                <li>
                    <a v-link="{path:'/home'}">首页</a>
                </li>
                <li>
                    <a v-link="{path:'/news'}">新闻</a>
                </li>
            </ul>
            <div>
                <router-view></router-view><!-- 展示内容-->
            </div>
        </div>
        <template id="home">
            <h3>home</h3>
            <a v-link="{path:'/home/login'}">登陆</a>
            <a v-link="{path:'/home/reg'}">注册</a>
            <router-view></router-view>
        </template>
        <template id="news">
            <h3>新闻</h3>
            <div>
                <a v-link="{path:'/news/detail/001'}">新闻001</a>
                <a v-link="{path:'/news/detail/002'}">新闻002</a>                
            </div>
            <router-view></router-view>
        </template>
        <template id="detail">
            <!--{{$route | json}}-->
            {{$route.params | json}}　　　　<!-- 关于$route请看五，$route的参数 -->
        </template>
    </body>
    <script>
        var App = Vue.extend();
        var Home = Vue.extend({
            template:'#home'
        });
        var News = Vue.extend({
            template:'#news'
        });
        var Detail = Vue.extend({
            template:'#detail'
        });
        var router = new VueRouter();
        router.map({
            'home':{
                component:Home,
                subRoutes:{
                    'login':{
                        component:{
                            template:'你点击了登陆'
                        }
                    },
                    'reg':{
                        component:{
                            template:'你点击了注册'
                        }
                    }
                }
            },
            'news':{
                component:News,
                subRoutes:{
                    '/detail/:id':{
                        component:Detail
                    }
                    
                }
            },
        });
        router.redirect({
            '/':'/home'
        })
        router.start(App,'#box');
    </script>
</html>

五、$route的参数

$route中包含路由的其他信息
$route.params 得到当前的参数
$route.path 得到当前的路径
$route.query 得到数据

分享到：

Ubuntu下deb包的安装方法 | 配合Masonry实现TableViewCell的高度自适 ...

2017-09-07 10:00
浏览 577
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

vue组件大集合 component

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

vue组件大集合 component

评论

发表评论

相关推荐

小程序textarea完美填坑

微信小程序页面跳转 的几种方式

vue import 传入变量

vue配置font-awesome5的方法步骤

在idea里使用vue,设置tab缩进为4

为什么要使用computed而不是data获取vuex中的state

理解vuex -- vue的状态管理模式

Javascript(es2016) import和require用法和区别

vue中修改了数据但视图无法更新的情况

Electron安装 for mac

初探和实现websocket心跳重连

「Javascript」搞定JS面试——跨域问题

js Swiper移动设备触控滑块的框架

CSS3控制文字只显示一行超出部分显示省略号

node js搭建和实例

jquery.bootstrap.teninedialog.v3.js使用说明

好用的前端框架（更新中）

Data URI 和 MHTML

Web 前端开发者必知的9 个 CSS3 属性

css 设置元素背景为透明

最近访客更多访客>>

微信小程序页面跳转的几种方式