这个好像比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. android 获取图片

    Android获取手机或者内存卡里面的图片有两种方式 1.这是通过一种action Intent intent=new Intent(); intent.setAction(Intent.ACTION ...

  2. static任我行- 为人不注意的static

    前几天一直在想,static方法如果没有被调用,会不会分配内存的问题,查了一下资料,终于得到了一个官方的说法了. static 方法调用:使用比较频繁的时候使用,像数据库连接串,Connection ...

  3. 滑动菜单栏之开源项目SlidingMenu的使用

    一.SlidingMenu简介 相信大家对SlidingMenu都不陌生了,它是一种比较新的设置界面或配置界面的效果,在主界面左滑或者右滑出现设置界面效果,能方便的进行各种操作.很多优秀的应用都采用了 ...

  4. 程序员必看：如何降低APP软件开发的成本？

    程序员必看:如何降低APP软件开发的成本? 作为一名曾经的程序猿,一直想写一点东西给大家分享一下,今天终于动笔了,写写我们在开发的过程中怎样才能更快更好的进行开发,降低app开发成本.无论是个人开发者 ...

  5. Git上手：四种常见的Git协同工作方式

    1.集中式工作流 适用人群:开发小团队(4-5人),习惯使用SVN工具的小团队. 工作方式:团队组长创建远程仓库,创建一个master分支,组员可读可写. 每个开发人员都git clone远程仓库到本 ...

  6. Buildroot ipa image

    参考: https://github.com/csmart/ironic-python-agent/tree/buildroot/imagebuild/buildroot#buildroot-iron ...

  7. 删除maven仓库中的lastUpdate文件

    使用idea时导入hibernate 5.1.0的jar包,然后发现本地仓库中找不到该版本的jar 然后手贱 alt+enter 发现提示 update maven indices 然后以为更新就会好 ...

  8. Android记事本09

    昨天: Activity的数据传递. 今天: 从Activity中返回数据 请求码和返回码的作用 遇到的问题: 无.

  9. Servlet 中 RequestDispacher 请求与分发

    RequestDispacher 请求与分发使用HttpServletRequest的getRequestDispatcher()方法取得 Login.java页面 package control; ...

  10. 应用交付工程师Troubleshooting经验分享

    应用交付工程师Troubleshooting经验分享 来源:http://blog.51cto.com/virtualadc/1188328 来源:http://blog.51cto.com/virt ...