（Vue -01）初始Vue + Vue的响应式原理(使用Object.defineProperty给代理对象添加属性) + Vue的常用指令 + 条件渲染和列表渲染

渐进式JavaScript框架：就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。（当然也可以从头到尾全部用Vue搭建）

一、初始Vue

1.给Vue准备一个容器

（它需要一个DOM容器，给vue去使用）

    <div id="app">
        <h2>姓名：{{name}}</h2>
        <h2>年龄：{{age}}</h2>
        <!-- v-on:指令用于绑定事件 -->
        <button v-on:click="updateName">修改姓名</button>
        <button v-on:click="updateAge">修改年龄</button>
    </div>

vue的点击事件绑定 <button v-on:click="方法名">修改姓名</button>

（小回顾）
bindtap="方法名" //微信小程序的触屏绑定
onclick="方法名()" //原生的点击绑定

2.引入vue.js文件

方式1：引入本地vue.js文件

    <!-- 开发版本 -->
    <script src="../js/vue.js"></script>
    <!-- 生产版本 （打包上线时使用此版本）-->
    <script src="../js/vue.min.js"></script>

方式2：通过CDN引入

   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

3.创建一个Vue对象

      let vm = new Vue({
            //指定当前Vue对象操作的DOM容器
            el:'#app',
            //定义当前Vue对象管理的数据
            data:{
                name:'张三',
                age:20
            },
            //定义当前Vue对象管理的方法
            methods: {
                //修改姓名的方法
                updateName(){
                    this.name = '李四'
                },
                //修改年龄的方法
                updateAge(){
                    this.age = 30
                }
            },
        })

在vue的配置选项里面，定义的所有的数据以及定义的所有方法，都会成为Vue的属性。
在方法里面，this指向的是对象本身。

el:' #容器的id '， // 指定当前Vue对象操作的DOM容器
data: { }， // 定义当前Vue对象管理的数据
methods: { }， // 定义当前Vue对象管理的方法

以下为网页显示效果：

点击修改姓名-- 姓名变成李四
点击修改年龄-- 年龄变成30

*小注意：初创建vue，会出现以下2条提示：

*解决方法：
下载安装vue-devtools工具（官方调试工具），
关闭生产提示：创建Vue对象前先键入： Vue.config.productionTip = false
*安装vue-devtools工具后，可进入后台，进入Vue的调试工具以检查我的数据

二、Vue的响应式原理

1.理解什么是代理对象

1.定义源对象

       let obj1 = {
            name:'张三',
            age:20
        }

2.定义代理对象

       let obj2 = obj1; 
        console.log('obj2:',obj2); 
        //代理对象修改了源对象的数据
        obj2.name = '李四'; 
        obj2.age = 30; 
        console.log(obj1);   //{name: '李四', age: 30}

obj2是obj1的代理对象，代理对象修改了源对象的数据。
通过obj2 修改了obj1 的姓名和年龄，那obj1也变了哦~

2.看一下Vue是如何使用代理对象的

1.定义源对象（就是定一份数据）

       let myData = {
            name:'张三',
            age:20
        }

2.将一个数据传递给Vue的data选项（背后做了两件事情）
1）设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
2）将_data里面代理的所有数据，再添加到当前Vue实例身上。（为了Vue实例方便调用数据）

        let vm = new Vue({
            data:myData         //把myData这个对象传给了vue实例
        })
        vm._data.name = '李四';     //data和_data互相影响，一方变另一方也变
        vm._data.age = 30;
        console.log(vm);
        console.log(myData);

因为对象是引用类型，在传递时，传的是地址。
操作_data，真正改变的是data，此时就可以将_data当做是data的代理对象。

3.给对象添加属性的几种方式

       let obj3 = {}

方式一：

      obj3.name = '张三';

方式二：

      obj3['age'] = 20;

方式三：

      Object.defineProperty(obj3,'sex',{
            value:'男',                //属性值
            enumerable:true,           //允许被枚举（默认不允许）
            configurable:true          //允许被删除（默认不允许）
        })
        console.log(obj3);

