VUE 初识

前台三大框架：angular、react、vue

​ vue：有前两大框架优点，摈弃缺点；没有前两个框架健全
​ vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)

VUE学习要点：

​ 基础：指令、实例成员、组件(组件间传参)

​ 项目：基于组件开发、插件(vue-router、vuex、axios、vue-cookies、jq+bs、element-ui)

Vue简介：

Vue是渐进式 JavaScript 框架

过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

一、走进Vue

1、what -- 什么是Vue

可以独立完成前后端分离式web项目的JavaScript框架

2、why -- 为什么要学习Vue

三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM
可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

3、special -- 特点

单页面web应用
数据驱动
数据的双向绑定
虚拟DOM

4、how -- 如何使用Vue

• 开发版本：vue.js
• 生产版本：vue.min.js

    {{ }}

二、Vue实例

1、el：实例

    let app = new Vue({
        el:'#d1'
    })
// 实例与页面挂载点一一对应（只能一对一匹配，不能一对多）
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点标签内部内容
// html和body两个标签不能作为挂载点 

2、data：数据

    {{ msg }}

3、methods：方法

    
测试
    
测试

4、computed：计算

    
    
    

        {{ c }}
    

除此之外，还可以进行下面这些简单的计算：

{{msg}}、{{msg[1]}}、{{msg.split('s')}}、{{msg+n}}、{{n}}、{{n*5}}、{{n+1}}、

四、Vue指令

1、文本相关指令

    
    
{{ msg }}
    
    
原文本
    
    

    
    
{{ msg }}



总结：
        文本指令：
        1、{{ }}
        2、v-text: 不能解析html语法的文本，会原样输出
        3、v-html: 能解析html语法的文本
        4、v-once： 所在标签的内容只被解析一次，

3、属性指令

4、事件指令

@mouseover  悬浮
@mouseout   离开
@mousedown  按下
@mouseup    抬起
@mousemove  移动
@contextmenu右键

JS函数小结

function可以作为类，内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法： 方法名(){}

    let obj = {
        name:'Jerry',
        // eat:function (food) {
        //     console.log(this);
        //     console.log(this.name + '在吃'+ food)
        // }

        // eat:food => {
        //     console.log(this);
        //     console.log(this.name + '在吃'+ food)
        // }

        eat(food){   // 省略了‘：function'
            console.log(this);
            console.log(this.name + '在吃'+ food)
        }
    };
    obj.eat('汉堡')



    new Vue({
        data: {
            res: ''
        },
        methods: {
            fn () {
                // axios插件
                let _this = this;
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(function (response) {  // function 有自己的this
                    _this.res = response.data;  // 而这里需要的是function父级的this
                })
            },
            fn1 () {
                // axios插件
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(response => {
                    this.res = response.data;  // 箭头函数没有自己的this，所以这里的this就是箭头函数父级的this
                })
            }
        }
    })