Vue的一些简单实例到学习

发布于 2021-12-16  526 次阅读

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        {{ message }}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            message:"郭安你好"
        }
    })
 </script>
</body>

</html>
el是挂载点。
一般建议id，因为id唯一，class和div多个。
只支持挂载双标签。
body不支持。

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        {{ message }}
        <h2>
            {{school.name}}
            {{school.mobile}}
        </h2>
        <ul>
        <li>{{arr[0]}}</li>
        <li>{{arr[1]}}</li>
        </ul>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            message:"郭安你好",
            school:{
                name:"郭安",
                mobile:"13669320521"
            },
            arr:["北京","上海","南京","天津"]
        }
    })
 </script>
</body>

</html>

file

file

v-text

file

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <h2 v-text="message+'!'"></h2>
        <h2>郭安{{message + '!'}}!!!</h2>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            message:"郭安你好"
        }
    })
 </script>
</body>

</html>

v-html

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <p v-html='content'></p>
        <p v-text='content'></p>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            content:"<a href='https://an.xiaoan.xyz'>郭安的小站</a>"
        }
    })
 </script>
</body>

</html>

file

v-on

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <input type="button" value="按我！" v-on:click="doit">
        <input type="button" value="别按我！" @click="doit">
        <input type="button" value="按两下试一试" @dbclick="doit">
        <h2 @click="changeget">{{youxi}}</h2>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
           youxi:"GTA5"     
        },
        methods: {
            doit:function(){
                alert("嘿！干嘛呢！");
            },
            changeget:function(){
                // console.log(this.youxi);
                this.youxi+="好好玩！"
            }
        }
    })
 </script>
</body>

</html>

file

一个简单的计数器

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <button @click="sub">
            -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
            +
        </button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
           num:1 
        },
        methods: {
            sub:function(){
                if(this.num>0)
                {
                this.num--;
                }
                else{
                alert("别点啦！！！");
                }
            },
            add:function(){
                if(this.num<10)
                {
                this.num++;
                }
                else{
                    alert("别点啦！！最大啦！");
                }
            }
            },
    })
 </script>
</body>

</html>

file

v-show

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <!-- <input type="button" value="切换状态！" @click="changepic"> -->
        <input type="button" value="年龄++" @click="addage">
        <img v-show="age>18" src="http://120.26.162.71/img/wallhaven/4902.jpg" alt="">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:17
        },
        methods:{
            changepic:function(){
                this.isShow = !this.isShow;
            },
            addage:function(){
                this.age ++;
            }
        }
    })
 </script>
</body>

</html>

file

v-if

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <input type="button" value="切换显示" @click="changeshow"> 
       <p v-if="isShow">时间是珍贵的</p>
       <p v-show="isShow">时间是珍贵的</p>
       <p v-if="temp>35">遗憾是常有的</p>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            isShow:true,
            temp:20
        },
        methods:{
            changeshow:function(){
                this.isShow=!this.isShow;
            }
        }
    })
 </script>
</body>

</html>

file

v-bind

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
    <style>
        .active{
            border: 1px solid red;
        }
        </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="" :title="title+'!!!'"
         :class="isActive?'active':''" @click="changeactive">
        <br>
        <img :src="imgSrc" alt="">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"http://120.26.162.71/img/wallhaven/4993.jpg",
            title:"郭安",
            isActive:false
        },
        methods:{
            changeactive:function(){
                this.isActive=!this.isActive;
            }
        }
    })
 </script>
</body>

</html>

file

图片切换案例

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
    <style> 

.div1 {
        width:1900px;
        height:980px;
        border:1px solid black;
        display: table-cell;
        vertical-align: middle;
    }
    .div1 img  {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }
    /* .div {
        background-size: contain;
    } */
    /* div {
        height: 400px;
        width: 500px;
        border: 1px solid black;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .div1 {
        background-image: url(./peiqi1.png);
    }
    .div2 {
        background-image: url(./peiqi2.png);
    }
    .div3 {
        background-image: url(./peiqi4.jpeg);
    } */
        </style> 
</head>

<body>
    <div id="app" class="div1">
        <!-- <input type="button" value="按我" @click = "gotoNextPic"> -->
        <!-- <h2>{{num}}</h2> -->
        <img :src="imageSRC+this.num+'.jpg'" alt=""  @click = "gotoNextPic">
        <br>
        <!-- <img :src="imgSrc" alt=""> -->
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
          imageSRC:"http://120.26.162.71/img/wallhaven/",
          num:1
        },
        methods:{
            gotoNextPic:function(){
                this.num++;
            }
        }
    })
 </script>
