(一)VUE核心

(一)VUE核心

数据代理

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

    <script type="text/javascript">
        let obj = {x:4};
        let obj2 = {y:3};
​
        Object.defineProperty(obj2,'x',{
            //访问obj2.x,访问的是obj.x
            get(){
                return obj.x;
            },
            
            //修改obj2.x修改的是obj.x
            set(value){
                obj.x = value;
            }
        })
​
    </script>

VUE中的数据代理

data当中的数据会通过VUE对象来进行管理,

VUE对象通过数据代理的方式,来读写data当中的数据

    <script type="text/javascript">
        let vm =  new Vue({
            el:'#root',
            data:{
                name:'hello',
            }   
        })
​
        console.log(vm.name)
​
    </script>

通过数据代理读取和修改数据

vm.name
"hello"
vm.name = "world"
"world"

  • Vue中的数据代理,通过VM对象来代理data对象中属性的操作
  • Vue中数据代理的好处:更加方便的操作data中的数据
  • 基本原理:通过Object.difineProperty()把所有对象中所有属性添加到vm上,为每一个添加到vm上的属性,都指定一个getter/setter中去,在getter/setter内部去操作

image-20210806151407857

事件处理

事件的基本使用

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

    <div id = "root">
        <button  v-on:click="showinfo">点我提示信息</button>
        <button  @click="showinfo">点我提示信息</button>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
​
        new Vue({
            el:"#root",
            methods:{
                showinfo(event){
                    // alert("hello");
                    // console.log(event.target.innerText)  //输出事件来源标签的内容
                    // console.log(this)    //此处的this表示的是vm(Vue实例)
                }
            }
        })
    </script>

    <div id = "root">
        <!-- 不加修饰符会立即跳转 -->
        <a href="https://siqulab.cn" @click = "showinfo($event,66)">点击我进行跳转</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
​
        new Vue({
            el:"#root",
            methods:{
                showinfo(event,a){  //传递参数
                    console.log(a)
                },
            }
        })
    </script>

事件修饰符

  • prevent:阻止默认事件(常用)
  • stop:阻止事件冒泡(常用)
  • once:事件只触发一次
  • capture:使用事件的捕获模式
  • self:只有event.target是当前操作的元素时才触发事件
  • passive:事件的默认行为立即执行,无需等待时间回调执行完毕

    <div id = "root">
        <!-- 不加修饰符会立即跳转 -->
        <a href="https://siqulab.cn" @click = "showinfo($event,66)">点击我进行跳转</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
​
        new Vue({
            el:"#root",
            methods:{
                showinfo(event,a){  //传递参数
                    console.log(a)
                },
            }
        })
    </script>

键盘事件

  • Vue中常用的按键别名:回车 =》enter删除 =》delete退出 =》esc换行 =》tab(特殊,必须配合keydown去使用)空格 =》space换行 =》tab上 =》 up下 =》 down左 =》 left右 =》 right
  • Vue中未提供的别名的按键,可以使用按键原始的key值去确定,但注意转为kebab-case(短横线命名)
  • 系统修饰键(用法特殊):ctrl、alt、shift、meta
    • 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才会被处罚
    • 配合keydown使用:正常触发事件
  • 也可以使用keyCode去指定具体的按键(不推荐)
  • Vue.config.keyCodes.自定义按名 = 键码,可以取定制按键别名

    <div id = "root">
        <input type="text" @keyup.enter = "showinfo($event,66)"></input>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        //Vue.config.keyCodes.huiche = 13   //自定义别名
​
        new Vue({
            el:"#root",
            methods:{
                showinfo(event,a){  //传递参数
                    console.log(a)
                },
            }
        })
    </script>

事件总结

  • 如果需要使用多个修饰符,那么可以使用.进行连接

@click.prevent.stop

  • 系统修饰符后面添加.x,只有 系统修饰符+ x才能触发

计算属性与监视

计算属性

image-20210806224132488

插值语法实现

    <div id = "root">
        姓:<input type="text" v-model = "firstName" > <br/>
        名:<input type="text" v-model ="lastName" ><br/>
        姓名:<span>{{firstName}}-{{lastName}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:"#root",
            data:{
                firstName:"张",
                lastName:"三"
            },
            methods:{
            }
        })
    </script>

methods方法实现

    <div id = "root">
        姓:<input type="text" v-model = "firstName" > <br/>
        名:<input type="text" v-model ="lastName" ><br/>
        姓名:<span>{{spanname()}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:"#root",
            data:{
                firstName:"张",
                lastName:"三"
            },
            methods:{
                spanname(){
                    return this.firstName + "-" + this.lastName;
                }
            }
        })
    </script>

  • 定义:要用的属性不存在,要通过已有的属性计算得来
  • 原理:底层借助了Object.defineproperty方法提供的getter和setter
  • get函数什么时候执行?
    • 初次读取时会执行一次
    • 当依赖的数据发生变化的时候会再次被调用
  • 优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
  • 备注:
    • 计算属性最终会出现在vm上,直接读取使用即可
    • 如果计算属性要被修改,那必须写set函数去相应修改,且set中要引起计算时依赖的数据发生改变

    <div id = "root">
        姓:<input type="text" v-model = "firstName" > <br/>
        名:<input type="text" v-model ="lastName" ><br/>
        姓名:<span>{{fullname}}</span>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm =  new Vue({
            el:"#root",
            data:{
                firstName:"张",
                lastName:"三"
            },
            computed:{
                fullname:{
                    //当读取fullname属时,get会被调用
                    get(){
                        return this.firstName + "-" + this.lastName;
                    },
​
                    //当修改fullname时,set会被调用
                    set(value){
                        const arr = value.split("-")
                        this.firstName = arr[0]
                        this.lastName = arr[1]
                    }
                }
            }
        })
    </script>

