table of Contents

Front three frameworks: angular, react, vue

vue: There are two major advantages of the front frame, abandon shortcomings; the first two do not sound framework
vue advantages: Chinese API, single-page application, component-based development, two-way data binding, virtual DOM, data-driven ideas (compared to DOM drive )

VUE learning points:

Base: instruction instance members, components (parameter passing between the components)

Project: component-based development, plug-ins (vue-router, vuex, axios, vue-cookies, jq + bs, element-ui)

Vue Introduction:

Vue is a progressive JavaScript framework

Over the extent of understanding and application of the framework to determine its scope of application throughout the project, and ultimately independent way to frame the front end of the project to complete the entire web

First, entered the Vue

1, what - what is the Vue

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

2, why - why should learning Vue

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

3, special - Features

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

4, how - how to use Vue

Development version: vue.js
Production Version: vue.min.js

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

Two, Vue examples

1, el: Example

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

2, data: 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: Method

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

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

In addition, these can also be a simple calculation the following:

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

Four, Vue instruction

1, the text-related instructions

<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, attribute command

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

<!-- 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, incident command

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

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

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

JS function Summary

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 acquaintance