JS进阶案例及vue初步学习

最新推荐文章于 2024-08-21 14:09:37 发布

astzk

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量145

点赞数

文章标签： javascript vue.js 学习

本文链接：https://blog.csdn.net/qq_60654299/article/details/131603711

版权

文章展示了如何使用弹性布局（Flexbox）实现页面元素的灵活排版，包括对齐方式和自动换行。同时，介绍了通过字符提取方法简化对象属性处理。此外，文章还提供了Vue的基本用法，如创建Vue实例、数据绑定和循环，并强调了对JavaScript函数逻辑和Vue语法的理解与应用。

摘要由CSDN通过智能技术生成

拓展

弹性布局

/*弹性布局*/
display: flex;
/*用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。*/
justify-content: center;
/*定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。*/
align-items: center;
/* 自动换行 */
flex-wrap: wrap;

这个函数总体设计较为方便，不用在绝对定位和相对定位上进行大量的代码试错来调整位置。

字符提取

e.name.slice(0,e.name.indexOf('.'))
//即在对象e中的name属性中从最开始截取到字符.之前的内容

案例

实现一个页面内的投票选举。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未来之星投票</title>
<style>
    .tops{
        /* 弹性布局 */
        display: flex;
        justify-content: center;
    }
    .tops>div{
        margin-left: 30px;
        text-align: center;
    }
    .tops>div>span{
        color: goldenrod;
        font-size: large;
    }
    /* 第一个和第三个子元素向下移动30 */
    .tops>div:nth-child(1),.tops:div:nth-child(3){
        margin-top: 30px;
    }
    img{
        width: 150px;
        height: 200px;
        border-radius: 10px;
    }
    img:hover{
        box-shadow: 5px 5px 5px rebeccapurple;
        transform: translate(5px,5px);
    }
    /* 主题布局 */
    .main{
        display: flex;
        justify-content: space-around;
        /* 自动换行 */
        flex-wrap: wrap;
    }
    .mai>div{
        text-align: center;
        margin-left: 30px;
    }
    .main button{
        width: 90px;
        height: 40px;
        border-radius: 20px;
        border: none;
        background-color: rebeccapurple;
        font-size: large;
        color: aliceblue;
    }
    button:hover{
        box-shadow: 0px 8px 5px rgba(233, 0, 233, 0.651);
    }
    button:active{
        transform: translateY(5px);
        box-shadow: 0px 3px 5px rgba(233, 0, 233, 0.651);
    }
</style>
</head>
<body>
    <h2 style="text-align:center;color: blue;">未来之星前三甲</h2>
    <div class="tops" id="tops">
        <div>
            <img src="a.webp" alt=""><br>
            <span>榜眼</span><br>
            张三--90
        </div>
        <div>
            <img src="b.webp" alt=""><br>
            <span>状元</span><br>
            李四--100
        </div>
        <div>
            <img src="c.jpeg" alt=""><br>
            <span>探花</span><br>
            王五--80
        </div>
    </div>
    <hr>
    <div class="main" id="main">
        <div>
            <img src="a.webp" alt=""><br>
            <span>a--0</span><br>
            <button onclick="flushImg()">投票</button>
        </div>
    </div>
</body>
<script>
    //设置对象数组
    let beauty=[
    {name:'a.webp',num:0},
    {name:'b.webp',num:0},
    {name:'c.jpeg',num:0},
    {name:'d.webp',num:0},
    {name:'e.webp',num:0},
    {name:'f.webp',num:0},
    {name:'g.webp',num:0}
    ]
    //根据数组中的数据，自动生成图片到页面
    let main=document.getElementById('main')
    function flushImg(){
        let s=''
        beauty.forEach((e,i)=>{//e是对象,i是序号
            s+=
            `<div>
                <img src="${e.name}" alt=""><br>
                <span>${e.name.slice(0,e.name.indexOf('.'))}--${e.num}</span><br>
                <button onclick="vote(${i})">投票</button>
            </div>
            `
            // indexOf('.')表示从开始截取到.之前
        })
        main.innerHTML=s
    }
    //调用flushImg函数
    flushImg()
    //投票函数
    function vote(i){
        beauty[i].num++
        //刷新主题（数组中的数据）
        flushImg()
        //更新前三甲
        updateTop3()
    }

    let tops=document.getElementById('tops')
    //更新前三甲函数
    function updateTop3(){
        //不能对原数组排序，把原数组拷贝一份，用来排序
        let beauty2=[...beauty]

        beauty2.sort((e1,e2)=>{
            //倒序
            return e2.num-e1.num
        })    
        //取数组的前三个对象
        beauty2=beauty2.slice(0,3)
        tops.innerHTML=
        `
        <div>
            <img src="${beauty2[1].name}" alt=""><br>
            <span>榜眼</span><br>
            ${beauty2[1].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[1].num}
        </div>
        <div>
            <img src="${beauty2[0].name}" alt=""><br>
            <span>状元</span><br>
            ${beauty2[0].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[0].num}
        </div>
        <div>
            <img src="${beauty2[2].name}" alt=""><br>
            <span>探花</span><br>
            ${beauty2[2].name.slice(0,beauty2[1].name.indexOf('.'))}--${beauty2[2].num}
        </div>
        `
    }
</script>
</html>

演示图

该案例中对函数的掌握能力以及逻辑能力要求比较高，特别是后面的数组复制再调用来展示图片所有属性一块，需要反复思考。

VUE入门

目前看来，vue似乎是JS的加强版。在使用时需要导入vue.min.js文件。

<script>
    //创建vue实例
    new Vue({
        el:'#app',//获取
        //设置对象以及数组
        data:{
            person:{name:'曹操',age:36},
            hpList:['武汉','湖南','河南','陕西']
        }
    })
</script>

    <!-- 插值表达式{{}},读取vue中data里面的数据,只能应用于文本范围 -->
    <div id="app">
        <p>大家好，我是 {{person.name}}   ,我今年 {{person.age}} 岁了</p>
        <!-- <p>
            厚溥的分公司地点有:
            {{hpList[0]}},{{hpList[1]}}，{{hpList[2]}}，{{hpList[3]}}
        </p> -->

        <!-- 增强for循环
            v-for标签属性，用来循环遍历数组，e in arr
        e是数组中的每一个元素 -->
        <p>
            厚溥的分公司地点有:
            <ul>
                <!-- <li v-for="hp in hpList">
                    {{hp}}
                </li> -->

                <li v-for="(hp,i) in hpList">
                    {{hp}}--{{i}}
                </li>   
            </ul>
            普通的循环:
            <ul>
                <li v-for="i in 10">
                    {{i}}
                </li>
            </ul>
        </p>

        <h3>单向绑定</h3>
        <!-- v-bind:value 单向绑定某个属性，让属性中读取data中的数据，通常简写为 :value -->
        <input type="text" name="" id="" v-bind:value="person.name" placeholder="请输入姓名">
        <input type="text" name="" id="" :value="person.age" placeholder="请输入姓名"><br>

        <h3>双向绑定</h3>
        <!-- v-model:value 双向绑定，可以读取也可以改变data中的数据，通常简写为 v-model,只适应于表单项input标签 -->
        <input type="text" name="" id="" v-model:value="person.name" placeholder="请输入姓名">
        <input type="text" name="" id="" v-model="person.age" placeholder="请输入姓名">
    </div>