vue基础小节 v-mode属性双向绑定 跑马灯 十秒挑战 计算器 v-for和key属性 v-if与v-show用法区别 tap切换

于 2022-10-27 23:15:19 发布
阅读量258 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/djsknsns/article/details/127562635
版权

vue代码基本结构

    <!-- 视图层 -->
    <div class="app">
        <!-- 差值表达式 -->
        <div>{{mge}} {{message}}</div>
        <div v-text="textvue"></div>
        <div v-html="htmlvue"></div>
        <button v-on="log1">按钮</button><!--@='click' 也可以-->>
    </div>

  let vm = new Vue({
        //控制区域
        el: '.app',
        //数据
        data: {
            mge: 'Hello Word',
            message: '123',
            textvue: '456',
            htmlvue: '789'
        },
        //方法
        methods: {
            log1() {
                console.log(11111);
            }
        }

    })

1，防止界面闪烁

   [v-cloak] {
            display: none;
        }

  <div id="app">
        <div v-cloak>{{msg}}</div>
        <button @click="log1">按钮</button>
    </div>

    let vm = new Vue({
        el: '#app',
        data: {
            msg: '你好世界',
        },
        methods: {
            log1() {
                console.log(111);
            }
        }
    })

2，v-bind v-on 绑定元素属性，绑定事件

    <div id="app">
        <!-- v-bind 绑定元素属性 -->
        <!-- <img v-bind;src='imgSrc'> -->
        <!-- v-bind 简写: -->
        <!-- <img :src='imgSrc'> -->
        <div class="div" :style="'background-image: url('+imgSrc+');'"></div>
        
        <!-- <img :src="'https://img1.baidu.com//it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=50d3505ebf3e0214b25be0d90245340a'"> -->

        <!-- v-on 绑定事件 -->
       <button v-on:click="log1">打印1</button>
        <button @click="log2">打印2</button> 
        <button @click="change">改变图片</button>
    </div>

 let vm = new Vue({
        el: '#app',
        data: {
            imgSrc: 'https://img1.baidu.com//it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=50d3505ebf3e0214b25be0d90245340a'
        },
        methods: {
            // log1(){
            //     console.log(111111);
            // },
            // log2(){
            //     console.log(222222);
            // },
            change() {
                console.log(this);
                console.log(this.imgSrc);
                if (this.imgSrc) {
                    this.imgSrc = ''
                } else {
                    this.imgSrc = 'https://img1.baidu.com//it/u=3009731526,373851691&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666976400&t=50d3505ebf3e0214b25be0d90245340a'
                }
            }
        }
    })

3，跑马灯

 <div id="app">
        <!-- 
            1.  搭建静态页面
            2.  分析数据
            3.  逻辑处理
        -->
        <button @click="start" :disabled="disabl">浪起来</button>
        <button @click="stop" :disabled="!disabl">低调</button>
        <div>{{msg}}</div>
    </div>

  let vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪~~!',
            timer: null,
            disabl: false
        },
        methods: {
            //开始
            //两种方式第二个更优
            start() {
                //按钮禁用
                this.disabl = !this.disabl
                // console.log(this.msg.substring(0, 1));
                // console.log(this.msg.substring(1));
                // //1.声明一个变量
                // let that = this
                // setInterval(function () {
                //     console.log(that);
                //     let start = that.msg.substring(0, 1)
                //     let end = that.msg.substring(1)
                //     that.msg = end + start
                // }, 500)
                //开始时清空定时器
                // clearInterval(this.timer)
                //2.箭头函数
                this.timer = setInterval(() => {
                    let start = this.msg.substring(0, 1)
                    let end = this.msg.substring(1)
                    this.msg = end + start
                }, 500)
            },
            stop() {
                this.disabl = !this.disabl
                clearInterval(this.timer)
            }
        }
    })

4，事件修饰符

 header {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        aside {
            width: 100px;
            height: 100px;
            background-color: rgb(206, 131, 39);
        }

   <div id="app">
        <!-- 1,   .stop阻止冒泡  -->
        <header @click="log3">
            <aside @click.stop="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!-- 2,     .capture添加事件监听器时使用事件捕获模式 -->
        <header @click="log3">
            <aside @click.capture="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!--3,  .self 只当事件在改元素本身（比如不是子元素）触发时触发回调 -->
        <header @click="log3">
            <aside @click.self.stop="log2">
                <button @click="log1">按钮</button>
            </aside>
        </header>
        <!-- 4, once 事件只触发一次 -->
        <div>111111111111111111111111111111111111111111111111111111111111111</div>
        <!-- <header @click="log3">
            <aside @click="log2">
                <button @click.once.stop="log1">按钮</button>
            </aside>
        </header> -->
        <!-- 5, .prevent阻止默认事件 -->
        <a @click.prevent.once="target" href="https://www.baidu.com">百度一下</a>
    </div>

 let vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            log1() {
                console.log(1111111);
            },
            log2() {
                console.log(22222222222);
            },
            log3() {
                console.log(333333333333333);
            },
            target() {
                alert('别点了在点就跳百度了')
            }
        }
    })

