博客
关于我
vue快速入门总结
阅读量:340 次
发布时间:2019-03-04

本文共 8467 字,大约阅读时间需要 28 分钟。

第一个vue程序

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Vue基础</title></head><body>    <div id="app">        {  { message }}      </div>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <script>        var app = new Vue({                el: '#app',            data: {                    message: 'Hello Vue!'            }        })    </script></body></html>

v-text指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <h2 v-text="message+'!'"></h2>        <h2 v-text="info+'!'"></h2>        <h2>{  { message+'!' }}啦啦啦</h2>    </div>    <script>        var vu = new Vue({                el: "#app",            data:{                    message:"今天依旧光芒万丈",                info:"好的!"            }        })    </script></body></html>

v-html指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <p v-html="content"></p>    </div>    <script>        var vu = new Vue({                el: "#app",            data:{                    content:"<a href='#'>百度一下</a>"            }        });    </script></body></html>

v-show指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-show指令学习</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <button  @click="changeShow">切换显示</button>        <br>        <img src="./imags/kira.jpg" alt="kira" v-show="isShow" >        <br>    </div>        <script>        var vu = new Vue({                el: "#app",            data: {                    isShow: true            },            methods:{                    changeShow: function(){                        this.isShow = !this.isShow;                }            }        });    </script></body></html>

v-if指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-if指令</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <button @click="change">切换显示</button>        <p v-if="flag>0">江服大数据学院</p>        <p v-show="false">江服大数据学院2</p>    </div>    <script>        var vu = new Vue({                            el: "#app",            data: {                    isShow: true,                flag: 3            },            methods:{                    change: function(){                        this.isShow = !this.isShow;                    this.flag--;                }            }        });    </script></body></html>

v-on指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-on补充</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <input type="button" value="单击" @click="doIt(666,'老铁')">        <input type="text" name="hi" id="" @keyup.enter="sayHi">    </div>    <script>        var vu = new Vue({                el: "#app",            methods: {                    doIt: function(p1,p2){                        console.log("做it");                },                sayHi: function(){                        window.alert("吃了没!");                }            }        })    </script></body></html>

v-for指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <input type="button" value="添加" v-on:click="add">        <input type="button" value="移除" @click="remove">        <ul>            <li v-for="(item,index) in arr">{  { index+1 }}{  { item }}</li>        </ul>        <h1 :title="arr[0]">最大的标签h1</h1>        <ol>            <li v-for="item in peoper" v-bind:title="item.name">{  { item.name }}</li>        </ol>    </div>    <script>        var vu = new Vue({                el: "#app",            data: {                    arr: ["北京","上海","广州","深圳"],                peoper: [                    {    "name":"张三"},                    {    "name":"李四"}                ]            },            methods: {                        add: function(){                            this.arr.push("南昌");                    },                    remove: function(){                            this.arr.shift();                    }                }        })    </script></body></html>

v-bind指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-bind指令</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    <style>        .active{                border: 10px solid red;        }    </style></head><body>    <div id="app">        <img v-bind:src="imgSrc" alt="" :title="imgTitle" v-bind:height="imgHeight">        <br>        <img :src="imgSrc" alt="" v-bind:title="imgTitle+'!!!!!'" :height="imgHeight"         :class="isActive?'active':''" @click="changeBorder">        <br>        <img :src="imgSrc" alt="" v-bind:title="imgTitle+'!!!!!'" :height="imgHeight"         :class={active:isActive} @click="changeBorder">    </div>    <script>        var vu = new Vue({                el: "#app",            data: {                    imgSrc: "./imags/angryDog.jpg",                imgTitle: "再看咬你熬",                imgHeight: 200,                isActive: false            },            methods: {                    changeBorder: function(){                        this.isActive = !this.isActive;                }            }        });    </script>    </body></html>

v-model指令

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>v-model双向绑定</title>    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <input type="button" value="改变显示的message" @click="setM">        <input type="text" v-model="message" @keyup.enter="getM">        <h1>{  { message }}</h1>    </div>    <script>        var vu = new Vue({                el: "#app",            data: {                    message: "江服大数据"            },            methods: {                    getM: function(){                        alert(this.message);                },                setM: function(){                        this.message="学的是v-model双向数据绑定"                }            }        })    </script></body></html>

vue网络应用axios基本使用

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>axios基本使用</title>    <script src="http://unpkg.com/axios/dist/axios.min.js"></script></head><body>    <input type="button" value="get请求" class="get">    <input type="button" value="post请求" id="post">    <script>        /*         接口1:随机笑话         请求地址:https://autumnfish.cn/api/joke/list         请求方法:get         请求参数:num(笑话条数,数字)         响应内容:随机笑话        */        document.querySelector(".get").onclick = function(){                axios.get("https://autumnfish.cn/api/joke/list?num=6")            .then(function (response) {                    console.log(response);            },function(err){                    console.log(err);            })        }        /*            接口2:用户注册            请求地址:https://autumnfish.cn/api/user/reg            请求方法:post            请求参数:username            响应内容:注册成功或者失败        */               document.getElementById("post").onclick = function(){                axios.post("https://autumnfish.cn/api/user/regdada",{    username:"yzx哈哈哈"})            .then(function(response){                    console.log(response);            },function(err){                    console.log(err);            })        }    </script></body></html>

转载地址:http://aymh.baihongyu.com/

你可能感兴趣的文章
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>