</body>

</html>
//升级随机图片
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
    <style> 

.div1 {
        width:1900px;
        height:960px;
        border:5px solid skyblue;
        display: table-cell;
        vertical-align: middle;
    }
    .div1 img  {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }
    /* .div {
        background-size: contain;
    } */
    /* div {
        height: 400px;
        width: 500px;
        border: 1px solid black;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .div1 {
        background-image: url(./peiqi1.png);
    }
    .div2 {
        background-image: url(./peiqi2.png);
    }
    .div3 {
        background-image: url(./peiqi4.jpeg);
    } */
        </style> 
</head>

<body>
    <div id="app" class="div1">
        <!-- <input type="button" value="按我" @click = "gotoNextPic"> -->
        <!-- <h2>{{num}}</h2> -->
        <img :src="imageSRC+this.num+'.jpg'" alt=""  @click = "gotoNextPic">
        <br>
        <!-- <img :src="imgSrc" alt=""> -->
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
          imageSRC:"http://120.26.162.71/img/wallhaven/",
          num:1
        },
        methods:{
            gotoNextPic:function(){
                this.num=Math.ceil(Math.random()*6306); 
            }
        }
    })
 </script>
</body>

</html>
//此段代码可作为大创项目使用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
    <style> 

.div1 {
        width:1920px;
        height:1000px;
        border:10px solid skyblue;
        display: table-cell;
        vertical-align: middle;
    }
    .div1 img  {
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin: auto;
    }
    /* .div {
        background-size: contain;
    } */
    /* div {
        height: 400px;
        width: 500px;
        border: 1px solid black;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .div1 {
        background-image: url(./peiqi1.png);
    }
    .div2 {
        background-image: url(./peiqi2.png);
    }
    .div3 {
        background-image: url(./peiqi4.jpeg);
    } */
        </style> 
</head>

<body>
    <div id="app" class="div1">
        <!-- <input type="button" value="按我" @click = "gotoNextPic"> -->
        <!-- <h2>{{num}}</h2> -->
        <img :src="imageSRC+this.num+'.jpg'" alt=""  @click = "gotoNextPic">
        <br>
        <!-- <img :src="imgSrc" alt=""> -->
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
          imageSRC:"http://120.26.162.71/img/wallhaven/",
          num:Math.ceil(Math.random()*6306)
        //   return{
        //       timer:null, //定时器名称
        //     }

        },
        methods:{
            gotoNextPic:function(){
                this.num=Math.ceil(Math.random()*6306); 
            },

        }
    })

 </script>
</body>

</html>

v-for 指令

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <input type="button" value="添加" @click = "add">
        <input type="button" value="移除" @click = "remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}}.想去的方向:{{ item }}
            </li>
        </ul>
        <h2 v-for="item2 in food" v-bind:title="item2.name">{{item2.name}}</h2>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","南京","深圳"],
            food:[
                {name:"苹果"},
                {name:"鸭梨"}
            ]
        },
        methods:{
            add:function(){
                this.food.push({name:"橘子"});
            },
            remove:function(){
                this.food.shift();
            }
        }
    })
 </script>
</body>

</html>

file

v-on

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
     <input type="button" value="点击" @click="doit(666,'郭安')">
     <!-- <input type="text" @keyup="sayhi"> -->
     <input type="text" @keyup.enter="sayhi">
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        methods:{
            doit:function(p1,p2){
                console.log("哈哈哈");
                console.log(p1);
                console.log(p2);
            },
            sayhi:function(){
                alert("想你了");
            }
        }
    })
 </script>
</body>

</html>

file

v-model

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="setM">
        <input type="text" v-model = "message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#app",
        data:{
            message:"郭安"
        },
        methods:{
            getM:function(){
                alert(this.message);
            },
            setM:function(){
                this.message = "LYY";
            }
        }
    })
 </script>
</body>

</html>

file

一个记事本

file

file

