前台三大框架：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

<div id="app">
    {{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>

二、Vue实例

1、el：实例

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

2、data：数据

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

3、methods：方法

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

4、computed：计算

<div id="app">
    <input type="text" v-model="a">
    <input type="text" v-model="b">
    <div>
        {{ c }}
    </div>
</div>

<script>
    // 一个变量依赖于多个变量
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
        },
        computed: {
            c: function() {
                // this代表该vue实例
                return this.a + this.b;  // 这是拼接
                return Number(this.a) + Number(this.b);  // 这才是数字运算
            }
        }
    })
</script>

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

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

四、Vue指令

1、文本相关指令

<div id="app">
    <!-- 插值表达式 -->
    <p>{{ msg }}</p>
    <!-- eg:原文本会被msg替换 -->
    <p v-text='msg'>原文本</p>
    <!-- 可以解析带html标签的文本信息 -->
    <p v-html='msg'></p>
    <!-- v-once控制的标签只能被赋值一次 -->
    <p v-once>{{ msg }}</p>
</div>
<script type="text/javascript">
    // 指令: 出现在html标签中可以被vue解析处理的全局属性
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>

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

3、属性指令

<!-- 给自定义全局属性绑定变量 -->

<!-- v-bind: 指令可以简写为 : -->

<p v-bind:abc="abc"></p>
<!-- 以原字符串形式绑定全局属性 -->
<p v-bind:title="'abc'"></p>

<!-- 单类名绑定 -->
<p v-bind:class="c1"></p>
<!-- 多类名绑定 -->
<p v-bind:class="[c2, c3]"></p>
<!-- 类名状态绑定 -->
<p v-bind:class="{c4: true|false|var}"></p>
<!-- 多类名状态绑定 -->
<p v-bind:class="[{c5: true}, {c6: flase}]"></p>

<!-- 样式绑定 -->
<div :style="div_style"></div>
<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data: {
            abc: "abc",
            c1: "p1",
            c2: "p2",
            c3: "p3",
            div_style: {
                width: "200px",
                height: "200px",
                backgroundColor: "cyan"
            }
        }
    })
</script>

4、事件指令

<!-- v-on: 指令 简写 @ -->

<!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
<p @click="fn"></p>
<!-- ()可以传入具体实参 -->
<p @click="fn()"></p>
<!-- ()情况下，事件对象应该显式传入 -->
<p @click="fn($event)"></p>

@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
                })
            }
        }
    })


</script>

</html>

VUE 初识