html5 communication,communication5.html

Document

*{

margin:0;

padding:0;

}

body{

font:15px/1.3 'Open Sans', sans-serif;

color: #5e5b64;

text-align:center;

}

a, a:visited {

outline:none;

color:#389dc1;

}

a:hover{

text-decoration:none;

}

section, footer, header, aside, nav{

display: block;

}

/*-------------------------

The menu

--------------------------*/

nav{

display:inline-block;

margin:60px auto 45px;

background-color:#5597b4;

box-shadow:0 1px 1px #ccc;

border-radius:2px;

}

nav a{

display:inline-block;

padding: 18px 30px;

color:#fff !important;

font-weight:bold;

font-size:16px;

text-decoration:none !important;

line-height:1;

text-transform: uppercase;

background-color:transparent;

-webkit-transition:background-color 0.25s;

-moz-transition:background-color 0.25s;

transition:background-color 0.25s;

}

nav a:first-child{

border-radius:2px 0 0 2px;

}

nav a:last-child{

border-radius:0 2px 2px 0;

}

nav.home .home,

nav.projects .projects,

nav.services .services,

nav.contact .contact{

background-color:#e35885;

}

p{

font-size:22px;

font-weight:bold;

color:#7d9098;

}

p b{

color:#ffffff;

display:inline-block;

padding:5px 10px;

background-color:#c4d7e0;

border-radius:2px;

text-transform:uppercase;

font-size:18px;

}

{{value}}

{{value}}

change vaule

Vue.component('navbox',{

template:'#nav-box',

props:['value'],

data: function(){

return {active: 'home'}

}

})

Vue.component('mynav',{

template:'#nav-templ',

props:['value'],

created:function(){

// this.show();

},

methods:{

show:function(){

alert(this.value);

},

changeValue:function(){

var random = Math.random();

// this.$emit('input',random);

this.$parent.$emit('input',random);

}

}

})

// Creating a new Vue instance and pass in an options object.

var demo = new Vue({

el: '#main',

data: function(){

return {id: '1111'}

}

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史