Vue.js入门第一课
这个好像比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入门第一课的更多相关文章
- Asp.Net Web API 2(入门)第一课
Asp.Net Web API 2(入门)第一课 前言 Http不仅仅服务于Web Pages.它也是一个创建展示服务和数据的API的强大平台.Http是简单的.灵活的.无处不在的.你能想象到几乎 ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js开始第一个项目
前端架构之路:使用Vue.js开始第一个项目 Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...
- Vue.js入门（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- Vue.js 入门：从零开始做一个极简 To-Do 应用
Vue.js 入门:从零开始做一个极简 To-Do 应用 写作时间:2019-12-10版本信息:Vue.js 2.6.10官网文档:https://cn.vuejs.org/ 前言 学习 Vue ...
- emacs 入门第一课：Emacs里的基本概念
Table of Contents 无聊的开场白 buffer(缓冲区) window(窗口)与frame Emacs的mode Emacs Lisp 函数function.命令command.键绑定 ...
- 前端架构之路：使用Vue.js开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...
- Vue.js入门系列（一）
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
随机推荐
- 内部类inner class
1.什么是内部类,为什么要用内部类? 可以将一个类定义在另一个类的定义内部,这就是内部类. 当描述事物时,事物的内部还有事物,该事物用内部类来描述,因为内部事物在使用外部事物的内容. 如: class ...
- 为什么rows这么大，在mysql explain中---写在去acumg听讲座的前一夜
这周五下班前,发现了一个奇怪问题,大概是这个背景 一张表,结构为 Create Table: CREATE TABLE `out_table` ( `id` ) NOT NULL AUTO_INCRE ...
- 《Cracking the Coding Interview》——第17章：普通题——题目2
2014-04-28 22:05 题目:写个程序判断三连棋哪一方赢了. 解法:三个相同的棋子连成一条横线,竖线或者对角线就判断为赢了. 代码: // 17.2 Write an algorithm t ...
- 《Cracking the Coding Interview》——第17章：普通题——题目1
2014-04-28 21:45 题目:就地交换两个数,不使用额外的变量. 解法:没说是整数,我姑且先当整数处理吧.就地交换可以用加法.乘法.异或完成,其中乘法和加法都存在溢出问题.三种方法都不能处理 ...
- linux下给开启端口
首先在这里要推荐一篇博文 http://blog.csdn.net/zht666/article/details/17505789 这篇文章写的很详细,里面包含了操作端口一些命令,我们操作端口其实就是 ...
- Asp.Net中Response.Cookies.Remove 无法删除COOKIE的问题解决方法
登陆功能经常需要使用Cookie来存储登陆信息,可是在开发过程中,经常发现cookie无法删除的问题.删除的代码无非就是找到Cookie并删除掉. 但是会发现 Response.Cookies.Rem ...
- mac安装虚拟机VirtualBox,并在虚拟机上安装centos
1. 首先从网页上https://www.virtualbox.org/wiki/Downloads下载VirtualBox-6.0.0-127566-OSXdmg文件.我一般把下载的文件放到/opt ...
- SDK支付流程
1.普通支付流程 2.代理流程 易接.U8SDK
- ssh.sh_for_ubuntu1204
#!/bin/bash sed -i 's/PermitRootLogin without-password/PermitRootLogin yes/g' /etc/ssh/sshd_config s ...
- ImportError: libcudart.so.8.0: cannot open shared object file: No such file or directory
这是在python中使用caffe产生的错误. 程序很普通: #-*-coding=utf-8-*- import numpy as npimport matplotlib.pyplot as plt ...