这个好像比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. 批量修改Linux文件夹下所有文件大小写

    小写转大写: [zengs@SYS SOS]$ for cpplive in *; do mv $cpplive `echo $cpplive|tr [a-z] [A-Z]`; done 大写转小写: ...

  2. 将有效慢日志转存到数据库v2

    import re import sys import getopt import MySQLdb from subprocess import call import os host='10.76. ...

  3. Python写的计算器程序（主要目的在于熟悉下正则表达式）

    import res = '1-2*((60-30-(-40/5)*(9-2*5/3-7/3*99/4*2998-10*568/14.3))+(-4*3)/16-3)'s2 = 1-2*((60-30 ...

  4. （原）Unreal渲染模块 管线 - 着色器(1)

    @author: 白袍小道 转载悄悄说明下 随缘查看,施主开心就好 说明: 本篇继续Unreal搬山部分的渲染模块的Shader部分, 主要牵扯模块RenderCore, ShaderCore, RH ...

  5. Leetcode 659.分割数组为连续子序列

    分割数组为连续子序列 输入一个按升序排序的整数数组(可能包含重复数字),你需要将它们分割成几个子序列,其中每个子序列至少包含三个连续整数.返回你是否能做出这样的分割? 示例 1: 输入: [1,2,3 ...

  6. [部署开发环境]部署django的生成环境nginx+uwsgi+django

    #教程 # ubuntu部署django项目 # 部署准备 - ubuntu操作系统 -- vagrant虚拟 - Nginx服务器 -- 安装在ubuntu的web服务器 - uWSGI应用协议服务 ...

  7. Android记事本开发02

    今天: 继续学习基础知识. 昨天: 学习了ADB工具的基本命令. Android项目的目录结构. AndroidManifest.xml Android应用程序的打包和安装 遇到的问题: 无.

  8. 201621123034 《Java程序设计》第14周学习总结

    作业14-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截 ...

  9. gulp-API介绍

    使用gulp,一般只需要用4个API:gulp.src(),gulp.dest(),gulp.task(),gulp.watch(). 1. gulp.src() 用来获取流的,但是要注意的是这个流里 ...

  10. GIS专业分析方法（待更新）

    遗传算法 核密度估计 http://blog.163.com/zhuandi_h/blog/static/1802702882012111092743556/ http://blog.csdn.net ...