Vue.js入门第一课

vue

这个好像比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;

}

以上是 Vue.js入门第一课 的全部内容, 来源链接: utcz.com/z/375228.html

回到顶部