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