Vue.js：

渐进式JavaScript框架官方文档点我直达

渐进式JavaScript框架

一、Vue它是什么

是一套用于构建用户界面的渐进式框架，在使用Vue的时候，可以只使用Vue里面的一部分去配合其他前端框架一起开发，也可以整个项目从头到尾，从搭建项目，路由系统，全局的状态管理等全部使用Vue，非常灵活。

二、走进Vue.js

1.安装Vue.js

学习/安装/下载到本地

以开发版本来学习，下载到本地，首先引入Vue.js文件。

2.准备一个容器


    
        姓名:{{name}}
        年龄:{{age}}

3.创建一个Vue对象


        // 第二步，创建一个Vue对象
        let mx = new Vue({
            //指定当前Vue对象操作的DOM容器
            el:'#app',
            //定义当前Vue对象管理的数据
            data:{
                name:'萌新',
                age:'10'
            },
            //定义当前Vue对象管理的方法
            methods:{
                //修改姓名的方法
                updateName(){
                    this.name='一只萌新'
                },
                //修改年龄的方法
                updateAge(){
                    this.age='100'
                }
            }
        })

4.简单修改数据后渲染至页面例子

效果1

效果2

5.注意：初次使用vue，控制台会有两条提示。

如果想去掉这两条信息，可以选择安装vue-devtools，引入生产版本的vue.js。
当然也可以使用以下代码消除：

        // 不允许 vue-devtools 检查代码
        Vue.config.devtools = false
        // vue 在启动时不显示生产提示
        Vue.config.productionTip = false





    
    
    
    Document



    
    
        姓名:{{name}}
        年龄:{{age}}

三、Vue的响应式原理

1.理解代理对象

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

2.Vue的data和_data

        // 定义源对象
        let myData = {
            name: '张三',
            age: 20
        }
        let mx = new Vue({
            // 将源对象传递给Vue的data，背后做了两件事
             // ① 设置Vue实例的_data属性，作为当前源对象的代理对象。（响应式的核心）
             // ② 将_data里面代理的所有数据，再添加到当前Vue实例身上，也就是vm身上。（方便直接调用数据）
        })
        // 通过改变vue实例的属性可以改变源对象的属性值
        mx.name = '王五'
        mx.age = 40
        console.log(myData);  // {name: "王五", age: 40}

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

-第一种方式：使用点 .
-第二种方式：使用中括号 [ ]
-第三种方式：使用Object.defineProperty方法

       // 方式一
      let obj3 = {}
      obj3.name = '张三'
       // 方式二
      obj3['age'] = 20
      //方式三
       // 这种方式，给对象添加成员，尽管繁琐，但是可以配置更多的功能。
      // 默认添加的属性是不允许删除的，如果要允许删除，就需要添加configurable配置。
     // 默认添加的属性是不允许枚举的，所谓枚举指的就是遍历。
       Object.defineProperty(obj3,'sex',{
       // 属性值
       value:'男',
       // 允许被枚举（默认不允许）
       enumerable:true,
       // 允许被删除（默认不允许）
       configurable:true
   })
   // 枚举出对象的所有属性（其实就遍历出对象的所有属性名）
   // 如果sex属性没有设置允许被枚举，就不能被枚举
   for(let key in obj3){
       console.log(key);
   }
   // 通过delete关键，可以删除对象身上的指定属性
   delete obj3.name
   delete obj3.sex   // 如果sex属性没有设置允许被删除，就不能被删除

四、Vue的常用指令

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


    
        Name:

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

3.v-model指令可以实现对数据的双向绑定。所谓双向绑定指的是：数据发生变化重新渲染页面，页面数据发生变化更新回数据。v-model指令是 v-bind:value 和 v-on:input 的简写。ps:实现数据改变时，文本框的值会随之改变；输入框文本改变时，数据也会随之会被更改。

4.如果事件方法的代码不是很多，可以写在行内。注意：这里不能写this，$event是事件对象

    
        年龄：
        {{age}}

五、条件渲染

1.条件渲染第一种方式：v-if
判断大于或等于90渲染优秀的思路

2.条件渲染第二种方式：v-show
显示/隐藏图片的思路

3.那么v-if和v-show，在场景里如何选择去使用
(1) 如果页面需要反复切换显示和隐藏，推荐用v-show。
(2) 如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，推荐用v-if。所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。

六、列表渲染

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


    
        
            
            {{item.id}}.{{item.name}}

再来个小练习：轮播图，over，期待下次更新

下篇：VUE从入门到入坑—02.了解生命周期，小练习：对数组的增删改查 / 轮播图

VUE从入门到入坑—01.初识Vue：安装/常用指令/响应式原理/条件渲染/列表渲染