vue学习笔记1

Lingerbhw2332024-12-142025-01-14

指令

本篇仅记录使用及其注意事项，不涉及原理

v-html

作用:可用于动态渲染html元素
语法:v-html=”数据”

<div id="app" v-html="msg"></div>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:`<a href="https://baidu.com">111</a>`,
            }
        })
    </script>

v-show和v-if

v-show
作用:用于控制元素的显隐
底层原理:切换css的dispaly:none ，来控制显隐
使用场景:频繁切换元素显隐时使用，如hover时显示的导航栏等
语法:v-show=”表达式”，表达式为true时显示

v-if
作用:用于控制元素的显隐（条件显隐）
底层原理:基于条件判断，是否创建
使用场景:不频繁切换元素显隐时使用，如登录后登录按钮消失的情景
语法:v-if=”表达式”，表达式为true时显示

<style>
        #box{
            width: 200px;
            height: 100px;
            border: 2px solid black;
            justify-content: center;
            align-items: center;
            display: flex;
            border-radius: 5px;
        }
    </style>
<body>
    <div id="app">
        <div id="box" v-show="isshow">v-show</div>
        <div id="box" v-if="isshow">v-if</div>
    </div>
    </script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                isshow: true
            }
        })
    </script>
</body>

v-else和v-else-if

作用:辅助v-if进行判断渲染
注意:需要紧挨着v-if使用
语法: v-else v-else-if=”表达式”

<div id="app">
        <div id="box" v-if="age1>=18">成年</div>
        <div id="box" v-else>未成年</div>
        <div id="box" v-if="age2>=18">成年</div>
        <div id="box" v-else-if="age2>=16">青少年</div>
        <div id="box" v-else>未成年</div>
    </div>
    </script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                age1:18,
                age2:17
            }
        })
    </script>

v-on

作用:注册事件=添加监听+提供处理逻辑
语法: v-on:事件名=”内联语句或method”

注意:

v-on:事件名可简写为@事件名
在methods方法中,this指向当前实例
可对方法进行传值，如fn(a,b)

<div id="app">
        <div id="box" v-show="isshow">Hello World!</div>
        <button @click="isShow()">显示或隐藏</button>
    </div>
    </script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                isshow:true
            },
            methods:{
                isShow(){
                    console.log("执行了isShow方法")
                    this.isshow = !this.isshow;
                }
            }
        })
    </script>

v-bind

作用:动态的设置html的标签属性
语法: v-bind属性名=”表达式”
简写: :属性名=”表达式”

<div id="app">
        <div id="box">
            <img :src="imgsrc[index]"></img>
        </div>
        <button v-show="index < imgsrc.length - 1"@click="fn()">点击</button>
    </div>
    </script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                //假装这里是图片的src
                imgsrc:[
                    1,
                    2,
                    3
                ],
                index:0
            },
            methods:{
                fn(){
                    this.index++;
                }
            }
        })
    </script>

v-for

作用:基于数据多次循环，多次渲染整个元素
数学:可以是数组、对象、数字等
语法: v-for=”(item,index) in 数组”
其中item是数组的每一项，index是下标
补充:

对数组操作时，可采用filter方法
其作用为根据条件，保留符合条件的对应项，得到一个新数组
不会改变原数组

key属性
语法: key属性=”唯一标识”
作用: 给列表项添加唯一标识，便于vue对列表项的正确排序复用
补充

不加key，vue默认会尝试原地修改元素
key的值只能是字符串或数字类型
key的值必须具有唯一性
推荐使用id作为key，不推荐index

<div id="app">
        <ul>
            <li v-for="(item) in bookList" :key="item.id">
                {{item.name}}--{{item.author}}
            <button @click="del(item.id)">删除</buimttton>
            </li>
        </ul>
    </div>
    </script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                bookList:[
                    {id:1,name:"红楼梦",author:"曹雪芹"},
                    {id:2,name:"水浒传",author:"施耐庵"},
                    {id:3,name:"三国演义",author:"罗贯中"},
                    {id:4,name:"西游记",author:"吴承恩"},
                ]
            },
            methods:{
                del(id){
                    this.bookList = this.bookList.filter(item=>item.id!=id)
                }
            }
        })
    </script>

v-model

作用:给表单元素使用，双向数据绑定->可以实现快速的获取或设置表单元素内容
注意:

数据变化导致视图自动更新
视图变化导致数据自动更新

语法: v-model=”变量”

综合案例：记事本

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script>
    <style>
        h1{
            color: red;
            text-align: center;
        }
        input{
            width: 200px;
            height: 30px;
            margin:0;
            padding:0;
            border: 1px solid red;
            border-radius: 2px;
            font-size: 20px;
        }
        input, button{
            vertical-align: middle;
        }
        #bt1{
            margin:0;
            padding:0;
            width: 60px;
            height: 30px;
            background-color: red;
            border: 1px solid red;
            color: white;

}
</style>
</head>

<body>
    <h1>记事本</h1>
    <div id="app">
        <input type="text" v-model="text"><button @click="add()"id="bt1">添加任务</button>
        <ul>
            <li v-for="(item) in list" :key="item.id">
                {{item.content}}
            <button @click="del(item.id)">删除</button>
            </li>
        </ul>
        <p>总计:{{index}}</p>
        <button @click="delAll()">清空</button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data:{
               text:"",
               list:[],
               index:0,
            },
            methods:{
                add(){
                    this.list.push({id:this.index,content:this.text})
                    this.index++
                    this.text=""
                },
                del(id){
                    this.list = this.list.filter(item=>item.id!=id)
                },
                delAll(){
                    this.list = []
                    this.index = 0
                }
            }
        })
    </script>
</body>
</html>