美文网首页JavaSE
Vue基础

Vue基础

作者: AIGame孑小白 | 来源:发表于2021-05-21 01:14 被阅读0次

插入文本

v-text

<div id="app">
    <p v-text="content"></p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        content:"普通文本"
    }
})

v-html

<div id="app">
    <p v-html="content"></p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        content:"<a href='www.baidu.com'>点击我去百度</a>"
    }
})

v-on

  • click：单击事件
  • dblclick：双击事件
  • mouseenter：鼠标移入

v-on可以使用@来代替

<div id="app">
    <input type="button" value="点击事件" v-on:dblclick="method1" />
    <input type="button" value="点击事件" @click="method2" />
</div>

var app = new Vue({
    el:"#app",
    methods:{
        method1:function(){
            alert("方法1");
        },
        method2:function(){
            alert("方法2");
        }
    }
})

绑定求和

<div id="app">
    <button @click="fun1(1,2)">点击求和</button>
    <input type="text" @keyup.enter="fun2()"/>
</div>

var app = new Vue({
    el:"#app",
    methods:{
        fun1:function(a,b){
            alert(a+b);
        },
        fun2:function(){
            alert("输入完成");
        }
    }
})

第一个事件绑定求和，第二个方法是对回车键绑定事件

计数器

<div id="app">
    <button @click="sub()">-</button>
    <span>{{num}}</span>
    <button @click="add()">+</button>
</div>

var app = new Vue({
    el:"#app",
    methods:{
        add:function(){
            if(this.num<10){
                this.num++;
            }else{
                alert("不能超过10");
            }
        },
        sub:function(){
            if(this.num>0){
                this.num--;
            }else{
                alert("已经到最小值啦");
            }
        }
    },
    data:{
        num:1
    }
})

v-show

<div id="app">
    <button @click="changeShow()">切换显示图片</button>
    <br />
    <img src="img/monkey.jpg" v-show="isShow" />
</div>

var app = new Vue({
    el:"#app",
    data:{
        isShow:false
    },
    methods:{
        changeShow:function(){
            this.isShow = !this.isShow;
        }
    }
})

v-if

v-show操纵的是style熟悉，而v-if操纵的整个元素，当他不显示的时候其实是把该元素移除了

<div id="app">
    <button @click="changeShow()">切换显示</button>
    <p v-if="isShow">我是一句话</p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        isShow:false
    },
    methods:{
        changeShow:function(){
            this.isShow = !this.isShow;
        }
    }
})

v-bind

该指令可以直接省略，只留下":"即可

<div id="app">
    <img :src="imgSrc" />
    <img v-bind:src="imgSrc" />
</div>

var app = new Vue({
    el:"#app",
    data:{
        imgSrc:"img/monkey.jpg"
    }
})

样式是否生效

<style>
    .imgStyle{
        border: solid brown 1px;
    }
</style>
<div id="app">
    <img :class="{imgStyle:isStyle}" :src="imgSrc" @click="sty()"/>
</div>

var app = new Vue({
    el:"#app",
    data:{
        imgSrc:"img/monkey.jpg",
        isStyle:true
    },
    methods:{
        sty:function(){
            this.isStyle = !this.isStyle;
        }
    }
})

v-for

<div id="app">
    <ul>
    <li v-for="(item,index) in arr">
        {{index}}{{item}}
    </li>
    </ul>
    <ul>
    <li v-for="item in objArr">
        {{index}}{{item.name}}
    </li>
    </ul>
</div>

var app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5,6,7],
        objArr:[
            {name:"哈哈1"},
            {name:"哈哈2"}
        ]
    }
})

v-model

表单元素的双向数据绑定（更改任意一边的数据都会被同步）

<div id="app">
    <input type="text" v-model="t1" @keyup="fun1()"/>
    <p>{{t1}}</p>
</div>

var app = new Vue({
    el:"#app",
    data:{
        t1:"孑小白"
    },
    methods:{
        fun1:function(a,b){
            console.log(this.t1);
        }
    }
})

记事本案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="js/vue.js"></script>
        <section id="app">
            <input type="text" v-model="dufaultText" @keyup.enter="addItem()" />
            <ul>
                <li v-for="(item,index) in list" style="border: solid aquamarine 2px;">
                    <span>第{{index+1}}项</span>
                    <label>{{item}}</label>
                    <button @click="removeItem(index)">x</button>
                </li>
            </ul>
            <div v-show="listLen!=0">
                <table v-model="listLen">{{listLen}}</table>
                <button @click="removeAll()">清空</button>
            </div>
        </section>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    list:["吃饭","睡觉"],
                    dufaultText:"好好学习",
                    listLen:2
                },
                methods:{
                    addItem:function(){
                        var index = this.list.length;
                        this.list.push(this.dufaultText);
                        //刷新listLen参数
                        this.listLen++;
                    },
                    removeItem:function(i){
                        this.list.splice(i,1);
                        //刷新listLen参数
                        this.listLen--;
                    },
                    removeAll:function(){
                        this.list.splice(0,this.list.length);
                        this.listLen=0;
                    }
                }
            })
        </script>
    </body>
</html>

Axios网络接口库

axios.get("url?key=value&key=value").then(function(response){},function(err){})
axios.get("url",{key:value,key:value}).then(function(response){},function(err){})

获取一个笑话的案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="js/axios.min.js"></script>
        <script src="js/vue.js"></script>
        <div id="app">
            <button @click="getAJoke()">Get一个笑话</button>
            <p v-text="jokeContent"></p>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    jokeContent:"笑话内容"
                },
                methods:{
                    getAJoke:function(){
                        var that = this;
                        axios.get("https://autumnfish.cn/api/joke").then(function(response){
                            that.jokeContent = response.data;
                        },function(err){
                            console.log("失败信息："+err);
                        })
                    }
                }
            })
        </script>
    </body>
</html>

查询天气

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script src="js/axios.min.js"></script>
        <script src="js/vue.js"></script>
        <div id="app">
            <input @keyup.enter="getTq()" v-model="city"/>
            <h2>{{this.city}}</h2>
                    <div v-for="(item,index) in list" style="border: solid black 2px;text-align: center;">
                        <h3>{{item.date}}-{{item.low}}-{{item.high}}</h3>
                        <h3>{{item.type}}</h3>
                        <h3>{{item.fengxiang}}</h3>
                    </div>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    city:"武汉",
                    list:[]
                },
                methods:{
                    getTq:function(){
                        console.log("正在查询...");
                        var that = this;
                        axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+that.city).then(function(response){
                            that.list = response.data.data.forecast;
                            that.city = response.data.data.city;
                        }).catch(function(err){
                            console.log("出错啦")
                        })
                        
                    }
                }
            })
        </script>
    </body>
</html>

相关文章