Vue.js——60分钟快速入门（转）

vue：Vue.js——60分钟快速入门

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            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;
        }
    </style>
</head>
<body>
<!--这是我们的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message" title="">
    <h3>Hello, Vue.js!</h3>
    <h3 v-if="yes">Yes!</h3>
    <h3 v-if="no">No!</h3>
    <h3 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h3>
    <!-- v-if 是条件渲染指令，它根据表达式的真假来删除和插入元素 -->
    <h1 v-if="age >= 30">Age: {{ age }}</h1>
    <h3 v-else>Age: {{ age }}</h3>
    <!-- v-show 指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性 -->
    <h1 v-show="age >= 20">Age: {{ age }}</h1>
 
    <br>
    <br>
 
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.username }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.sex }}</td>
        </tr>
        </tbody>
    </table>
 
    <br>
    <br>
 
    <!-- v-bind指令可以缩写为一个冒号 -->
    <ul class="pagination">
        <!-- pageCount是一个整数，遍历时n从1开始 -->
        <li v-for="n in pageCount">
            <a href="javascript:void(0)" v-bind:class="activeNumber === n ? 'active' : ''">{{ n }}</a>
        </li>
    </ul>
 
    <br>
    <br>
 
    <!-- v-on指令可以缩写为@符号 -->
    <p>
        <!--click事件直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
    </p>
    <p>
        <!--click事件使用内联语句-->
        <button v-on:click="say('Hi')">Hi</button>
    </p>
 
    <br>
    <br>
 
    <fieldset>
        <legend>
            Create New Person
        </legend>
        <div class="form-group">
            <label>Name:</label>
            <input type="text" v-model="newPerson.username"/>
        </div>
        <div class="form-group">
            <label>Age:</label>
            <input type="text" v-model="newPerson.age"/>
        </div>
        <div class="form-group">
            <label>Sex:</label>
            <select v-model="newPerson.sex">
                <option value="Male">Male</option>
                <option value="Female">Female</option>
            </select>
        </div>
        <div class="form-group">
            <label></label>
            <button @click="createPerson">Create</button>
        </div>
    </fieldset>
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
            <th>Delete</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(person,index) in people">
            <td>{{ person.username }}</td>
            <td>{{ person.age }}</td>
            <td>{{ person.sex }}</td>
            <td :class="'text-center'">
                <button @click="deletePerson(index)">Delete</button>
            </td>
        </tr>
        </tbody>
    </table>
 
    <br>
    <hr>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // 这是我们的Model
    let exampleData = {
        message: 'Hello World!',
        yes: true,
        no: false,
        age: 28,
        name: 'keepfool',
        people: [{
            username: 'Jack',
            age: 30,
            sex: 'Male'
        }, {
            username: 'Bill',
            age: 26,
            sex: 'Male'
        }, {
            username: 'Tracy',
            age: 22,
            sex: 'Female'
        }, {
            username: 'Chris',
            age: 36,
            sex: 'Male'
        }],
        activeNumber: 1,
        pageCount: 10,
        newPerson: {
            name: '',
            age: 0,
            sex: 'Male'
        }
    };
 
    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    // 每个Vue实例都会代理其选项对象里的data属性
    var vm = new Vue({
        el: '#app',
        data: exampleData,
        // 在 `methods` 对象中定义方法
        methods: {
            greet: function () {
                // 方法内 `this` 指向 vm
                alert(this.message)
            },
            say: function (msg) {
                alert(msg)
            },
            createPerson: function () {
                this.people.push(this.newPerson);
                // 添加完newPerson对象后，重置newPerson对象
                this.newPerson = {username: '', age: 0, sex: 'Male'}
            },
            deletePerson: function (index) {
                // 删一个数组元素
                this.people.splice(index, 1);
            }
        }
    })
</script>
</html>

推荐安装谷歌插件 vue-devtools

Vue.js——60分钟快速入门（转）的更多相关文章

Vue.js 60 分钟快速入门
Vue.js 60 分钟快速入门转载作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...
不会几个框架，都不好意思说搞过前端： Vue.js - 60分钟快速入门
Vue.js——60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...
Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
Vue.js——60分钟快速入门
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
Vue.js——60分钟快速入门(转载)
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...
Vue.js——60分钟快速入门开发· webpack 中文文档
转载于:http://www.cnblogs.com/keepfool/p/5619070.html http://www.css88.com/doc/webpack2/guides/get-star ...
Vue.js——60分钟快速入门(转)
var vm = new Vue({ el: '#app', data: { people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bil ...
Vue.js 60分钟快速入门
原文链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和 ...
Vue.js—60分钟快速入门
本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的 ...

随机推荐

Java利用原始HttpURLConnection发送http请求数据小结
1,在post请求下,写输出应该在读取之后,否则会抛出异常. 即操作OutputStream对象应该在InputStreamReader之前. 2.conn.getResponseCode()获取返回 ...
论文阅读（Weilin Huang——【ECCV2016】Detecting Text in Natural Image with Connectionist Text Proposal Network）
Weilin Huang——[ECCV2016]Detecting Text in Natural Image with Connectionist Text Proposal Network 目录 ...
python 常用turtle
python 常用turtle 常用命令1 import turtle turtle.bgcolor("black") 设置背景颜色 turtle.onscreenclick(x, ...
/bin, /sbin & /usr/bin, /usr/sbin & /usr/local/bin, /usr/local/sbin & glibc
操作系统为自身完成启动所需要的 /bin, /sbin 系统基本管理所需要的 /usr/bin, /usr/sbin 第三方的 /usr/local/bin, /usr/local/sbin 核心库 ...
mac & ip
mac 解决本地网络机器的通信 ip 解决不同网络间主机的通信
Matlab学以致用--模拟os任务装载情况
2012-06-08 21:26:42 用matlab来建模,仿真不同时刻os task在队列中的装载情况.输入参数如下作为初学者,M文件写的有点长.能实现功能就算学以致用了. clear;clc ...
HBase Thrift过滤语法
摘抄自hbase ref guide 0.94: 在写本文的时候,hbase ref guide已经更新到1.2及2.0了,但是个人感觉Thrift过滤语法部分写得都没有0.94的好,省掉了examp ...
C语言实例：结构体
结构体: #include <stdio.h> #include <stdlib.h> //#pragma pack(1) typedef struct{ short i; / ...
Haproxy官方文档翻译（第二章）配置Haproxy 附英文原文
2.配置 HAProxy 2.1 配置文件格式 Haproxy的配置过程包含了3部分的参数资源:- 命令行中的参数,此种参数总是享有优先权被使用- 配置文件中global节点中的参数,此种参数是进程范 ...
3、SpringBoot 集成Storm wordcount
WordCountBolt public class WordCountBolt extends BaseBasicBolt { private Map<String,Integer> c ...

Vue.js——60分钟快速入门（转）

Vue.js——60分钟快速入门（转）的更多相关文章

随机推荐

热门专题