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