博客
关于我
vue快速入门总结
阅读量:341 次
发布时间: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/

你可能感兴趣的文章
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>
MySQL Connector/Net 句柄泄露
查看>>
multiprocessor(中)
查看>>
mysql CPU使用率过高的一次处理经历
查看>>
Multisim中555定时器使用技巧
查看>>
MySQL CRUD 数据表基础操作实战
查看>>
multisim变压器反馈式_穿过隔离栅供电:认识隔离式直流/ 直流偏置电源
查看>>
mysql csv import meets charset
查看>>
multivariate_normal TypeError: ufunc ‘add‘ output (typecode ‘O‘) could not be coerced to provided……
查看>>
MySQL DBA 数据库优化策略
查看>>
multi_index_container
查看>>
MySQL DBA 进阶知识详解
查看>>
Mura CMS processAsyncObject SQL注入漏洞复现(CVE-2024-32640)
查看>>
Mysql DBA 高级运维学习之路-DQL语句之select知识讲解
查看>>
mysql deadlock found when trying to get lock暴力解决
查看>>