监视属性

设计案例

image-20210807095840862

使用计算属性来完成

    <div id = "root">
        <p>今天天气很{{info}}</p> <br/>
        <button @click = "showinfo($event)" >切换天气</button>
    </div>
​
    <script type="text/javascript">
        const vm =  new Vue({
            el:'#root',
            data:{
                isinfo:true
            },                                           
            computed:{
                //只用来读取这个属性,所以使用简写的方式
                info(){
                    return this.isinfo ? c c"炎热" : "寒冷"
                }
            },
            methods: {
                showinfo($event){
                    this.isinfo = !this.isinfo
                }
            },
        })
    </script>

  • 当被监视的属性变化时,回调函数自动调用,进行相关操作
  • 监视的属性必须存在,才能进行监视
  • 监视的两种写法:
    • new watch时传入watch配置
    • 通过vm.$watch进行监视

    <div id = "root">
        <p>今天天气很{{info}}</p> <br/>
        <button @click = "showinfo($event)" >切换天气</button>
    </div>
​
    <script type="text/javascript">
        const vm =  new Vue({
            el:'#root',
            data:{
                isinfo:true
            },
            computed:{
                info(){
                    return this.isinfo ? "炎热":"寒冷"
                }
            },
            methods: {
                showinfo($event){
                    this.isinfo = !this.isinfo
                }
            },
            watch:{
                isinfo:{
                    immediate:true, //初始化时让handler调用一次
                    //当isinfo发生改变的时候,handler被调用
                    handler(newVuale,oldVuale){
                        console.log("isinfo被修改了")
                    }
                }
            }
        })
​
        // 使用vm的函数来进行监视属性
        // vm.$watch("isinfo",{
        //     immediate:true, //初始化时让handler调用一次
        //     //当isinfo发生改变的时候,handler被调用
        //     handler(newVuale,oldVuale){
        //         console.log("isinfo被修改了")
        //     }           
        // })
​
    </script>

深度监视

  • Vue中的watch默认不检测对象内部值的改变(一层)
  • 配置deep:true可以监测对象内部值的改变(多层)
  • Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
  • 使用watch时根据数据的具体结构,决定是否采用深度监视

    <div id = "root">
        <button @click = "number.a++">修改a:{{number.a}}</button> <br/>
        <button @click = "number.b++">修改b:{{number.b}}</button>
    </div>
​
    <script type="text/javascript">
        const vm =  new Vue({
            el:'#root',
            data:{
                isinfo:true,
                number:{
                    a:1,
                    b:2,
                }
            },
            watch:{
                number:{
                    deep:true,  //开启深度监视
                    handler(){
                        console.log("number被改变了")
                    }
                }
            }
        })
    </script>

监视的简写形式

  • 当在watch配置项中,如果没有开启immediatedeep属性的时候,可以使用监视的简写形式来更快效率的进行开发

watch:{
    isinfo(newvalue,oldvalue){
        console.log("isinfo被改变了")
    }
}

  • vm.$watch()中也可以进行简写的形式:

vm.$watch("isinfo",function(){
    console.log("isinfo被改变了")
})

计算和监视的比较

区别

  • computed能完成的功能,watch都可以完成
  • watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作

两个重要的小原则

  • 所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象
  • 所有不别Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm 或组件实例对象

class与style绑定

绑定class样式

切换三种class样式

    <div id = "root">
        <div :class = "sty">hello</div> <br/>
        <button @click = "changeMood" >切换效果</button>
    </div>
​
    <script type="text/javascript">
        const vm =  new Vue({
            el:'#root',
            data:{
                sty:"happy",
            },
            methods: {
              changeMood(){
                  const arr = ["happy","sad","normal"]
                  const index = Math.floor(Math.random()*3)
                  console.log(arr[index])
                  this.sty = arr[index]
              }
            },
        })
    </script>

样式表

.happy{
    border: 2px solid blue ;
    color: blue;
    width: 60px;
}
​
.sad{
    border: 2px solid brown;
    color: brown;
    width: 60px;
}
​
.normal{
    border: 2px solid red;
    color: red;
    width: 60px;
}

    <div id = "root">
        <!-- 绑定class样式,字符串写法,适用于:样式的类名不确定,需要动态指定 -->
        <div :class = "sty">hello</div> <br/>
        <!-- 绑定class样式,数组写法,适用于:要绑定的样式个数不确定,名字也不确定 -->
        <div :class = "classarr">hello2</div> <br/>
        <!-- 绑定class样式,对象写法,适用于:要绑定的个数确定、名字也确定,但要动态决定用不用 -->
        <div :class = "classobj">hello3</div> <br/>
        <!-- 绑定style样式,对象写法 -->
        <div :style = "styleObj">hello4</div> <br/>
​
        <button @click = "changeMood" >切换效果</button>
    </div>
​
    <script type="text/javascript">
        const vm =  new Vue({
            el:'#root',
            data:{
                sty:"happy",
                classarr:["sad","happy","normal"],
                classobj:{
                    sad:false,
                    happy:false,
                    normal:true,
                },
                styleObj:{
                    color : "white",
                    backgroundColor:"red",
                    width:"60px",
                }
            },
            methods: {
              changeMood(){
                  const arr = ["happy","sad","normal"]
                  const index = Math.floor(Math.random()*3)
                  console.log(arr[index])
                  this.sty = arr[index]
              }
            },
        })
    </script>

  • 写法:class=”xx”x可以是字符串、对象、数组 字符串写法适用于:类名不确定,要动态获取。 对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。 数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
  • <code>: style=”{fontsize:xx}”</c其中xxx是动态值 : style=”[a,b]”其中a、b是样式对象

© 版权声明
THE END
喜欢就支持以下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容