Skip to content

Instantly share code, notes, and snippets.

@mezigh

mezigh/index.html

Created June 10, 2015 22:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mezigh/73b15afc16c95475beb4 to your computer and use it in GitHub Desktop.
Save mezigh/73b15afc16c95475beb4 to your computer and use it in GitHub Desktop.
Download ZIP
Vue JS COMPONENTS Vue JS COMPONENTS // source http://jsbin.com/yodade
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta name="description" content="Vue JS COMPONENTS">
<script src="http://vuejs.org/js/vue.js"></script>
<meta charset="utf-8">
<title>Vue JS COMPONENTS</title>
<style id="jsbin-css">
.parent {
background: rgba(0, 0, 0, .3);
padding: 1em;
text-align: center;
color: purple;
}
.inc {
background: rgba(0, 0, 0, .3);
padding: 1em;
color: yellow;
}
.result {
padding: 1em;
background: #333;
color: greenyellow;
text-align: center;
}
h1,
h2,
h3 {
}
p {
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<div class="parent row" id="demo">
<div class="col-sm-12">
<h1>{{title}}</h1>
<div class="inc col-sm-6" v-component="inc-component"></div>
<div class="result col-sm-6" v-component="sub-component"></div>
</div>
</div>
</div>
<script id="jsbin-javascript">
console.clear();
var SubComponent = Vue.extend({
data: function() {
return {
title: 'Stand-Alone-Component',
caract: [
"Sub1",
"Sub2",
"Sub3"
]
};
},
template: "<div><h3>{{title}}</h3><p v-repeat='c: caract'>{{c}}</p><p></p></div>",
methods: {
subFn: function(str) {
return str + " and that's allright !";
}
}
});
var master = new Vue({
el: "#demo",
data: {
title: "View-Model-Master",
user: {
name: 'Foo Bar',
email: 'foo@bar.com'
},
morph: {
type: "Parent",
state: "active"
}
},
components: {
"inc-component": {
data: function() {
return {
title: 'Master-Component',
persons: ["mezigh", "Catherine","mi-claude"]
};
},
template: "<div><h3>{{title}}</h3><p v-repeat='pers: persons'>{{pers}}</p></div>"
},
"sub-component": SubComponent
}
});
</script>
<script id="jsbin-source-css" type="text/css">.parent {
background: rgba(0, 0, 0, .3);
padding: 1em;
text-align: center;
color: purple;
}
.inc {
background: rgba(0, 0, 0, .3);
padding: 1em;
color: yellow;
}
.result {
padding: 1em;
background: #333;
color: greenyellow;
text-align: center;
}
h1,
h2,
h3 {
}
p {
text-align: left;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
var SubComponent = Vue.extend({
data: function() {
return {
title: 'Stand-Alone-Component',
caract: [
"Sub1",
"Sub2",
"Sub3"
]
};
},
template: "<div><h3>{{title}}</h3><p v-repeat='c: caract'>{{c}}</p><p></p></div>",
methods: {
subFn: function(str) {
return str + " and that's allright !";
}
}
});
var master = new Vue({
el: "#demo",
data: {
title: "View-Model-Master",
user: {
name: 'Foo Bar',
email: 'foo@bar.com'
},
morph: {
type: "Parent",
state: "active"
}
},
components: {
"inc-component": {
data: function() {
return {
title: 'Master-Component',
persons: ["mezigh", "Catherine","mi-claude"]
};
},
template: "<div><h3>{{title}}</h3><p v-repeat='pers: persons'>{{pers}}</p></div>"
},
"sub-component": SubComponent
}
});
</script></body>
</html>
Raw
jsbin.yodade.css
.parent {
background: rgba(0, 0, 0, .3);
padding: 1em;
text-align: center;
color: purple;
}
.inc {
background: rgba(0, 0, 0, .3);
padding: 1em;
color: yellow;
}
.result {
padding: 1em;
background: #333;
color: greenyellow;
text-align: center;
}
h1,
h2,
h3 {
}
p {
text-align: left;
}
Raw
jsbin.yodade.js
console.clear();
var SubComponent = Vue.extend({
data: function() {
return {
title: 'Stand-Alone-Component',
caract: [
"Sub1",
"Sub2",
"Sub3"
]
};
},
template: "<div><h3>{{title}}</h3><p v-repeat='c: caract'>{{c}}</p><p></p></div>",
methods: {
subFn: function(str) {
return str + " and that's allright !";
}
}
});
var master = new Vue({
el: "#demo",
data: {
title: "View-Model-Master",
user: {
name: 'Foo Bar',
email: 'foo@bar.com'
},
morph: {
type: "Parent",
state: "active"
}
},
components: {
"inc-component": {
data: function() {
return {
title: 'Master-Component',
persons: ["mezigh", "Catherine","mi-claude"]
};
},
template: "<div><h3>{{title}}</h3><p v-repeat='pers: persons'>{{pers}}</p></div>"
},
"sub-component": SubComponent
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment