您的位置：首页 > 产品设计 > UI/UE

Vue.js入门第一课

2017-03-09 14:16 246 查看

这个好像比ANGULAR.JS要轻量一些，看看。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="demo.css" />
</head>
<body>
<!--this is my View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message" />
<button v-on:click="greet">Greet</button>
<button @click="say('hi')">Hi</button>
<h1 v-if="yes"> Yes!</h1>
<h1 v-show="no"> No!</h1>
<h1 v-if="age >= 34"> Age: {{ age }}</h1>
<h1 v-else> Name: {{ name }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name  }}</td>
<td>{{ person.age  }}</td>
<td>{{ person.sex  }}</td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascript:void(n)" v-bind:class="activeNumber === n ?'active': ''">
{{ n }}
</a>
</li>
</ul>
</div>
</body>
<script src="vue.min.js"></script>
<script>
//this is my model
var exampleData = {
message: 'Hello World!',
yes: true,
no: false,
age: 28,
name: 'keepfool',
sex: 'Male',
people: [{
name: 'Bill',
sex: 'Male'
}, {
name: 'Tracy',
sex: 'Female'
}, {
name: 'Tony',
sex: 'Male'
}, {
name: 'Chris',
sex: 'Female'
}],
activeNumber: 1,
pageCount: 10
};
// create a vue instance or "viewmodel"
// it connect view and model
var vueInstance = new Vue({
el: "#app",
data: exampleData,
methods:{
greet: function() {
alert(this.message);
},
say: function(msg) {
alert(msg);
}
}
})
</script>
</html>

* {
margin: 0;
padding: 0;
box-sizing: border-box
}

html {
font-size: 12px;
font-family: Ubuntu, simHei, sans-serif;
font-weight: 400
}

body {
font-size: 1rem
}

table,
td,
th {
border-collapse: collapse;
border-spacing: 0
}

table {
width: 100%
}

td,
th {
border: 1px solid #bcbcbc;
padding: 5px 10px
}

th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer
}

tr:nth-of-type(odd) {
background: #fff
}

tr:nth-of-type(even) {
background: #eee
}

fieldset {
border: 1px solid #BCBCBC;
padding: 15px;
}

input {
outline: none
}

input[type=text] {
border: 1px solid #ccc;
padding: .5rem .3rem;
}

input[type=text]:focus {
border-color: #42b983;
}

button {
outline: none;
padding: 5px 8px;
color: #fff;
border: 1px solid #BCBCBC;
border-radius: 3px;
background-color: #009A61;
cursor: pointer;
}
button:hover{
opacity: 0.8;
}

#app {
margin: 0 auto;
max-width: 640px
}

.form-group {
margin: 10px;
}

.form-group > label {
display: inline-block;
width: 10rem;
text-align: right;
}

.form-group > input,
.form-group > select {
display: inline-block;
height: 2.5rem;
line-height: 2.5rem;
}

.text-center{
text-align: center;
}

.pagination {
display: inline-block;
padding-left: 0;
margin: 21px 0;
border-radius: 3px;
}

.pagination > li {
display: inline;
}

.pagination > li > a {
position: relative;
float: left;
padding: 6px 12px;
line-height: 1.5;
text-decoration: none;
color: #009a61;
background-color: #fff;
border: 1px solid #ddd;
margin-left: -1px;
list-style: none;
}

.pagination > li > a:hover {
background-color: #eee;
}

.pagination .active {
color: #fff;
background-color: #009a61;
border-left: none;
border-right: none;
}

.pagination .active:hover {
background: #009a61;
cursor: default;
}

.pagination > li:first-child > a .p {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}

.pagination > li:last-child > a {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航