学习日记【Vue】-2020/12/17

教程地址：https://www.bilibili.com/video/BV12J411m7MG

目前进度：17p/37p

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue.js</title>
    </head>
    <body>
        <div id="app">
            <h2 v-text="message+'!'">china</h2>
            <h2 v-text="infor+'!'">china</h2>
            <h2>{{ message + '!' }} china</h2>
            
            <p v-html="content"></p>
            <p v-text="content"></p>
            
            <input type="button" value="v-on指令" v-on:click="doIt"/>
            <input type="button" value="v-on双击" v-on:dblclick="doIt"/>
            <input type="button" value="v-on鼠标移入" v-on:mouseenter="doIt"/>
            <input type="button" value="v-on简写" @click="doIt"/>
            
            <h2 @click="changeFood">{{ food }}</h2>
            
            <div class="counter">
                <button @click="sub">
                    -
                </button>
                <span>{{ num }}</span>
                <button @click="add">
                    +
                </button>
            </div>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    message:"Vue.js",
                    infor:"前端学习",
                    content:"<a href='https://www.baidu.com'>百度一下</a>",
                    food:"蛋炒饭",
                    num:1
                },
                methods:{
                    doIt:function(){
                        alert("do it");
                    },
                    changeFood:function(){
                        // console.log(this.food);
                        this.food += "好好吃";
                    },
                    add:function(){
                        if(this.num < 10){
                            this.num++;
                        } else {
                            alert("已达到上限");
                        }
                    },
                    sub:function(){
                        if(this.num > 0){
                            this.num--;
                        } else {
                            alert("已达到下限");
                        }
                    }
                }
            })
        </script>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .active{
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2 v-show="true">SHOW</h2>
            <h2 v-show="isShow">SHOW</h2><!-- 只操作样式（style） -->
            <button @click="show">change</button>
            
            <p v-if="isShow">Vue.js！</p><!-- 直接对DOM进行操作 -->
            <h2 v-if="temp>=35">好热啊</h2>
             
            <img :src="imgSrc" alt="" :title="imgTitle+'!'" :style="style" v-bind:class="isActive?'active':''" @click="toggleActive"/>
            <br /><br />
            <img :src="imgSrc" alt="" :title="imgTitle+'!'" :style="style" :class="{active:isActive}" @click="toggleActive"/>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    isShow:true,
                    temp:40,
                    imgSrc:"./shimamura.jpg",
                    imgTitle:"shimamura",
                    isActive:false,
                    style:"width: 200px;height: 200px;"
                },
                methods:{
                    show:function(){
                        this.isShow = !this.isShow;
                    },
                    toggleActive:function(){
                        this.isActive = !this.isActive;
                    }
                }
            })
        </script>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <img :src="imgArr[index]" :style="style"/>
            <br />
            <button @click="prev" v-show="index!=0">切换上一张</button>
            <br /><br />
            <button @click="next" v-show="index<imgArr.length-1">切换下一张</button>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    imgArr:[
                        "hans/hans_01.png",
                        "hans/hans_02.png",
                        "hans/hans_03.png",
                        "hans/hans_04.png",
                        "hans/hans_05.png",
                    ],
                    index:0,
                    style:"width: 222px;height: 192px;"
                },
                methods:{
                    prev:function(){
                        this.index--;
                    },
                    next:function(){
                        this.index++;
                    }
                }
            })
        </script>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(it,index) in arr">
                    四大城市：{{ index+1 }}.{{ it }}
                </li>
            </ul>
            
            <button @click="add">添加</button>
            <button @click="remove">移除</button>
            <h2 v-for="it in objArr" v-bind:title="it.name">
                {{ it.name }}
            </h2>
            
            <input type="button" value="点击" @click="doIt(13,14)"/>
            <input type="text" @keyup.enter="sayHi"/>
            <br /><br />
            
            <input type="text" v-model="message" @keyup.enter="getM"/>
            <h2>{{message}}</h2>
            <button @click="setM">Change</button>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    arr:["北京","上海","广东","深圳"],
                    objArr:[
                        {name:"jack"},
                        {name:"rose"}
                    ],
                    message:"Vue.js!"
                },
                methods:{
                    add:function(){
                        this.objArr.push({name:"tom"});
                    },
                    remove:function(){
                        this.objArr.shift();
                    },
                    doIt:function(m,n){
                        alert("做it！");
                        alert(m);
                        alert(n);
                    },
                    sayHi:function(){
                        alert("吃了没");
                    },
                    getM:function(){
                        alert(this.message);
                    },
                    setM:function(){
                        this.message = "JavaScript";
                    }
                }
            })
        </script>
    </body>
</html>
posted @ 2020-12-17 15:57  Shimamura。  Views(76)  Comments(0)    收藏  举报