Object.defineProperty( 对象名，属性名，{ 属性值 } )
通过Object对象的defineProperty方法，给指定的对象添加指定的属性。
使用这种方式，给对象添加的属性，默认不可被枚举，不能被删除；
使用这种方式，给对象添加的属性，对属性的保护措施更加严格。

      //枚举出对象的所有属性（其实就遍历出对象的所有属性名）
        for(let key in obj3){
            console.log(key);
        }

        //通过delete关键，可以删除对象身上的指定属性
        delete obj3.name
        delete obj3.sex
        console.log(obj3);

如果没有设置enumerable值和configurable值，那就不可以遍历出对象的属性名，也不可以删除哦

*此处插个播，看看不要钱 JavaScript中的可枚举属性与不可枚举属性

4.Vue响应式的原理 ★★★★★

    <div>
        <h2>姓名：<span id="name"></span></h2>
        <h2>年龄：<span id="age"></span></h2>
    </div>

1.定义一个源对象

       let data = {
            name:'张三',
            age:20
        }

2.定义一个代理对象（使用_data 去代理 data）

       let _data = {}

3.使用Object.defineProperty给代理对象添加属性

        Object.defineProperty(_data,'name',{
            //这里除了写value，还可以写2个方法哦~
            //get方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
            get(){
                // console.log('get方法执行了');
                return data.name
            },
            //set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
            set(val){
                // console.log('set方法执行了');
                data.name = val
                //当代理对象，监听到数据发生变化了，就会重新渲染页面
                document.querySelector('#name').innerHTML = data.name
            }
        })
        Object.defineProperty(_data,'age',{
            get(){
                return data.age
            },
            set(val){
                data.age = val
                //当代理对象，监听到数据发生变化了，就会重新渲染页面
                document.querySelector('#age').innerHTML = data.age
            }
        })
        console.log(_data.name);
        console.log(_data.age);
        _data.name = '李四'
        _data.age = 30
        console.log(data);

除了写value，还可以写2个方法哦~

get方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
set方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
当代理对象，监听到数据发生变化时，就会重新渲染页面

三、Vue的常用指令

v-bind: 用于绑定属性，通过 v-bind: 绑定过的属性，可以在属性值可以写表达式。
v-bind: 可以用 : 简写。

v-on: 用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法。
v-on: 可以用@简写。

v-model 指令，可以实现对数据的双向绑定，v-model指令是 v-bind:value 和 v-on:input 的简写。

来看看吧=>>>

    <!-- 我们需要一个容器 -->
    <div id="app">
        <div>
            <span>姓名：</span>
            <input type="text" v-bind:value="name">{{name}}
        </div>
        <div>
            <span>年龄：</span>
            <input type="text" :value="age">{{age}}
        </div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        // 关闭生产提示
        Vue.config.productionTip = false
        // 用vm接收一下
        let vm = new Vue({
            el: '#app',
            data: {
                name: '张三',
                age: 20,
            }
        })
    </script>

以上，到目前为止是单向绑定。
通过在后台 vm.data = '李四' ，可以把页面的数据改掉；但是在页面的 input 中做修改并不会改变后台的数据哦~

问题来了：如何给它做双向绑定呢？
绑定一个input事件 ，
代码如下：

    <div id="app">
        <div>
            <span>姓名：</span>
            <input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
        </div>
        <div>
            <span>年龄：</span>
            <!-- 如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象 -->
            <input type="text" :value="age" @input="age = $event.target.value">{{age}}
        </div>
        <div>
            <span>工作：</span>
            <input type="text" v-model="job">{{job}}
        </div>
    </div>

       let vm = new Vue({
            el: '#app',
            //数据
            data: {
                name: '张三',
                age: 20,
                job: '程序员'
            },
            methods: {
                updateName(e){                       //这边可以接收一个事件对象e，可以通过e.target获取当前元素
                    this.name = e.target.value       // 获取文本框里面的内容，更新数据
                }
            },
        })

