一、Vue简介

一、Vue框架的优势

1. 中文API
2. 组件化开发
3. 单页面应用
4. 数据双向绑定
5. 虚拟DOM
6. 数据驱动思想（相比DOM驱动）

二、在页面中引入vue

1. 步骤

a. 通过script标签引入vew.js环境

b. 创建vue实例

c. 通过el进行挂载

2. 代码

3. 注意

a. 挂载点采用css3选择器语法，只能匹配第一次检索到的结果，因此通常采用id选择器。

b. html与body标签不能作为挂载点

c. 一个页面通常有一个挂载点

三、vue核心代码

{{ msg }}

{{ info }}

四、插值表达式

变量及变量的简单运算

{{ msg }}

{{ num*10 }}

{{ msg+num }}

{{ msg[1] }}

{{ msg.splite('') }}

五、js中的函数

1. 普通函数

a. 普通函数1

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

b. 普通函数2

let f2 = function () {
console.log('f2 run')
}
f2();

2. 箭头函数

箭头函数无法使用‘this’

a. 箭头函数1

let f3 = () => {
console.log('f3 run')
};
f3();

b. 箭头函数2

let f4 = (n1, n2) => n1 + n2;
let res1 = f4(10, 20);
console.log(res1);

c. 箭头函数3

let f5 = num => {
return num*10
};
let res2 = f5(10);
console.log(res2);

3. 构造函数

a. 构造函数普通写法

function F6(name) {

this.name = name;

this.eat = function (food) {
console.log(this.name + '在吃' + food)
}
}

let ff1 = new F6('A');
console.log(ff1.name);

let ff2 = new F6('B');
console.log(ff2.name);

ff1.eat('苹果');
ff2.eat('香蕉');

b. 构造函数简写

let obj = {

name: 'C',
// 普通函数
drink: function (drinks) {
console.log(this.name + '在喝' + drinks)
},
//方法
eat(food) {
console.log(this.name + '在吃' + food)
},
};

console.log(obj.name);
obj.eat('橘子');
obj.drink('juice')

六、js定义变量的四种方法

1. var a = 10

2. let b = 20

不能重复定义，具备块级作用域。

3. const c = 30

常量，定义后不可修改。

4. d = 40

全局变量