VUE框架入门

2020-07-08 约 2141 字预计阅读 5 分钟

在学习VUE入门视频时记录的知识点和代码，备忘。

基本

el:挂载点，id选择器#，不能挂载到<html> <body>两个标签

Vue指令

内容绑定、事件绑定

v-text设置标签内容，支持用插值表达式对原有变量进行相关操作。和两个花括号基本等价。

<div id="vtext_app">
    <h2 v-text="message + '!'"></h2>
    <h2>局部更新{{ message + "!" }}</h2>
    <h2 v-text="info"></h2>
</div>
<script>
    var cur_app = new Vue({
        el:"#vtext_app",
        data:{
            message:"test",
            info: "多个变量支持"
        }
    })
</script>

v-html设置innerhtml属性，如果要渲染html结构，需要使用该语句。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p v-text="content1"></p>
            <p v-html="content1"></p>
            <p v-text="content2"></p>
            <p v-html="content2"></p>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    content1:"hello",
                    content2:"<a href='http://www.baidu.com'>百度</a>"
                }
            });
        </script>
    </body>
</html>

v-on为元素绑定事件，点击、按键、鼠标滚动等，与@符号等价。时间对应的方法需要提前准备在methods当中。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="button" value="v-on" v-on:click="doIt">
            <input type="button" value="v-on简写" @click="doIt">
            <input type="button" value="双击事件" @dblclick="doIt">

            <!-- 不操作dom，修改数据 -->
            <h2 @click="changeFood">{{ food }}</h2>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    food:"番茄",
                },
                methods: {
                    doIt: function(){
                        alert("方法测试");
                    },
                    changeFood:function(){
                        console.log(this.food);
                        this.food += '好吃';
                    }
                },
            });
        </script>
    </body>
</html>

综合小实例，计数器。

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div class="input-num">
                <button @click="sub">-</button>
                <span>{{ num }}</span>
                <button @click="add">+</button>
            </div>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    num: 0,
                },
                methods: {
                    add:function(){
                        if(this.num < 10){
                            this.num++;
                        }else{
                            alert('已经达到最大值');
                        }                        
                    },
                    sub:function(){
                        if(this.num > 0){
                            this.num--;
                        }else{
                            alert('已经到达最小值');
                        }
                    }
                },
            });
        </script>
    </body>
</html>

显示切换、属性绑定

v-show根据表达式的真假，切换元素的显示隐藏状态。本质上是切换display属性。

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <img v-show="isShow" src="https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png" alt="">
        <img v-show="age>=18" src="https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png" alt="">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                isShow: false,
                age: 18
            },
            methods: {
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                }
            },
        });
    </script>
</body>

</html>

v-if根据表达式的真假，切换元素的显示和隐藏，本质是操作dom元素的移除或添加，并非切换样式。表达式最终会解释为布尔值。

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="切换显示状态" @click="toggleIsShow">
        <p v-if="isShow">v-if测试</p>
        <p v-show="isShow">v-show测试</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            },
        });
    </script>
</body>

</html>

v-bind设置元素的属性，src、class，使用方式为v-bind:属性=值，可以省略指令，直接用冒号拼接属性值。设置class可以通过三元表达式或者用对象的方式来设置，推荐用后者。

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc:"https://i0.hdslb.com/bfs/archive/e62b6b095ef38dfb742687f11e4b570dde420b5d.png",
                imgTitle: "vbind测试",
                isActive: false,
            },
            methods: {
                toggleActive:function(){
                    this.isActive = !this.isActive;
                }
            },
        });
    </script>
</body>

</html>

轮播图实例

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="mask">
        <div class="center">
            <!-- 左箭头 -->
            <!-- <a href="javascript:void(0)" @click="prev" class="left">
                <img src="" alt="">
            </a> -->
            <input type="button" value="←" v-show="index!=0" @click="prev">

            <!-- 图片 -->
            <img :src="imgArr[index]" alt="">

            <!-- 右箭头 -->
            <!-- <a href="javascript:void(0)" @click="next" class="right">
                <img src="" alt="">
            </a> -->
            <input type="button" value="→" v-show="index<imgArr.length-1" @click="next">
        </div>
    </div>

    <script>
        var app = new Vue({
            el:"#mask",
            data:{
                imgArr:[
                    "https://i0.hdslb.com/bfs/archive/23f7ccf8b4cb143c6af7e6dc8534283bef293cb4.jpg@321w_182h_1c_100q.webp",
                    "https://i0.hdslb.com/bfs/archive/6a85c04866e27c51929c289dcef3011cb5db1d5f.jpg@321w_182h_1c_100q.webp",
                    "https://i2.hdslb.com/bfs/archive/90b09328d7daaa6fbff5002d25a311ada086f21b.jpg@321w_182h_1c_100q.webp"
                ],
                index:1
            },
            methods: {
                prev:function(){
                    console.log(this.index);
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
                
            },
        })
    </script>
</body>

</html>

列表循环、表单元素绑定

v-for根据数据生成列表结构，经常和数组结合使用，语法是(item, index) in 数据，数组内容的更新会同步到页面上。

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{ index + 1}} 地点：{{ item }}
            </li>
        </ul>
        
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <h2 v-for="item in vegetable" v-bind:title="item.name">
            {{ item.name }}
        </h2>
        
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                arr:["Beijing", "ShangHai", "GuangZhou"],
                vegetable:[
                    {name:"西兰花炒蛋"},
                    {name:"蛋炒西兰花"}
                ]
            },
            methods: {
                add:function(){
                    this.vegetable.push({name:"🥦"})
                },
                remove:function(){
                    this.vegetable.shift();
                }
            },
        });
    </script>
</body>

</html>

v-on补充内容，传递自定义参数、事件修饰符。

<html>

<head>
    <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"  @keyup.enter="sayHi">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt:function(p1, p2){
                    console.log('do it');
                    console.log(p1);
                    console.log(p2);
                },
                sayHi:function(){
                    alert("吃了没？");
                }
            },
        });
    </script>
</body>

</html>

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

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{ message }}</h2>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                message:"双向数据绑定 VUE全响应数据开发"
            },
            methods: {
                getM:function(){
                    alert(this.message);
                }
            },
        });
    </script>
</body>

</html>

本地应用记事本

没有写样式，只用了几个按钮：

<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <p>输入回车自动记录</p>
        <input type="text" v-model="message" @keyup.enter="addNote(message)">
        <input type="button" value="删除全部" @click="deleteAll" v-show="todos.length!=0">
        <br>
        <h3 v-text="'待办总数' + todos.length" v-if="todos.length != 0"></h3>
        <ul>
            <li v-for="(item, index) in todos">
                {{index}} {{ item }}
                <input type="button" value="×" @click="deleteOne(index)">
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "输入待办",
                todos:['写代码', '备考']
            },
            methods: {
                deleteAll:function(){
                    // this.todos.splice(0);
                    this.todos = [];
                },
                addNote:function(message){
                    this.todos.push(message);
                },
                deleteOne:function(index){
                    this.todos.splice(index, 1);
                }
            },
        });
    </script>
</body>

</html>

网络

axios引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用的api：https://github.com/AutumnFish/testApi

需要注意axios回调函数中的this已经改变，不能访问VUE实例中的数据。可以先把this保存起来，在回调函数中使用保存的this。

https://autumnfish.cn/歌曲相关api

目录