file

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>
<body>
    <section id="todoapp">
        <header>
            <h1>小安记事本</h1>
            <input v-model="inputvalue" @keyup.enter="add" autofocus="autofocus" aria-autocomplete="off" placeholder="请输入任务"/>
        </header>
    <section>
        <ul>
            <li v-for="(item,index) in list">
                <div>
                    <span>{{index +1}}.</span>
                    <label>{{item}}</label>
                    <!-- <button @click="remove(index)"></button> -->
                    <input type="button" value="删除" @click="remove(index)">
                </div>
            </li>
        </ul>

    </section>
        <footer>
            <span v-if="list.length!=0"><strong>{{list.length}}</strong>
                list num</span>
            <input v-show="list.length!=0" type="button" value="清空" @click="clear">
        </footer>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
  var app = new Vue({
        el:"#todoapp",
        data:{
            list:["写代码","学习"," 睡觉"],
            inputvalue:"好好学习天天向上"
        },
        methods:{
            add:function(){
                this.list.push(this.inputvalue);
            },
            remove:function(index){
                this.list.splice(index,1);
            },
            clear:function(){
                this.list = [];
            }
        }
    })
 </script>
</body>

</html>

vue网络应用

file

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
     document.querySelector(".get").onclick = function(){
         axios.get("https://api.uixsj.cn/hitokoto/get?type=hitokoto&code=json")
         .then(function(response){
             console.log(response);
         },function(error){
             console.log(err);
         })

     }
     document.querySelector(".post").onclick = function(){
         axios.post("https://autumnfish.cn/api/user/reg",
         {
             username:"jack"
         }).then(function(response){
             console.log(response);
         })
     }
 </script>
</body>

</html>

file

axios+vue

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>
    <div id="app">
        <input type="button" value="一言" @click="getone">
        <p>{{one}}</p>
    </div>
<body>
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
     var app =new Vue({
         el:"#app",
         data:{
             one:"一言"
         },
         methods:{
             getone:function(){
                 var that = this;
                 axios.get("https://api.uixsj.cn/hitokoto/get")
                 .then(function(response){
                     console.log(response.data)
                     that.one = response.data;
                 },function(err){

                 })
             }
         }
     })
 </script>
</body>

</html>

一个网络应用

file

file

file
file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>
    <div id="app">
        <input type="text" v-model="city" @keyup.enter="serchWeather">
        <ul>
            <li v-for="item in weather">{{item.date}}<b>,{{item.high}}</b><b>{{item.low}}</b></li>
        </ul>
        <a href="javascript:;" @click="changeCity('南京')">南京</a>
    </div>
<body>
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./js/main.js"></script>
</body>

</html>
// 天气查询接口：https://restapi.amap.com/v3/weather/weatherInfo?parameters
// 请求方式：key
// https://lbs.amap.com/api/webservice/guide/api/weatherinfo
//http://wthrcdn.etouch.cn/weather_mini?city=%E6%AD%A6%E6%B1%89
var app = new Vue({
    el:"#app",
    data:{
        city:"输入你要查询的城市",
        weather:[]
    },
    methods:{
        serchWeather:function(){
            // console.log('天气查询');
            // console.log(this.city);
            //保存this
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+
            this.city)
            .then(function(response){
                // console.log(response);
                // console.log(response.data.data.forecast);
                that.weather = response.data.data.forecast;
            })
            .catch(function(err){})
        },
        changeCity:function(city){
            this.city =city;
            this.serchWeather();
        }
    }
})

综合应用

file

file

file

file

file

file

file

file

file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wiith=device-width,initia;-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue学习</title>
</head>
    <div id="app">
      <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
      <ul>
          <li v-for="item in music"><b>
              {{item.name}}
          </b><b>
              {{item.id}}
          </b><a href="javascript:;" @click="playmusic(item.id)">播放
        <dl v-for="item in Comment">
            <!-- <img :src="item.user.avatarUrl"> -->
            {{item.content}}
        </dl>
        </a></li>
      </ul>
    </div>
<body>
<script src="./axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            query:" ",
            music:[],
            musicurl:"",
            musicCover:"",
            Comment:[]
        },
        methods:{
            searchMusic:function(){
                var that = this;
                axios.get("https://autumnfish.cn/search?keywords="+this.query)
                .then(function(response){
                    // console.log(response);
                    that.music = response.data.result.songs;
                },function(err){

                })
        },
        playmusic:function(musicID){
            var that = this;
                    // console.log(musicID);
                    axios.get("https://autumnfish.cn/song/url?id="+musicID)
                    .then(function(response){
                        // console.log(response);
                        // console.log(response.data.data.url)
                        that.musicurl = response.data.data.url;
                    },function(err) {

                    })
                    axios.get("https://autumnfish.cn/song/detail?ids=544232124")
                    .then(function(response){
                        console.log(response);
                    },function(err){})
                    axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicID)
                    .then(function(response){
                        console.log(response.data.hotComments);
                        that.Comment = response.data.hotComments;
                    },function(err){})
                },

    }
    })
</script>
</body>

</html>
赏

擦肩而过的概率