5，v-mode数据双向绑定

    #box{
        font-size: 40px;
    }

  <div id="app">
        <input type="text" v-bind:value="value1">
        <input type="text" v-model:value="value1">
        <input type="text" v-model="value1">
        <button @click="getVal">按钮</button>


        <!--  -->
        <br>
        <div id="box">计时器↓</div>
        <input type="text" v-model="value1">
        <select name="" id="" v-model="value4">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="value2">
        <button @click="add">=</button>
        <input type="text" v-model="value3">
    </div>

 let vm = new Vue({
        el: '#app',
        data: {
            value1: '100',
            value2: '',
            value3: '',
            value4: '+',
        },
        methods: {
            getVal() {
                console.log(this.value1);
            },
            add() {
                if (this.value4 == '+'){
                    this.value3 = Number(this.value1)+ Number(this.value2)
                }else if(this.value4 == '-'){
                    this.value3 = Number(this.value1)- Number(this.value2)
                }else if(this.value4 == '*'){
                    this.value3 = Number(this.value1)* Number(this.value2)
                }else if(this.value4 == '/'){
                    this.value3 = Number(this.value1)/ Number(this.value2)
                }
            }
        }
    })

,6，Vue中样式的使用

 .box {
            height: 100px;
            background-color: green; 
        }

        .red {
            color: red;
        }

        .fs40 {
            font-size: 40px;
        }

 <div id="app">
        <div :class="class1">我是盒子</div>
        <div :class="['box', 'red']">我是盒子1</div>
        <div :class="falg?'box':'red'">我是盒子2</div>
        <div :class="class2">我是盒子3</div>
        <div :class="{'box':false,'red':true}">我是盒子3</div>
        <button @click="change">改变字体</button>
        <ul>
            <li @click="changeColor(1)" :class="index==1 ?'red':''">1</li>
            <li @click="changeColor(2)" :class="index==2 ?'red':''">2</li>
            <li @click="changeColor(3)" :class="index==3 ?'red':''">3</li>
            <li @click="changeColor(4)" :class="index==4 ?'red':''">4</li>
        </ul>
    </div>

  let vm = new Vue({
        el: '#app',
        data: {
            index: 1,
            falg: false,
            // class1:'box red',
            //数组
            class1: ['box', 'red'],
            class2: ['box', { 'red': false }],
        },
        methods: {
            change() {
                //this.class1 += ' fs40'
                this.class1.push('fs40')
            },
            changeColor(num) {
                console.log(num); 
                this.index = num
            }
        }
    })

7，行内样式

    <div id="app">
        <div :style="[style1,style2]">我是盒子</div>
        <div :style="getStyle()">我是盒子1</div>
        <div :style="'background-image:url('+src+')'"></div>
        <button @click="change">按钮</button>
    </div>

    let vm = new Vue({
        el: '#app',
        data: {
            style1: {
                color: 'red'
            },
            style2: {
                fontSzie: '40px'
            },
            src: ''
        },
        methods: {
            change() {
                this.style1.color = 'green'
                this.style1.fontSzie = '40px'
            },
            getStyle() {
                return {
                    color: 'red'
                }
            }
        }
    })

8，V-for和key属性

   .red {
            color: red;
        }

 <div id='app'>
        <ul>
            <li>{{list[0]}}</li>
            <li>{{list[1]}}</li>
            <li>{{list[2]}}</li>
            <li>{{list[3]}}</li>
        </ul>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(item,index) in list">
                {{item}} -- {{index}}
            </li>
        </ul>
        <div v-for="(item,index) in courseList">
            <div>{{item.title}}</div>
        </div>
        <!-- 遍历对象 -->
        <div v-for="(value,key,index) in obj">
            {{value}} -- {{key}} -- {{index}}
        </div>
        <!-- 遍历数字 -->
        <div v-for="num in 10">
            <div>123</div>
        </div>

        <div v-for="item in coursList">
            {{item.title}}
            <div v-for="item in item.section">
                {{item.page}}
            </div>
        </div>
        <ul>
            <li @click="changeColor(index)" :class="index1==index ?'red':''" v-for="(item,index) in 4">{{index+1}}</li>
            <!-- <li @click="changeColor(2)" :class="index==2 ?'red':''">2</li>
            <li @click="changeColor(3)" :class="index==3 ?'red':''">3</li>
            <li @click="changeColor(4)" :class="index==4 ?'red':''">4</li> -->
        </ul>
    </div>

   const vm = new Vue({
        el: '#app',
        data: {
            index1: 0,
            list: [1, 2, 3, 4],
            courseList: [
                {
                    title: '标题一'
                },
                {
                    title: '标题二'
                },
                {
                    title: '标题三'
                },
            ],
            obj: {
                name: 'zs',
                age: 18
            },
            coursList: [
                {
                    title: '标题一',
                    section: [
                        {
                            page: '第01天_HTML之HTML初始'
                        },
                        {
                            page: '第02天_HTML之HTML初始'
                        },
                        {
                            page: '第03天_HTML之HTML初始'
                        },
                    ]
                },
                {
                    title: '标题二',
                    section: [
                        {
                            page: '第01天_HTML之HTML初始'
                        },
                        {
                            page: '第02天_HTML之HTML初始'
                        },
                        {
                            page: '第03天_HTML之HTML初始'
                        },
                    ]
                },
            ]
        },
        methods: {
            changeColor(index) {
                console.log(index);
                this.index1 = index
            }
        }
    })

