本文共 8467 字，大约阅读时间需要 28 分钟。
<!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><!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><!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><!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><!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><!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><!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><!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><!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><!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/