VUE- 介绍

一、VUE介绍：

1,什么是Vue：

三大主流框架之一：Angular/React/Vue

JS中没有关键字参数，所以只有类似python中的*号。只不过在JS中用'...'来表示 *

可以独立完成前后端分离式web项目的JavaScript框架；先进的前端设计模式MVVM（数据的双向绑定），可以完全脱离服务器端，以前端代码复用的方式渲染整个页面形成组件化开发

2,Vue特点：

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

二、Vue实例

1,Vue实例

//el
new Vue({
    el: '#app' //le为挂载点
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

//data
<div id='app'>
    {{ msg }}  //{{ }},这里的双大括号里面什么都不写，中间要以空格隔开
</div>
<script>
    var app = new Vue({
    	el: '#app',
    	data: {
    		msg: '数据',//上面的msg获取到的就是这里'数据'
    	}
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

2,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为事件提供实现体-->

3,插值表达式

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ num * 10 }}</p>
    <p>{{ msg + num }}</p>
    <p>{{ msg[1] }}</p>
    <p>{{ msg.split('') }}</p>
</div>

new Vue({
    el: '#app',
    data: {
        msg: 'msg',
        num: 10
    }
})

三、面向对象js

1,我们定义一个普通的js函数

function f1() {
    console.log('f1 run')
}
f1();

2,构造函数 == 类

function F2(name) {
    this.name = name;
    this.eat = function (food) {
        console.log(this.name + '在' + food);
    }
}
let ff1 = new F2("Bob");//通过类名加括号传参进行实例化
console.log(ff1.name);//通过点的方式获取值

let ff2 = new F2("Tom");
console.log(ff2.name);

ff1.eat('饺子');
ff2.eat('sao子面');

四、js函数补充

1,函数变量

function f() {
    d = 40; // 全局变量
    const c = 30;  // 常量
    var a = 10;	  //不仅仅作用于函数体内，
    let b = 20;  // let、const定义的变量不能重复定义，且具备块级作用域
}
f();

2,箭头函数

 //第一种方式：
let f3 = () => {
     console.log('f3 run');
 };
f3();
// 第二种方式：如果箭头函数没有函数体，只有返回值
let f4 = (n1, n2) =>  n1 + n2;
let res = f4(10, 25);
console.log(res);
// 第三种方式：如果箭头函数参数列表只有一个，可以省略()
let f5 = num => num * 10;
res = f5(10);
console.log(res);
//function、箭头函数、方法都具有本质区别:
//（1）函数体内的this对象，不在是自己的函数，而是上一级的函数对象。

//（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

//（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

//（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

3,axios(ajax)的命令

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

                },
            }).then(function (response) {
                _this.res = response.data;
            })
        },
        fn1 () {
            // axios插件
            this.$axios({
                url: '',
                method: 'get',
                data: {

                },
            }).then(response => {
                this.res = response.data;
            })
        }
    }
})