9，key

  <div id="app">
        <!-- 
            key:必须是唯一值
                必须是字符串或者数字
            作用：提高重排效率,就地复用
         -->
        <div v-for="(item,index) in list" :key="item.id">
            {{item.title}}
        </div>
    </div>

  let vm = new Vue({
        el: '#app',
        data: {
            list: [
                {
                    id: 1,
                    title: '标题一'
                },
                {
                    id: 2,
                    title: '标题二'
                },
                {
                    id: 3,
                    title: '标题三'
                },
            ]
        },
        methods: {
            
        }
    })

10，v-if与v-show区别

    <div id="app">
        <!-- 
            v-if v-show
            v-if:删除DOM元素
            v-show:隐藏元素
            v-if只修改一次的时候可以使用v-if
            v-show频繁切换的时候可以使用v-show
         -->
        <div v-if="false">123</div>
        <div v-show="false">456</div>

        <div v-if="age<18">未成年</div>
        <div v-else-if="age<30">而里之年</div>
        <div v-else-if="age<60">花甲之年</div>
        <div v-else>老年</div>
    </div>

 let vm = new Vue({
        el: '#app',
        data: {
            age: 1
        },
        methods: {

        }
    })

11，计算器

   <div id="app">
        <div id="box">计时器↓</div>
        <input type="text" v-model="value1">
        <select name="" id="" v-model="value4">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="value2">
        <button @click="add">=</button>
        <input type="text" v-model="value3">  
    </div>

   let vm = new Vue({
        el: '#app',
        data: {
            value1: '100',
            value2: '',
            value3: '',
            value4: '+',
        },
        methods: {
            getVal() {
                console.log(this.value1);
            },
            add() {
                if (this.value4 == '+'){
                    this.value3 = Number(this.value1)+ Number(this.value2)
                }else if(this.value4 == '-'){
                    this.value3 = Number(this.value1)- Number(this.value2)
                }else if(this.value4 == '*'){
                    this.value3 = Number(this.value1)* Number(this.value2)
                }else if(this.value4 == '/'){
                    this.value3 = Number(this.value1)/ Number(this.value2)
                }
            }
        }
    })

12，tap切换暂时不全不是最优

    * {
            margin: 0 auto;
            padding: 0;
        }

        #app {
            width: 100%;

        }

        select {
            width: 300px;
            height: 100px;
            text-align: center;
            font-size: 40px;
            display: block;
            background-color: bisque;
        }

        .box {
            text-align: center;
            width: 300px;
            height: 100px;
            font-size: 40px;
            background-color: bisque;
            line-height: 100px;
        }

        ul {
            margin-top: 10px;
            list-style: none;
            width: 1200px;
            height: 20px;
        }

        ul>li {
            text-align: center;
            width: 300px;
            float: left;
            background-color: bisque;
        }

        ul>li:hover {
            background-color: aquamarine;
        }

        .neironger {
            margin-top: 5px;
            width: 1200px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
            color: red;
            background-color: bisque;
        }

  <div id="app">
        <!-- 下拉框tap切换 -->
        <div class="=box">
            <select name="" id="" v-model="value1" @click="add">
                <option value="1">内容1</option>
                <option value="2">内容2</option>
                <option value="3">内容3</option>
            </select>
        </div>
        <div class="box">
            {{nr1}}
        </div>
        <!--横排tap切换  -->
        <ul>
            <li @click="tap(index)" v-for="(item,index) in 4">{{index+1}}</li>
        </ul>
        <div class="neironger">
            {{nr2}}
        </div>
        <!-- 三木表达式 v-show 显示隐藏Tap切换 -->
        <div class="neironger">
            <div v-for="(item,index) in 4" v-show="index1 == index ? true:false">内容{{index+1}}</div>
        </div>
    </div>

 let num
    let vm = new Vue({
        el: '#app',
        data: {
            nr1: '内容1',
            nr2: '内容1',
            value1: '1',
            index1: 0
        },
        methods: {
            add() {
                if (this.value1 == 1) {
                    this.nr1 = '内容1'
                } else if (this.value1 == 2) {
                    this.nr1 = '内容2'
                } else if (this.value1 == 3) {
                    this.nr1 = '内容3'
                }
            },
            // tap切换
            tap(index) {
                // console.log(index);
                this.nr2 = '内容' + Number(index + 1)
                // 三木表达式的下标获取
                this.index1 = index
            },
        }
    })
没有bug的小史
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值