一、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;
})
}
}
})