这个好像比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:;
    padding:;
    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:;
    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:;
    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入门第一课的更多相关文章

  1. Asp.Net Web API 2(入门)第一课

    Asp.Net Web API 2(入门)第一课   前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...

  2. 免费的 Vue.js 入门与进阶视频教程

    这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...

  3. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  4. Vue.js入门（一）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...

  5. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

  6. Vue.js 入门：从零开始做一个极简 To-Do 应用

    Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言  学习 Vue ...

  7. emacs 入门第一课：Emacs里的基本概念

    Table of Contents 无聊的开场白 buffer(缓冲区) window(窗口)与frame Emacs的mode Emacs Lisp 函数function.命令command.键绑定 ...

  8. 前端架构之路：使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

  9. Vue.js入门系列（一）

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

随机推荐

  1. Mac下安装Angular报错处理

    安装 Angular CLI 命令: sudo npm install -g @angular/cli 打印如下错误:(权限问题) gyp WARN EACCES user "root&qu ...

  2. laravel5.5契约

    无规矩不成方圆, Laravel 的契约是一组定义框架提供的核心服务的接口,规定了实现该接口的规范. 为什么要使用接口 首先,让我们来看一些高耦合缓存实现的代码.如下: <?php namesp ...

  3. Ubuntu14.0.4系统如何获取root权限

    Ubuntu14.0.4系统如何获取root权限 | 浏览:9684 | 更新:2014-08-21 10:38 7 分步阅读 本文主要讲解如何简单实用命令获取root权限 工具/原料 Ubuntu1 ...

  4. UR官网特效

    <!DOCTYPE html>                              <!--申明文档类型:html--> <html lang="en&q ...

  5. 跟着学！教你开发第一个Java程序

    今天我们的目标是开发人生中的第一个Java程序,虽然可能会很简单,但是这小小的一步却是跨入IT行业的一大步!下面我们来一起来仔细的了解开发的流程. 准备工作 1,作为一名准程序猿自备一台电脑那是必不可 ...

  6. 记录下MoKee编译过程

    纯属记录帖 关注和了解这个rom有段时间了. 最近有需要了解odex,折腾了几天还是在坑里. 索性,先编译下MoKee看看. 之前make过 4.2 和 5.1 ,刷到模拟器和N5里. 编译教程可以参 ...

  7. 利用socket.io构建一个聊天室

    利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...

  8. 每天一个Linux命令（9）：cp命令

    cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将单个源文件复制成一个指定文件名的具体的文件或一个已经存在的目录下.cp命令还支持同时复制多个文件,当一次复制多个文件时,目标文 ...

  9. hnust py road

    问题 C: Py Road 时间限制: 1 Sec  内存限制: 128 MB提交: 125  解决: 34[提交][状态][讨论版] 题目描述 Life is short,you need Pyth ...

  10. [C++] 数据结构应用——链表

    C++ 数据结构应用--链表 代码已经封装成class啦,方便使用. 头文件:Linklist.h #include <iostream> /*********************** ...