Vue笔记-Day02

最新推荐文章于 2024-07-22 15:13:59 发布

爱吃饭的阿强

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量84

点赞数

分类专栏： vue\ 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57155307/article/details/122081468

版权

vue\ 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.1数据代理

通过一个对象代理另一个对象中的属性的操作（读 / 写）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.defineproperty</title>
</head>
<body>
  <script type="text/javascript">
      let number = 18
      let person = {
          name:'Aq',
          gender:'man'
      }
      Object.defineProperty(person,'age',{
          // value:number,
          // enumerable:true,//控制属性是否可以枚举
          // writable:true,//控制属性是否可以修改
          // configurable:true,//控制属性是否可以删除
		//当有人访问age属性时，调用此方法并返回number
          get() {
              return number;
          },
          //当有人修改age属性时，调用此方法，且会收到具体修改的值
          set(v) {
              number = v
          }
      })
      console.log(person)
  </script>
</body>
</html>

这就是数据代理的一个简单例子，我们利用Object.defineProperty来修改了其中number的值。

Vue中的数据代理：

由Vue也就是vm来进行代理，当访问到vm中的属性时，调用getter去date也就是model中获取相应的值；当修改vm中的属性时，调用setter去修改data的值。

在vm中的data数据放在_data中；

2.2事件：

1.使用v-on:xxx 或 @xxx 来绑定事件，xxx是事件名；
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.在methods中配置的函数，不要用箭头函数；
4.methods中配置的函数，都是被Vue所管理的函数，this指向的是vm 或组件实例对象;
5.@click=“demo” 与 @click=“demo($event)” 效果一致，但后者可以传参。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Event</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>hello,{{name}}</h2>
        <button v-on:click="showInfo1">click me</button>
        <button @click="showInfo2($event,66)">click me too</button>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el:'#root',
            data:{
                name:'vue2'
            },
            methods:{
                showInfo1(event){
                    console.log(event.target.innerText)
                    alert("hello,my friend!")
                },
                showInfo2(event,number){
                    console.log(event.target.innerText)
                    console.log(number)
                    console.log(event)
                    alert("hello,my friend!")
                },
            }
        })

    </script>
</body>
</html>

Vue中的事件修饰符：

1.Prevent：阻止默认事件；
2.Stop：阻止事件冒泡；
3.Once：事件只触发一次；
4.Capture：使用事件的捕获模式；
5.Self：只有event.target是当前操作的元素才能触发事件；
6.Passive：事件的默认行为立刻执行，无需等待事件回调执行完毕。

事件修饰符可以连续使用，
如：@click.stop.once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .box1{
            padding: 5px;
            background-color: cadetblue;
        }
        .box2{
            padding: 5px;
            background-color: deepskyblue;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <h2>hello,{{name}}</h2>
<!--    1.Prevent：阻止默认事件；-->
    <a href="http://www.baidu.com" @click.prevent="showInfo1">click me get information</a>
<!--    2.Stop：阻止事件冒泡；-->
    <div @click="showInfo1">
        <button @click.stop="showInfo1">click me</button>
    </div>
<!--    3.Once：事件只触发一次；-->
    <button @click.once="showInfo1">click me</button>

<!--    4.Capture：使用事件的捕获模式；-->
    <div class="box1" @click.capture="showmsg(1)">
        div1
        <div class="box2" @click="showmsg(2)">
            div2
        </div>
    </div>
<!--    5.Self：只有event.target是当前操作的元素才能触发事件；-->
    <div class="box1" @click.self="showInfo1">
        <button @click="showInfo1">click me</button>
    </div>
<!--    6.Passive：事件的默认行为立刻执行，无需等待事件回调执行完毕。-->
    <ul @wheel.passive="demo" class="list">
<!--    <ul @scroll="demo" class="list">-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>


<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            name:'vue2'
        },
        methods:{
            showInfo1(event){
                console.log(event.target.innerText)
                alert("hello,my friend!")
            },
            showInfo2(event,number){
                console.log(event.target.innerText)
                console.log(number)
                console.log(event)
                alert("hello,my friend!")
            },
            showmsg(number){
                alert(number)
            },
            demo(){
                console.log("@")
            }
        }
    })

</script>
</body>
</html>

键盘事件：

1.Vue中常用的按键别名：

回车 =》 enter
删除 =》 delete
退出 =》 esc
空格 =》 space
换行 =》 tab
上 =》up
下 =》dowm
左 =》left
右 =》right

2.Vue未提供的按键，可以使用按键原始的key值去绑定，要注意格式为kebab-case; 如：Enter-13;

3.系统修饰键：ctrl,alt,shift,meta(windows键)
（1）配合keyup使用，按下修饰键的同时，再按下其他键，随后释放其他键，事件才会触发。
（2）配合keydown使用，正常触发事件

4.可以使用keyCode去指定具体的按键

5.Vue.config.keyCodes.自定义键名 = 键码可以定制按键别名

6.可以用这种写法 @Keyup.ctrl.y 相当于同时按下ctrl和y时会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>hello,{{name}}</h2>
    <input type="text" placeholder="click enter to input" @keyup.enter="showInfo">
    <input type="text" placeholder="click enter to input" @keydown.tab="showInfo">
    <input type="text" placeholder="click enter to input" @keyup.ctrl="showInfo">
    <input type="text" placeholder="click enter to input" @keyup.huiche="showInfo">

</div>

<script type="text/javascript">
    Vue.config.keyCodes.huiche = 13

    const vm = new Vue({
        el:'#root',
        data:{
            name:'vue2'
        },
        methods:{
           showInfo(e){
               console.log(e.target.value)
           }
        }
    })

</script>
</body>
</html>

2.3 计算属性：

1.定义：要用的属性不存在，要通过已有的属性计算得到；
2.原理：底层是使用Object.defineproperty的getter和setter；
3.get函数的执行时机：
（1）当第一次读取时要计算；
（2）当依赖数据出现改动时要计算；
4.优势：与methods实现相比，内部有缓存机制，效率更高；
5.备注：
（1）计算属性和data一样最终会出现在vm上；
（2）如果计算属性要修改，必须去set方法中去做相应的修改，且set方法中要使得依赖数据的内容发生改变；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        FirstName:<input type="text" v-model="firstName"> <br><br>
        LastName:<input type="text" v-model:value="lastName"> <br><br>
        <p>FullName:<span>{{fullName}}</span></p>
        <p>FullName:<span>{{fullName}}</span></p>
        <p>FullName:<span>{{fullName}}</span></p>
        <p>FullName:<span>{{fullName}}</span></p>
        <p>FullName:<span>{{fullName}}</span></p>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip=false

        const vm = new Vue({
            el:'#root',
            data:{
                firstName:'Excaliba',
                lastName:'Joy'
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName+"-"+this.lastName;
                    },
                    set(value){
                        const arr = value.split("-")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>
</body>
</html>

当计算属性只需读取而不用修改时，可以用简单写法：

            computed:{
                fullName:function () { //getter
                    return this.firstName+"-"+this.lastName
                }
            }

爱吃饭的阿强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记-Day02

2.1数据代理通过一个对象代理另一个对象中的属性的操作（读 / 写）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Object.defineproperty</title></head><body> <script type="text/javascript"> l
复制链接

扫一扫