11-22初始VUE

VUE响应式原理

添加属性的方式 :

let obj = { }
方式一：obj.name = ' 张三'
方式二：obj[ ' age ' ] = 20
方式三：Object.defineProperty(obj , ' sex'，{ value:‘男’ }) 补充：第一个参数是对象名，第二个参数属性名，第三个参数是所需要添加的值，常用上面两种，但是第三种方式也是有独特的优点。使用第三种方式给对象添加的属性，默认不可被枚举，也不能被删除，对属性的保护措施更加严格。需要添加代码方可操作删除以及枚举，可以添加enumerable ：true 允许被枚举， configurable : ture 允许被删除，都是默认不允许

vue响应式源码

let hello = {
            name: '张三',
            age: 20
        }
       // 把定义的对象渲染到页面
        document.querySelector("#ddd").innerHTML = hello.name
        document.querySelector("#age").innerHTML = hello.age
       // 创建个空对象
        let _data = {}
       // 给空对象添加name属性
        Object.defineProperty(_data, 'name', {
            get() {
       // 点击才可以获取数据。
                return hello.name
            },
            set(val) {
      // 对获取的数据进行修改，然后再渲染到桌面。
                hello.name = val
                document.querySelector("#ddd").innerHTML = hello.name
            }
        })
      // 给空对象添加age属性
        Object.defineProperty(_data, 'age', {
            get() {
      // 点击才可以获取数据。
                return hello.age
            },
            set(val) {
     // 对获取的数据进行修改，然后再渲染到桌面。
                hello.age = val
                document.querySelector("#age").innerHTML = hello.age
            }
        })

常用的指令操作

绑定

v-bind：用于绑定属性，可以再属性值里边表达式，也可以省略v-bind直接使用冒号： ,但是这个是单项绑定

v-on 绑定方法，省略v-on，用@也可以。
v- model 双向绑定，是v-bind和v-on 的结合

 <div id="app">
        <div>
            <span>姓名：</span>
            <!-- v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式 -->
            <!-- v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法 -->
            <input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
        </div>
        <div>
            <span>年龄：</span>
            <!-- v-bind:可以用:简写。 -->
            <!-- v-on:可以用@简写。 -->
            <!-- 如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象 -->
            <input type="text" :value="age" @input="age = $event.target.value">{{age}}
        </div>
        <div>
            <span>工作：</span>
            <!-- 通过v-model指令，可以实现对数据的双向绑定，
            v-model指令是 v-bind:value 和 v-on:input 的简写。-->
            <input type="text" v-model="job">{{job}}
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>

        // 关闭生产提示
        Vue.config.productionTip = false
        let vm = new Vue({
            el: '#app',
            //数据
            data: {
                name: '张三',
                age: 20,
                job:'程序员'
            },
            methods: {
                updateName(e){
                    //获取文本框里面的内容，更新数据
                    this.name = e.target.value
                }
            },
        })
    </script>

条件渲染和列表渲染

 <div id="app">
        <!-- 根据成绩，显示下面的等级 -->
        <h2 v-if="score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=70">中等</h2>
        <h2 v-else-if="score>=60">合格</h2>
        <h2 v-else>差</h2>
        <hr>
        <button @click="isShow=!isShow">显示/隐藏</button>
        <!-- 每次要根据isShow的值，确定是否渲染页面 -->
        <div v-if="isShow">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428174908_sgsyj.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144539&t=de45197a8aa3bf884b08b791723e7ed0">
        </div>
        <hr>
        <!-- 模板已经渲染成功，通过样式控制显示隐藏 -->
        <div v-show="isShow">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic40.nipic.com%2F20140428%2F9081536_114914525167_2.jpg&refer=http%3A%2F%2Fpic40.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640144712&t=1261090ac684bf8e3c83f61ed012a2a7">
        </div>
        <hr>
        <ul>
            <!-- v-for指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
            注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。 -->
            <li v-for="(item,index) in foods" :key="index">{{index}}--{{item.name}}--{{item.price}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#app',
            //定义数据
            data:{
                score:55,
                isShow:false,
                foods:[
                    {
                        id:1,
                        name:'薯片',
                        price:7.9
                    },
                    {
                        id:2,
                        name:'饼干',
                        price:3.9
                    },
                    {
                        id:3,
                        name:'面包',
                        price:9.9
                    },
                    {
                        id:4,
                        name:'蛋糕',
                        price:16.9
                    }
                ]
            }
        })
    </script>

v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。

补充：

// 关闭生产提示
        Vue.config.productionTip = false