设置了一个更新姓名的方法，该方法更新name属性值
注意：在调用方式时，如果没有传递参数，那么事件方法会默认传一个事件对象参数。
这里边接收事件对象 e，可以通过 e.target 获取当前元素
e.target.value 获取文本框里面的内容
this.name = e.target.value 更新数据

如果事件方法的代码不是很多，可以写在行内，
注意：不能写 this 。示例：

  <input type="text" :value="age" @input="age = $event.target.value">

四、Vue的条件渲染和列表渲染

1.条件渲染

v-if 条件渲染
代码如下：

    <!-- 根据成绩，显示下面的等级 -->
    <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>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#app',
            data:{
                score:55,
            }
        })
    </script>

页面效果：

根据成绩，显示对应的等级

v-if / v-show 条件渲染

v-if 指令用于条件渲染，表达式返回true，显示元素；否则不显示元素。
v-if 每次根据isShow的值，确定是否渲染页面。

v-show 指令也是用于条件渲染，表达式返回true，显示元素；否则不显示元素。
v-show 模板已经渲染成功，通过样式控制显示隐藏。

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

    <!-- v-if 每次要根据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>
    <!-- v-show 模板已经渲染成功，通过样式控制显示隐藏 -->
    <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>
</div>

   <script src="../js/vue.js"></script>
   <script>
    Vue.config.productionTip = false
    new Vue({
        el:'#app',
        data:{
            score:55,
            isShow:false
        }
   })
   </script>

问题来了：v-if 和 v-show 如何选择?？

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

2.列表渲染

v-for 列表渲染

v-for 指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。

代码如下：

    <div>
        <ul>
            <li v-for="(item,index) in foods" :key="index">{{index}}--{{item.name}}--{{item.price}}</li>
        </ul>
    </div>

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

页面效果：

练习：轮播图
第一种写法：后台查看，页面会有5张图片，通过display去显示或者隐藏（不太好）

    <div id="app">
        <img v-for="(item,index) in imgs" :src="item" v-show="index===showActive" >
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#app',
            data:{
                //显示的下标
                showActive:0,
                //图片数组
                imgs:["http://p1.music.126.net/7zAkp74zoKd0LuEuEP6dOg==/109951166645160829.jpg?imageView&quality=89",
                    "http://p1.music.126.net/pkXsmqmFQOehNkJYmehkng==/109951166646695577.jpg?imageView&quality=89",
                    "http://p1.music.126.net/c1olbeIgiVsj9I39fCUXkQ==/109951166644891380.jpg?imageView&quality=89",
                    "http://p1.music.126.net/JMYet32O1mi6-YZ1GGSYcQ==/109951166646419732.jpg?imageView&quality=89",
                    "http://p1.music.126.net/WCX5Cq1z17Du2z0QBEcEaA==/109951166645933077.jpg?imageView&quality=89"]
            },
            //生命周期函数（表示页面挂载完成）
            mounted() {
                setInterval(() => {
                    this.showActive++
                    //如果下标越界，重新从0开始
                    if(this.showActive>=5) this.showActive = 0
                }, 3000);
            },
        })
    </script>

v-for 列表渲染，循环出item和index（在组件中使用v-for循环时,或在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字类型 :key值。）
:src绑定imgs这个数组的item
v-show 条件渲染，表达式返回true，显示元素；否则不显示元素
-- 此时页面效果为显示下标为0的那张图片，3秒后换下一张 --

mounted() { } 这个函数，是生命周期函数（表示页面挂载完成），
这里并没有调用，但它会自己执行哦。

第二种写法：

    <div id="app">
        <img :src="imgs[showActive]" >
    </div>

只需要绑定一个 :src = imgs数组[索引]
因为在script里设定了定时器，且this.showActive++ 索引会自己变，然后mounted() { } 这个函数自己执行，页面会更新。

(未完待续...loading...)

最后编辑于：2022.02.25 00:10:51

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342