vue基础

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
https://unpkg.com/vue@3

Object.defineProperty()

监听一个 对象 上 的 属性值的 获取和 更改，，任何访问 和 任何修改，都会被知道
vue2 更改状态，修改视图 的原理

<div id="box">div>
<script>
    var obj = {
    }

    var box = document.querySelector("#box");
    // 任何访问，和任何修改 都会被知道
    Object.defineProperty(obj,"myname",{
        get:function(){
            // 任何访问这个  obj 的 myname 属性 时，都会走这个方法
            console.log("get")
        },
        set:function(value){ // value：修改的值
            // 修改这个属性时，都会走这个方法
            console.log("set :  "+value)
            box.innerText = value
        }
    })
    
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

常用指令

v-html
v-text
v-bind
v-on
v-show
v-if
v-model
v-for

动态绑定 class

<div :class="isColor?'red':'yellow'"> change backgrounddiv>
1

动态显示隐藏 切换

// 动态显示 隐藏
this.isShow = !this.show
1
2

动态绑定class， 对象，数组 形式
当多个 class 都需要来回 控制显示，三元运算符不能满足要求

<div id="box">
   <div :class="classObj">1231对象div>
   <div :class="classArr">1231数组div>
    <div :style="styleObj">动态切换对象div>
    <div :style="styleArr">1231数组div>
div>
<script>
    //  多个class 都显示： 动态切换
 var vm = new Vue({
        el:"#box",
        data:{
            classObj:{
                // 控制 class名字 是 true 还是 false。。。true就有
                yellow:true,
                red:false,
                cc:true,
            },
            // 对象后期添加属性，不会动态拦截。。。
            // vue 中 将数组添加元素等方法，重写了。。也一样进行了拦截 ？？？？？？？？？？？？？？？？？？？？？？
            classArr:["cc","yellow"],
            styleObj:{
                backgroundColor:"red"
            },
            styleArr:[{backgroundColor:"pink"}]

        },
    })

    // 设置 defineProperty  添加属性监听get，set
    Vue.set(vm.classObj,"dd",true)

//    vue3 支持动态增加属性的拦截
    vm.styleArr.push({fontSize:"30px"})
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

vue2 中的 data，是在第一次加载的时候，使用defineProperty() ，监听属性值，，后面在添加的属性值，就无法监听到.
解决： Vue.set(对象,要监听的属性,属性值)
vue3 支持动态增加属性的拦截

vue3 的创建方法

<div id="box">
    {{ myname }}
    <div :class="classObj">111111div>
    <button @click="handleAdd">addbutton>
div>
<script>
    var obj = {
        data(){
            // 函数式 数据返回，， 防止变量影响
            return {
                myname:"cc",
                classObj: {
                    red:true
                }
            }
        },
        methods:{
            handleAdd(){
                // vue 后面添加的 也会被监听
                this.classObj.dd=true
            }
        }
    }
    Vue.createApp(obj).mount("#box")
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26