本文共 8515 字，大约阅读时间需要 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/