（一）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内部去操作

事件处理

事件的基本使用

使用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才能触发

计算属性与监视

计算属性

插值语法实现

    <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>

监视属性

设计案例

使用计算属性来完成

    <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配置项中，如果没有开启immediate和deep属性的时候，可以使用监视的简写形式来更快效率的进行开发

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

VUE框架网页前端