<初学vue>3

147 阅读1分钟

仅供本人学习使用,侵删

Object.defineProperty方法 双向绑定的原理

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TryVue</title>
        <!--引入Vue-->
        <script type="text/javascript" src="../JS/vue.js"></script>
​
       
    </head>
    <body>
​
        <!--准备好一个容器-->
        <div id="root">
        
        </div>
    </body>
​
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生产提示
​
        let number=18
        let person={
            name:'rua',
            sex:'male',
        }
​
        Object.defineProperty(person,'age',{
            //value:18,
            //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
            get(){
                return number //这样 number的值改变时  age也会改变
            },
​
            //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value){
                number=value
            },
​
            enumerable:true,  //控制属性是否可以枚举,默认值是false
            writable:true,    //控制属性是否可以更改,默认值是false
            configurable:true, //控制属性是否可以删除,默认值是false
        })  //三个参数   对象   添加的属性名   配置项
            //使用此方法添加的属性  默认不可枚举  即不参与遍历  默认不可更改  默认 不可删除
​
        console.log(person)
        console.log(Object.keys(person))  //返回所有属性名
    
    </script>
</html>

其中let 命令,用于声明局部变量

使用 let 语句声明一个变量,该变量的范围限于声明它的块中。 可以在声明变量时为变量赋值,也可以稍后在脚本中给变量赋值。

使用 let 声明的变量,在声明前无法使用,否则将会导致错误。

如果未在 let 语句中初始化您的变量,则将自动为其分配 JavaScript 值 undefined

什么是数据代理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>何为数据代理</title>
    </head>
    <body>
        <!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)-->
        <script type="text/javascript" >
            let obj = {x:100}
            let obj2 = {y:200} //obj2为obj的代理Object.defineProperty(obj2,'x',{
                get(){
                    return obj.x  //这样当有人访问obj2的x时 就能看到obj的x值
                },
                set(value){
                    obj.x = value //这样当有人修改obj2的x时,就能修改obj的x值
                }
            })
        </script>
    </body>
</html>

vue的数据代理

1.Vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写) 2.Vue中数据代理的好处: 更加方便的操作data中的数据 3.基本原理: vm上本来有data但又 通过Object.defineProperty()把data对象中所有属性添加到vm上。 为每一个添加到vm上的属性,都指定一个getter/setter。 在getter/setter内部去操作(读/写)data中对应的属性。 4.可以在控制台 使用 vm. data来查看 vm中的data属性

vue事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TryVue</title>
        <!--引入Vue-->
        <script type="text/javascript" src="../JS/vue.js"></script>
    </head>
    <body>
​
        <!--准备好一个容器-->
        <div id="root">
        <h2>来打{{name}}吧!!!</h2>
        <button v-on:click="showInfo">查看秘密</button>
        <button @click="showInfo1(3800,$event)">查看秘密</button>  <!--简写方式为 @ -->
        </div>
    </body>
​
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止vue在启动时生成生产提示
​
        
​
        new Vue({
            el:'#root',
            data() {
                return {
                    name:'秘密'
                }
            },
​
            methods: {
             showInfo(){
                alert('Dota2')
                },
            showInfo1(number,event){
                alert('Dota2'+number)
                alert(event)
                }
            },
        })   
    </script>
</html>

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

事件修饰符

Vue中的事件修饰符:

1.prevent:阻止默认事件(常用);

2.stop:阻止事件冒泡(常用);

3.once:事件只触发一次(常用);

4.capture:使用事件的捕获模式; 在捕获阶段就开始处理

5.self:只有event.target是当前操作的元素时才触发事件;

6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;

注意事件修饰符可以连着写

如想先阻止冒泡再阻止默认事件 可以写:

@click.stop.prevent="XXXXX"