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

时间：2021-12-21 00:50:24

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分钟快速入门（转）的更多相关文章

  1. Vue&period;js 60 分钟快速入门

    Vue.js 60 分钟快速入门 转载 作者:keepfool 链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下 ...

  2. 不会几个框架，都不好意思说搞过前端： Vue&period;js - 60分钟快速入门

    Vue.js——60分钟快速入门   Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理 ...

  3. Vue&period;js&mdash&semi;&mdash&semi;60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  4. Vue&period;js——60分钟快速入门

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  5. Vue&period;js——60分钟快速入门&lpar;转载&rpar;

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们 ...

  6. Vue&period;js——60分钟快速入门 开发&&num;183&semi; webpack 中文文档

    转载于:http://www.cnblogs.com/keepfool/p/5619070.html http://www.css88.com/doc/webpack2/guides/get-star ...

  7. Vue&period;js——60分钟快速入门&lpar;转&rpar;

    var vm = new Vue({ el: '#app', data: { people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bil ...

  8. Vue&period;js 60分钟快速入门

    原文链接:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和 ...

  9. Vue&period;js—60分钟快速入门

    本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的 ...

随机推荐

  1. HDU--杭电--1195--Open the Lock--深搜--都用双向广搜，弱爆了，看题了没？语文没过关吧？暴力深搜难道我会害羞？

    这个题我看了,都是推荐的神马双向广搜,难道这个深搜你们都木有发现?还是特意留个机会给我装逼? Open the Lock Time Limit: 2000/1000 MS (Java/Others)  ...

  2. css3小总结

    一.边框 1.border-radius:x,y,模糊半径,color(x为负数时左移动,y为负数是上移动) 2.box-radius:x,y,模糊半径,阴影半径,color 3.border-ima ...

  3. VS无法启动调试：&OpenCurlyDoubleQuote;生成下面的模块时&comma;启用了优化或没有调试信息&OpenCurlyDoubleQuote;

    调试项目遇到错误提示,Visual Studio 2010(或VS2008或VS2005)启动调试的时候,弹出提示信息: 生成下面的模块时,启用了优化或没有调试信息: C:\WINDOWS\Micro ...

  4. cjb

    输入216.194.70.6 ,进入到是cjb.net的主页,并不是shell.cjb.net ,进入主页后点击shell,就进不去了 分析:shell.cjb.net被DNS污染了 解法:hosts ...

  5. php部分---对数据的多条件查询，批量删除

    1.给多条件查询,添加条件 <h1>新闻信息查看</h1> <?php $tiaojian1=" 1=1"; $tiaojian2=" 1= ...

  6. 在Nginx 下运行 Laravel5&period;1 的配置

    一.nginx 的 vhost.conf 配置: server { listen ; server_name sub.domain.com; set $root_path '/srv/www/defa ...

  7. Linux学习笔记（4）-文本编辑器vi的使用

    vi的三种编辑模式 命令模式(Command mode) 在此模式下可以控制光标的移动,可以删除字符,删除行,还可以对某个段落进行复制和移动 输入模式(Insert mode) 只有在此模式下,可以输 ...

  8. git提交时的冲突处理

    转自http://www.cnblogs.com/mengdd/p/3585038.html 当两条分支对同一个文件的同一个文本块进行了不同的修改,并试图合并时,Git不能自动合并的,称之为冲突(co ...

  9. Shader 屏幕后期特效 Shake&lpar;震屏&rpar;&amp&semi;Wave&lpar;波纹&rpar;

    震屏效果 Shader: //////////////////////////////////////////// ///// CameraPlay - by VETASOFT 2017 ///// ...

  10. &lbrack;bzoj2631&rsqb;tree——lct

    Brief Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: u v c:将u到v的路径上的点的权值都加上自然数c: u1 v1 u2 ...

相关文章