美文网首页
Day1.Vue(基本使用和define.properties)

Day1.Vue(基本使用和define.properties)

作者: 阿沙冲冲冲 | 来源:发表于2019-06-24 19:37 被阅读0次

    基本使用(概念)

    1.vue的三大核心core,vuex(状态管理),vue-Router(路由),也称为VUE全家桶。
    ​2. 每个页面可以拆分成多个组件(把一个页面或者一个功能分成几个模块)
    3.每一个vue的实例都需要挂载在一个大的容器盒子里。

    v-bind与v-model

    1.v-bind是vue中提供用于绑定属性的指令,可以近些为:+要绑定的属性,v-bind中可以写合法的js表达式。
    2.v-model用于数据的双向绑定,注意v-model只能运用在表单元素中。
    二者的区别:v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定。
    v-model可以实现表单元素和model中数据的双向数据板顶。

    v-on

    是事件绑定机制,缩写是@,如@click

    vue的事件修饰符

    1.使用.stop阻止冒泡:@click。stop值触发该目标事件
    2.阻止默认行为:如a标签的跳转,@click.prevent
    3..cpture:添加事件侦听器使用捕获模式,就是先触发捕获事件。
    4..self只有点击当前元素的时候,才会触发事件的事件处理函数。
    5.。once使用once事件只触发一次
    self和stop的区别
    self只会阻止自己身上的冒泡行为的触发,并不会真正阻止冒泡行为。

    关于mvc与mvvm

    mvvm是前端视图层的分层开发思想,主要把每个页面分成了M\V和vm,其中vm是mvvm思想的核心;因为vn是m和v之间的调度者。
    M:这里的M保存的是每个页面中单独的数据(发送Ajax拿回来的数据)
    V:就是每个页面中的html结构
    vm:他是一个调度者,分割了M和V(每当V层想要获取后保存数据的时候,都要有VM做中间的处理),也就是说存取数据都要经过VM层。
    前端页面中使用mvvm的思想,主要是为了让我们开发更加方便,因为mvvm提供了数据的双向绑定;注意:数据的双向绑定是VM提供的。


    mvc与mvvm.png

    关于object.creat和boject和define.properties

    <button onclick="obj.fullName='ddwdwqdwqdd'">sdasdsad</button>
            <script type="text/javascript">
                let obj = {
                    firstName: "kobe",
                    lastName: "bryant"
                }
                //第二个括号就是对配置对象进行说明
                Object.defineProperties(obj,{
                    //怎么去取obj中的值,使用get方法,return这个就是fullName想要设置的值,
                    //这个get方法谁调用?就是指定的obj方法去调用的,所以可以直接this点
                    fullName:{
                        get(){
                            return this.firstName+"   "+this.lastName;
                        },
                        set(data){//监听扩展属性,当扩展属性发生变动时候自动调用,set里面的data接受的就是变动的值;
                            //如果没去改变fullname的值,则set方法不会被调用
                            //console.log(data);//打印出来maidi
                            let name="haha";
                            this.firstName=name;
                            console.log(data)
                            console.log(this.firstName)//haha
                        }
                    }
                })
    
                console.log(obj.fullName);//kobe   brynt
                console.log(obj.firstName)
                //obj.fullName="maidi";
                //console.log(obj.fullName);//没能修改fullname值,还是console kobe
                
                let obj1={
                    firstName: "trcy",
                    lastName: "maidi",
                    get fullName(){
                     return this.firstName+"   "+this.lastName;
                    },
                    set fullName(data){
                        console.log(data)
                    }
                }
                console.log(obj1);
                obj1.fullName="mai111di";//这种方式consloe出来的值也是一样的,无权修改里面属性,需要调用set();
    

    相关文章

      网友评论

          本文标题:Day1.Vue(基本使用和define.properties)

          本文链接:https://www.haomeiwen.com/subject/zuevqctx.html