Vue基础知识点1

最新推荐文章于 2023-07-22 02:30:00 发布

鲸是鲸鱼的鲸

最新推荐文章于 2023-07-22 02:30:00 发布

阅读量143

点赞数

文章标签： vue 基础知识点

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97239922

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

v-for 遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="(item,index) in arr">{{item}}-----{{index}}</div>
        <hr>
        <div v-for="(item,index) in 'qianfeng'">{{item}}-----{{index}}</div>
        <hr>
        <div v-for="(item,index) in 5">{{item}}-----{{index}}</div>
        <hr>
        <div v-for="(item,index) in obj">{{item}}</div>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
           arr:[10,20,30,40],
           obj:{
               username:"zhangsan",
               age:10
           }
        }
    })

    /*
       v-for:  遍历

        可以用来遍历任何对象
            数组 字符串   对象.......
    
    */


</script>

v-on 时间绑定简写@

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            .box{
                width:200px;
                height: 200px;
                background: red;
            }
    
            .box1{
                width: 100px;
                height: 100px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h2>{{msg}}</h2>
            <!-- <button v-on:click="handleClick">点击</button> -->
            <button @click="handleClick">点击</button>
            <hr>
    
            <div class="box" @click="handleBox(123,$event)">
                <div class="box1" @click.stop.once="handleBox1"></div>
            </div>
            <hr>
    
            <div class="box" @click="handleBox">
                    <div class="box1" @contextmenu.prevent.stop="handleBox1"></div>
            </div>
    
            <hr>
            <input type="text" @keydown.enter="handlekeydown">
        </div>
    </body>
    </html>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
               msg:1910
            },
            //用来存放vue所需要的函数   当前组件所需要的函数
            methods:{
                handleClick(){
                   this.msg = 1907
                },
                handleBox(val,e){
                    console.log(val,e)
                },
                handleBox1(){
                    alert('box1')
                }
                ,handlekeydown(){
                    console.log(111)
                }
            }
        })
    
        /*
          v-on：事件绑定
            语法：
                v-on:事件名称 = 事件函数
                v-on:click=事件函数
    
    
          简写：@事件名称
    
    
          修饰符：
            作用：修饰指令
    
            语法：
                指令.修饰符.修饰符........
    
            stop    阻止冒泡
            prevent 阻止浏览器默认事件
            enter   按下回车
            once    事件只绑定一次
    
          事件对象：
            如果需要使用事件对象的情况下只需要给函数传递一个$event即可
    
    
    
        数据能够驱动视图？底层用的是Object.defindProperty()来做数据的劫持
        
        */
    
    
    </script>

v-pre、 v-cloak、 v-once

<div>{{msg}}</div>
        <p v-pre>vue中的{{msg}}用来解析数据的</p>

在这里插入图片描述

br

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <p v-pre>vue中的{{msg}}用来解析数据的</p>
        <h2>{{msg}}</h2>
        <button @click="handleClick()">修改</button>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>

    let vm = new Vue({
        el:"#app",
        data:{
            msg:1910
        }
        ,methods:{
            handleClick(){
                this.msg = 1907;
            }
        }
    })

/*
    v-pre:作用是不解析{{}}
    v-cloak : 作用防止{{}}在vue.js没有加载进来的时候显示
    v-once:数据只解析一次

*/
</script>

先看效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <hr>
        <label>
            男 <input type="radio" value="男" v-model="radioVal">
        </label>
        <label>
            女<input type="radio" value="女" v-model="radioVal">
        </label>
        <p>您选择的性别是：{{radioVal}}</p>
        <hr>
        <label>
            抽烟 <input type="checkbox" value="抽烟" v-model="checkVal">
        </label>
        <label>
            喝酒 <input type="checkbox" value="喝酒" v-model="checkVal">
        </label>
        <label>
            烫头 <input type="checkbox" value="烫头" v-model="checkVal">
        </label>
        <label>
            大保健 <input type="checkbox" value="大保健" v-model="checkVal">
        </label>
        <ul>
            <li v-for="item in checkVal">{{item}}</li>
        </ul>
        <hr>
    <select v-model="seletVal">
        <option value="1998">1998</option>
        <option value="1999">1999</option>
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
    </select>
    <p>您的出身日期为:{{seletVal}}</p>
    <hr>
    <h2>基于Object.defineProperty实现双数据绑定</h2>

    <label>
        抽烟 <input type="checkbox" value="抽烟" @change="handleChange($event)">
    </label>
    <label>
        喝酒 <input type="checkbox" value="喝酒" @change="handleChange($event)">
    </label>
    <label>
        烫头 <input type="checkbox" value="烫头" @change="handleChange($event)">
    </label>
    <label>
        大保健 <input type="checkbox" value="大保健" @change="handleChange($event)">
    </label>
    <ul>
        <li v-for="(item,index) in arr">{{item}}</li>
    </ul>
</div>

</body>

</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 1910,
            radioVal: "男",
            checkVal: [],
            seletVal: 2000,
            arr:[]
        },
        methods: {
            handleChange(e){
                let val = e.target.value;
                if(this.arr.length>0){
                    let flag = this.arr.includes(val);
                    if(flag){
                        let index= this.arr.indexOf(val);
                        this.arr.splice(index,1)
                    }else{
                        this.arr.push(val);
                    }

                }else{
                    this.arr.push(val);
                }
            }
        },
    })


    /*
       v-model:双数据绑定
           v-model可以直接修改data中的属性值，当数据发生改变的时候视图也会发生改变

           v-model只能应该到form表单身上 其他元素无法使用

           v-model也有自己的修饰符 number  代表输入框里面的值是一个数字类型的

       底层原理
           Object.defindProperty来实现,在vue3.0中  将Object.defindProperty替换成了Proxy,
           通过给data中的每一个属性加一个数据劫持(给每一个属性加了一个getter/setter方法)

    */
</script>

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识点1

v-for 遍历<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
复制链接

扫一扫