Vue基础语法

基本结构helloworld

el来匹配元素，#依据id匹配，.依据class匹配

data设置数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
    el: '#app',
    data: {
    message: 'Hello World!'
    }
})
</script>

{{}}插值表达式

替换指定内容，如上面的HelloWorld

v-text

 设置标签的内容（textContent）；

会替换全部内容；

内部支持表达式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message+'!'">HelloWorld!</h2>
        <h2>{{ message + "!"}}HelloWorld!</h2>
    </div>
        
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
    el:"#app",
    data:{
        message:"HelloWorld"
    }
})
</script>

v-html

 v-html指令的作用是，设置元素的innerHTML；

其中的HTML语法结构会被解析为标签解析为HTML的样式；

与v-text的区别：v-text无论什么内容是什么，都是解析为纯文本；

解析文本时，使用v-text，解析HTML结构时，用v-html；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <p v-html="content"></p>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
    el: '#app',
    data: {
    content: "<a href='http://www.baidu.com'>去百度</a>"
    }
})
</script>

v-on

 v-on:事件名="方法名" 

 为元素绑定事件；

可简写为@；

绑定的方法定义在methods属性中；

方法内部通过this关键字可以访问定义在data中的数据；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击事件v-on:click" v-on:click="doShow"><br>
        <input type="button" value="点击事件简写@click" @click="doShow"><br>
        <input type="button" value="双击事件v-on:dblclick" v-on:dblclick="doShow"><br>
        <input type="button" value="双击事件简写@dblclick" @dblclick="doShow"><br>
        <input type="button" value="取数据，且数据++" @click="doAdd"><br>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
    el: '#app',
    data: {
        num: 0
    },
    methods:{
        doShow:function(){
            // 弹窗
            alert("当前num为" + this.num);
        },
        doAdd:function(){
            alert(this.num + "++");
            this.num++;
        }
    }
})
</script>

事件绑定的方法可以传参；

事件后使用.修饰符可以对事件限制；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <input type="button" value="点击" @click="doClick('玛七朵', ++num) " @keyup.enter="doClick('玛七朵', ++num)">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            num: 0,
        },
        methods:{
            doClick:function(name, num){
                alert(name + "点击第" + num + "次");
            }
        }
})
</script>

v-show

 根据表达式的真假，切换元素的显示与隐藏；

其原理是修改元素的display，实现显示与隐藏；

v-show指令后的内容会被解析为布尔值；

值为true显示，为false隐藏；

数据改变时，对应的元素的显示状态也会同步更新；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <span v-show="isShow">能看见吗?</span><br>
        <input type="button" value="切换" @click="changeIsShow"></input>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow: false
        },
        methods:{
            changeIsShow:function(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

v-if

 根据吧表达式的真假，切换元素的显示与隐藏（其原理操作dom元素）；

表达式的值为true时，元素存在于dom树中，false会从dom树中移除；

频繁切换元素的显示状态用v-show，反之用v-if，v-show的切换消耗性能更小；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <span v-if="isShow">能看见吗?</span><br>
        <input type="button" value="切换" @click="changeIsShow"></input>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow: false
        },
        methods:{
            changeIsShow:function(){
                this.isShow = !this.isShow;
            }
        }
    })
</script>

v-bind

 设置元素的属性（比如：src、class等）；

完整写法：v-bind:属性名；

简写：:属性名；

当需要动态的增删class时，建议使用对象的方式；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <style>
        .active{
            border: 2px solid pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>百度还是哔哩哔哩</h1>
        <img v-bind:src="url" :class="{active:isActive}"><br>
        <input type="button" value="切换" @click="changeUrl">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {            
            baiduUrl: "https://www.baidu.com/favicon.ico",
            bilibiliUrl: "https://www.bilibili.com/favicon.ico?v=1",
            url: "https://www.baidu.com/favicon.ico",
            isActie: false
        },
        methods:{
            changeUrl:function(){
                this.isActive = !this.isActive;
                this.url = this.url == this.baiduUrl ? this.bilibiliUrl : this.baiduUrl;
            }
        }
    })
</script>

v-for

 根据数据生成列表结构；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in array">
                数组下标{{index}}元素：{{item}}
            </li>
        </ul>
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            array: ["!!!", "@@@", "###", "$$$"]
        }
})
</script>

v-model

 获取和设置表单元素的值（双向数据绑定）；

绑定的数据会和表单元素值相关联，绑定元素随着表单元素而改变；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg" @keyup.enter="getMsg">
    </div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: ""
        },
        methods:{
            getMsg(){
                alert(this.msg);
            }
        }
})
</script>

Vue之外：axios配合Vue的使用

axios回调函数中的this已经发生改变，无法访问到data中的数据；

需要把this保存起来（var that = this），回调函数中再使用保存了的this；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>
    <div id="app">
        <div class = "app">
            <input type="button" value="获取笑话" @click="getJoke">
            <p>{{joke}}</p>
        </div>
    </div>
        
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
    el:"#app",
    data:{
        joke: ""
    },
    methods:{
        getJoke:function(){
            var that = this;
            axios.get("https://autumnfish.cn/api/joke").then(function(response){
                console.log(response);
                that.joke = response.data;
            })
        }
    }
})
</script>

 

 

 

posted on 2022-11-17 19:18  yozi_bin  阅读(26)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3