前端入门到放弃（VUE、ES6，简单到不得了）

// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
// let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable
1
2
3
4

let arr = [1,2,3];
//以前我们想获取其中的值，只能通过角标。ES6 可以这样：
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值
// 然后打印
console.log(x,y,z)
1
2
3
4
5

const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
const { name, age, language } = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.language;
// 可以分别打印
console.log(name);
console.log(age);
console.log(language);
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
const { name: nn, age, language } = person;
console.log(nn);
console.log(age);
console.log(language);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true
1
2
3
4
5

// 1、多行字符串
let ss = `
        

        hello world
        
        `
console.log(ss)

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "张三";
let age = 18;
let info = `我是${name}，今年${age}了`;
console.log(info)

// 3、字符串中调用函数
function fun() {
return "这是一个函数"
}
let sss = `O(∩_∩)O 哈哈~，${fun()}`;
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

//在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断 b 是否为空，为空就给默认值 1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a , b = 1) {
return a + b;
}
// 传一个参数
console.log(add2(10));
1
2
3
4
5
6
7
8
9
10
11
12
13
14

function fun(...values) {
console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //
1
2
3
4
5

//以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
// 可以简写为：
var print = obj => console.log(obj);
// 测试调用
print(100);
1
2
3
4
5
6
7
8

// 两个参数的情况：
var sum = function (a, b) {
return a + b;
}
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20
// 代码不止一行，可以用`{}`括起来
var sum3 = (a, b) => {
c = a + b;
return c;
};
//测试调用
console.log(sum3(10, 20));//30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//需求，声明一个对象，hello 方法需要对象的个别属性
//以前的方式：
const person = {
    name: "jack",
    age: 21,
    language: ['java', 'js', 'css']
}
function hello(person) {
	console.log("hello," + person.name)
}
//现在的方式
var hello2 = ({ name }) => { console.log("hello," + name) };
//测试
hello2(person);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//Object.assign 方法的第一个参数是目标对象，后面的参数都是源对象。
Object.assign(target, source1, source2);
console.log(target)//{a: 1, b: 2, c: 3}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

const age = 23
const name = "张三"
// 传统
const person1 = { age: age, name: name }
console.log(person1)
// ES6：属性名和属性值变量名一样，可以省略
const person2 = { age, name }
console.log(person2) //{age: 23, name: "张三"}
1
2
3
4
5
6
7
8

let person = {
    name: "jack",
    // 以前：
    eat: function (food) {
    console.log(this.name + "在吃" + food);
    },
    // 箭头函数版：这里拿不到 this
    eat2: food => console.log(person.name + "在吃" + food),
    // 简写版：
    eat3(food) {
   	 console.log(this.name + "在吃" + food);
	}
}
person.eat("apple");
1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 1、拷贝对象（深拷贝）
let person1 = { name: "Amy", age: 15 }
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = { age: 15 }
let name = { name: "Amy" }
let person2 = { ...age, ...name } //如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值
console.log(person2) //{age: 15, name: "Amy"}

1
2
3
4
5
6
7
8
9
10

let arr = ['1', '20', '-5', '3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)
1
2
3
4

const arr = [1,20,-5,3];
//没有初始值：
console.log(arr.reduce((a,b)=>a+b));//19
console.log(arr.reduce((a,b)=>a*b));//-300
//指定初始值：
console.log(arr.reduce((a,b)=>a+b,1));//20
console.log(arr.reduce((a,b)=>a*b,0));//-0
1
2
3
4
5
6
7

user.json：
{ 
    "id": 1, 
    "name": "zhangsan", 
    "password": "123456"
}
1
2
3
4
5
6

user_corse_1.json:
{ 
	"id": 10, 
	"name": "chinese"
}
1
2
3
4
5

corse_score_10.json:
{ 
	"id": 100, 
	"score": 90
}
1
2
3
4
5

$.ajax({
    url: "mock/user.json",
    success(data) {
        console.log("查询用户：", data);
        $.ajax({
            url: `mock/user_corse_${data.id}.json`,
            success(data) {
                console.log("查询到课程：", data);
                $.ajax({
                    url: `mock/corse_score_${data.id}.json`,
                    success(data) {
                    console.log("查询到分数：", data);
                },
                error(error) {
               	 console.log("出现异常了：" + error);
            	}
         });
        },
        error(error) {
        	console.log("出现异常了：" + error);
        }
     });
    },
    error(error) {
    console.log("出现异常了：" + error);
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const promise = new  (function (resolve, reject) {
    // 执行异步操作
    if (/* 异步操作成功 */) {
    resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
    } else {
    reject(error);// 调用 reject，代表 Promise 会返回失败结果
    }
});

1
2
3
4
5
6
7
8
9

const promise = new Promise((resolve, reject) =>{
    // 执行异步操作
    if (/* 异步操作成功 */) {
    	resolve(value);// 调用 resolve，代表 Promise 将返回成功的结果
    } else {
   		reject(error);// 调用 reject，代表 Promise 会返回失败结果
    }
});
1
2
3
4
5
6
7
8

promise.then(function (value) {
// 异步执行成功后的回调
}).catch(function (error) {
// 异步执行失败后的回调
})
1
2
3
4
5

new Promise((resolve, reject) => {
    $.ajax({
        url: "mock/user.json",
        success(data) {
            console.log("查询用户：", data);
            resolve(data.id);
        },
        error(error) {
            console.log("出现异常了：" + error);
        }
    });
}).then((userId) => {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: `mock/user_corse_${userId}.json`,
            success(data) {
                console.log("查询到课程：", data);
                resolve(data.id);
            },
            error(error) {
                console.log("出现异常了：" + error);
            }
        });
    });
}).then((corseId) => {
    console.log(corseId);
    $.ajax({
        url: `mock/corse_score_${corseId}.json`,
        success(data) {
            console.log("查询到分数：", data);
        },
        error(error) {
            console.log("出现异常了：" + error);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

let get = function (url, data) { // 实际开发中会单独放到 common.js 中
    return new Promise((resolve, reject) => {
    $.ajax({
        url: url,
        type: "GET",
        data: data,
        success(result) {
            resolve(result);
        },
        error(error) {
            reject(error);
        }
        });
    })
}
// 使用封装的 get 方法，实现查询分数
get("mock/user.json").then((result) => {
    console.log("查询用户：", result);
    return get(`mock/user_corse_${result.id}.json`);
}).then((result) => {
    console.log("查询到课程：", result);
    return get(`mock/corse_score_${result.id}.json`)
}).then((result) => {
    console.log("查询到分数：", result);
}).catch(() => {
    console.log("出现异常了：" + error);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

onst util = {
    sum(a,b){
        return a + b;
    }
}
1
2
3
4
5

onst util = {
    sum(a,b){
        return a + b;
    }
}
export {util};
1
2
3
4
5
6

export const util = {
    sum(a,b){
        return a + b;
    }
}
1
2
3
4
5

ar name = "jack"
var age = 21
export {name,age}
1
2
3

// 无需声明对象的名字
export default {
    sum(a,b){
        return a + b;
    }
}
1
2
3
4
5
6

// 导入 util
import util from 'hello.js'
// 调用 util 中的属
util.sum(1,2)
1
2
3
4

import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")
1
2

<body>
    <div id="app">
        <h1>{{name}}，非常帅！！！h1>
    div>
    <script src="./node_modules/vue/dist/vue.min.js">script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                name: "张三"
            }
        });
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

body>
<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}}，非常帅！！！有{{num}}个人为他点赞。
    h2>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
    // 创建 vue 实例
    let app = new Vue({
        el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "张三",
            num: 5
        }
    });
script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

body>
<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">关注button>
    <h2>
        {{name}}，非常帅！！！有{{num}}个人为他点赞。
    h2>
div>
<script src="./node_modules/vue/dist/vue.js">script>
<script>
    // 创建 vue 实例
    let app = new Vue({
        el: "#app", // el 即 element，该 vue 实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "张三",
            num: 5
        }
    });
script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

let app = new Vue({
});
1
2

<div id="app">
div>
1
2

let vm = new Vue({
	el: "#app"
})
1
2
3

<div id="app">
	<input type="text" v-model="name" />
div>
1
2
3

let vm = new Vue({
    el: "#app",
    data: {
    	name: "刘德华
    }
})
1
2
3
4
5
6

<div id="app">
    {{num}}
    <button v-on:click="add">加button>

• 1
• 2
• 3
• 4

JS：

let vm = new Vue({
    el: "#app",
    data: {
        num: 0
    },
    methods: {
        add: function () {
            // this 代表的当前 vue 实例
            this.num++;
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12

5、安装 vue-devtools 方便调试

将软件包中的 vue-devtools 解压。 

打开 chrome 设置->扩展程序

开启开发者模式，并加载插件

6、安装 vscode 的 vue 插件

5、指令

什么是指令？ 

• 指令 (Directives) 是带有 v- 前缀的特殊特性。 
• 指令特性的预期值是：单个 JavaScript 表达式。 
• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的 v-on，代表绑定事件。

1、插值表达式

1）、花括号

格式：{{表达式}}

说明： 

• 该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值） 
• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1; 
• 可以直接获取 Vue 实例中定义的数据或函数

2）、插值闪烁

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}， 加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后刷新页面，试试看刚才的案例：

3）、v-text 和 v-html

可以使用 v-text 和 v-html 指令来替代{{}}

说明： 

v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出 

v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染

示例：

<div id="app">
    v-text:<span v-text="hello">span> <br />
    v-html:<span v-html="hello">span>
div>
1
2
3
4

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            hello: "
大家好
"
        }
    })
</script>
1
2
3
4
5
6
7
8
9

效果：

并且不会出现插值闪烁，当没有数据时，会显示空白或者默认数据。

2、v-bind

html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；

而且在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

1）、绑定 class

<div class="static" v-bind:class="{ active: isActive, 'text-danger'
                                  : hasError }">
div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            hasError: false
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12

2）、绑定 style

v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JavaScript 对象。style 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，这种方式记得用单引号括起 来) 来命名。

例如：font-size–>fontSize

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSiz
e + 'px' }"></div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11

结果：

<div style="color: red; font-size: 30px;">div>
1

3）、绑定其他任意属性

<div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" v-bind:user="userName">
div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            activeColor: 'red',
            fontSize: 30,
            userName: 'zhangsan'
        }
    })
script>
效果：
<div id="app" user="zhangsan" style="color: red; font-size: 30px;">div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4）、v-bind 缩写

<div id="app" :style="{ color: activeColor, fontSize: fontSize +'px' }"  :user="userName">
div>
1
2

3、v-model

刚才的 v-text、v-html、v-bind 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不 行。接下来学习的 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前 v-model 的可使用元素有：

• input

• select

• textarea

• checkbox

• radio

• components（Vue 中的自定义组件）

• 基本上除了最后一项，其它都是表单的输入项。

  示例：

<div id="app">
    <input type="checkbox" v-model="language" value="Java" />Java<br />
    <input type="checkbox" v-model="language" value="PHP" />PHP<br />
    <input type="checkbox" v-model="language" value="Swift" />Swift<br />
    <h1>
        你选择了：{{language.join(',')}}
    h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            language: []
        }
    })
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

•  多个CheckBox对应一个 model 时，model 的类型是一个数组，单个 checkbox 值默认是 boolean 类型 
• radio 对应的值是 input 的 value 值 
• text 和textarea 默认对应的 model 是字符串 
• select单选对应字符串，多选对应也是数组

效果：

4、v-on

1、基本用法

v-on 指令用于给页面元素绑定事件。

语法： v-on:事件名=“js 片段或函数名”

示例：

<div id="app">
    
    <button v-on:click="num++">点赞button>
    
    <button v-on:click="decrement">取消button>
    <h1>有{{num}}个赞h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            num: 100
        },
        methods: {
            decrement() {
                this.num--; //要使用 data 中的属性，必须 this.属性名
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

2、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的 需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑， 而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来 表示的。

•  .stop ：阻止事件冒泡到父元素 
• .prevent：阻止默认事件发生 
• .capture：使用事件捕获模式 
• .self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行） 
• .once：只执行一次

<div id="app">
    
    <button v-on:contextmenu.prevent="num++">点赞button>
    <br />
    
    <button v-on:contextmenu="decrement($event)">取消button>
    <br />
    <h1>有{{num}}个赞h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            num: 100
        },
        methods: {
            decrement(ev) {
                // ev.preventDefault();
                this.num--
            }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果：右键“点赞”，不会触发默认的浏览器右击事件；右键“取消”，会触发默认的浏览 器右击事件）

3、按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添 加按键修饰符：

1

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

<input v-on:keyup.enter="submit">

<input @keyup.enter="submit">
1
2
3
4

全部的按键别名：

 .enter  .tab  .delete (捕获“删除”和“退格”键)  .esc  .space  .up  .down  .left  .right

4、组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

 .ctrl 

.alt 

.shif

<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do somethingdiv>
1
2
3
4

5、v-for

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

1、遍历数组

语法：v-for=“item in items” 

• items：要遍历的数组，需要在 vue 的 data 中定义好。 
• item：迭代得到的当前正在遍历的元素

示例：

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} - {{user.gender}} - {{user.age}}
        li>
    ul>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            users: [
                { name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }
            ]
        },
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果：

2、数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：v-for="(item,index) in items

•  items：要迭代的数组 
• item：迭代得到的数组元素别名
•  index：迭代到的当前元素索引，从 0 开始。

示例：

<div id="app">
    <ul>
        <li v-for="(user, index) in users">
            {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
        li>
    ul>
div>
1
2
3
4
5
6
7

效果：

3、遍历对象

v-for 除了可以迭代数组，也可以迭代对象。语法基本类似 语法：

• v-for=“value in object”

• v-for=“(value,key) in object”

• v-for=“(value,key,index) in object”

•  1 个参数时，得到的是对象的属性值 

• 2 个参数时，第一个是属性值，第二个是属性名 

• 3 个参数时，第三个是索引，从 0 开始

示例：

div id="app">
<ul>
    <li v-for="(value, key, index) in user">
        {{index + 1}}. {{key}} - {{value}}
    li>
ul>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let vm = new Vue({
        el: "#app",
        data: {
            user: { name: '张三', gender: '男', age: 18 }
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4、Key

用来标识每一个元素的唯一特征，这样 Vue 可以使用“就地复用”策略有效的提高渲染的 效率

示例：

<ul>
    <li v-for="(item,index) in items" :key=”index”>li>
ul>
<ul>
    <li v-for="item in items" :key=”item.id”>li>
ul>
1
2
3
4
5
6

最佳实践：

如果 items 是数组，可以使用 index 作为每个元素的唯一标识

如果 items 是对象数组，可以使用 item.id 作为每个元素的唯一标

6、v-if 和 v-show

1、基本用法

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。 v-show，当得到结果为 true 时，所在的元素才会被显示。

语法：v-if=“布尔表达式”, v-show=“布尔表达式”,

示例：

<div id="app">
    <button v-on:click="show = !show">点我呀button>
    <br>
    <h1 v-if="show">
        看到我啦？！
    h1>
    <h1 v-show="show">
        看到我啦？！show
    h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、与 v-for 结合

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。 修改 v-for 中的案例，添加 v-if:

<ul>
    <li v-for="(user, index) in users" v-if="user.gender == '女'">
        {{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
    li>
ul>

1
2
3
4
5
6

效果：只显示女性

7、v-else 和 v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

示例：

<div id="app">
    <button v-on:click="random=Math.random()">点我呀
    button><span>{{random}}span>
    <h1 v-if="random >= 0.75">
        看到我啦？！v-if >= 0.75
    h1>
    <h1 v-else-if="random > 0.5">
        看到我啦？！v-else-if > 0.5
    h1>
    <h1 v-else-if="random > 0.25">
        看到我啦？！v-else-if > 0.25
    h1>
    <h1 v-else>
        看到我啦？！v-else
    h1>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            random: 1
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

6、计算属性和侦听器

1、计算属性（computed）

某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成

示例：

<div id="app">
    <ul>
        <li>西游记：价格{{xyjPrice}}，数量：
            <input type="number" v-model="xyjNum">li>
        <li>水浒传：价格{{shzPrice}}，数量：
            <input type="number" v-model="shzNum">li>
        <li>总价：{{totalPrice}}li>
    ul>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            xyjPrice: 56.73,
            shzPrice: 47.98,
            xyjNum: 1,
            shzNum: 1
        },
        computed: {
            totalPrice(){
                return this.xyjPrice*this.xyjNum + this.shzPrice*th
                is.shzNum;
            }
        },
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

效果：只要依赖的属性发生变化，就会重新计算这个属性

2、侦听（watch）

watch 可以让我们监控一个值的变化。从而做出相应的反应。

示例：

<div id="app">
    <ul>
        <li>西游记：价格{{xyjPrice}}，数量：
            <input type="number" v-model="xyjNum">li>
        <li>水浒传：价格{{shzPrice}}，数量：
            <input type="number" v-model="shzNum">li>
        <li>总价：{{totalPrice}}li>
        {{msg}}
    ul>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    let app = new Vue({
        el: "#app",
        data: {
            xyjPrice: 56.73,
            shzPrice: 47.98,
            xyjNum: 1,
            shzNum: 1,
            msg:""
        },
        computed: {
            totalPrice(){
                return this.xyjPrice*this.xyjNum + this.shzPrice*th
                is.shzNum;
            }
        },
        watch: {
            xyjNum(newVal, oldVal){
                if(newVal >= 3){
                    this.msg = "西游记没有更多库存了";
                    this.xyjNum = 3;
                }else{
                    this.msg = "";
                }
            }
        }
    })
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

3、过滤器（filters）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的 情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

示例：展示用户列表性别显示男女

<body>
    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}td>
                <td>{{user.name}}td>
                
                <td>{{user.gender===1? "男":"女"}}td>
            tr>
        table>
    div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            userList: [
                { id: 1, name: 'jacky', gender: 1 },
                { id: 2, name: 'peter', gender: 0 }
            ]
        }
    });
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

1、局部过滤器

注册在当前 vue 实例中，只有当前实例能用

let app = new Vue({
    el: "#app",
    data: {
        userList: [
            { id: 1, name: 'jacky', gender: 1 },
            { id: 2, name: 'peter', gender: 0 }
        ]
    },
    // filters 定义局部过滤器，只可以在当前 vue 实例中使用
    filters: {
        genderFilter(gender) {
            return gender === 1 ? '男~' : '女~'
        }
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<td>{{user.gender | genderFilter}}td>
1

2、全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
    return value.charAt(0).toUpperCase() + value.slice(1)
})
1
2
3
4

任何 vue 实例都可以使用： {{user.name | capitalize}}

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

7、组件化

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。 例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部 分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

在 vue 里，所有的 vue 实例都是组件

1、全局组件

我们通过 Vue 的 component 方法来定义一个全局

<div id="app">
    
    <counter>counter>
div>
<script src="../node_modules/vue/dist/vue.js">script>
<script type="text/javascript">
    // 定义全局组件，两个参数：1，组件名称。2，组件参数
    Vue.component("counter", {
        template: '<button v-on:click="count++">你点了
        我 {{ count }} 次，我记住了.</button>',
                  data() {
        return {
            count: 0
        }
    }
    })
    let app = new Vue({
        el: "#app"
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

• 组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函 数等 
• 不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有 el 属性。
• 但是组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板 
• 全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了 
• data 必须是一个函数，不再是一个对象。

2、组件的复用

定义好的组件，可以任意复用多次：

<div id="app">

<counter>counter>
<counter>counter>
<counter>counter>
div>
1
2
3
4
5
6

组件的 data 属性必须是函数！

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷 贝； 否则：

组件基础 — Vue.js (vuejs.org)

3、局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。 因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = {
    template: '<button v-on:click="count++">你点了
    我 {{ count }} 次，我记住了.</button>',
    data() {
        return {
            count: 0
        }
}
};
1
2
3
4
5
6
7
8
9

然后在 Vue 中使用它：

let app = new Vue({
    el: "#app",
    components: {
        counter: counter // 将定义的对象注册为组件
    }
})
1
2
3
4
5
6

components 就是当前 vue 对象子组件集合。 

• 其 key 就是子组件名称 
• 其值就是组件对象名 

效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例 中使用

简写：

let app = new Vue({
    el: "#app",
    components: {
        counter // 将定义的对象注册为组件
    }
})
1
2
3
4
5
6

8、生命周期钩子函数

1、生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模 板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当 Vue 实例处于 不同的生命周期时，对应的函数就会被触发调用。

生命周期：你不需要立马弄明白所有的东西。

2、钩子函数 

• beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在 Vue 实例化时调 用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是 init。 
• created：在创建实例之后进行调用。 
• beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}} 
• mounted：我们可以将他理解为原生 js 中的 window.οnlοad=function({.,.}),或许大家也在 用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就 是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。 此时页面中的{{name}}已被渲染成张三 
• beforeDestroy：该函数将在销毁实例前进行调用 。 
• destroyed：改函数将在销毁实例时进行调用。 
• beforeUpdate：组件更新之前。 
• updated：组件更新之后。

示例

<body>
    <div id="app">
        <span id="num">{{num}}span>
        <button v-on:click="num++">赞！button>
        <h2>
            {{name}}，非常帅！！！有{{num}}个人点赞。
        h2>
    div>
body>
<script src="../node_modules/vue/dist/vue.js">script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            name: "张三",
            num: 100
        },
        methods: {
            show() {
                return this.name;
            },
            add() {
                this.num++;
            }
        },
        beforeCreate() {
            console.log("=========beforeCreate=============");
            console.log("数据模型未加载：" + this.name, this.num);
            console.log("方法未加载：" + this.show());
            console.log("html 模板未加载：
                        " + document.getElementById("num"));
                        },
        created: function () {
            console.log("=========created=============");
            console.log("数据模型已加载：" + this.name, this.num);
            console.log("方法已加载：" + this.show());
            console.log("html 模板已加载：
                        " + document.getElementById("num"));
                        console.log("html 模板未渲染：
                        " + document.getElementById("num").innerText);
                        },
        beforeMount() {
            console.log("=========beforeMount=============");
            console.log("html 模板未渲染：
                        " + document.getElementById("num").innerText);
                        },
        mounted() {
            console.log("=========mounted=============");
            console.log("html 模板已渲染：
                        " + document.getElementById("num").innerText);
                        },
        beforeUpdate() {
            console.log("=========beforeUpdate=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html 模板未更新：
                        " + document.getElementById("num").innerText);
                        },
        updated() {
            console.log("=========updated=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html 模板已更新：
                        " + document.getElementById("num").innerText);
                        }
    });
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

9、vue 模块化开发

1、npm install webpack -g

全局安装 webpac

2、npm install -g @vue/cli-init

全局安装 vue 脚手架

3、初始化 vue 项目；

vue init webpack appname：vue 脚手架使用 webpack 模板初始化一个 appname 项目

4、启动 vue 项目；

项目的 package.json 中有 scripts，代表我们能运行的命令

npm start = npm run dev：启动项目

npm run build：将项目打包

5、模块化开发

1、项目结构

 运行流程 

1. 进入页面首先加载 index.html 和 main.js 文件。 
2. main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html 页面的元素。使用了 router，导入了 App 组件。并且使用标签 引用了这个组件 
3. 第一次默认显示 App 组件。App 组件有个图片和，所以显示了图片。 但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用 HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。
4. 所以第一次访问，显示图片和 HelloWorld 组件。
5. 我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用Go to Foo标签

2、Vue 单文件组件

Vue 单文件组件模板有三个部分；

<template>
    <div class="hello">
        <h1>{{ msg }}h1>
    div>
template>
<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style scoped>
    h1, h2 {
        font-weight: normal;
    }
style>
1
2
3
4
5
6

Template：编写模板

Script：vue 实例配置

Style：样式

3、vscode 添加用户代码片段（快速生成 vue 模板）

文件–>首选项–>用户代码片段–>点击新建代码片段–取名 vue.json 确定

{
    "生成 vue 模板": {
        "prefix": "vue",
        "body": [
            "",
            "",
            "",
            ""
        ],
        "description": "生成 vue 模板"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

4、导入 element-ui 快速开发

1、安装 element-ui： npm i element-ui

2、在 main.js 中引入 element-ui 就可以全局使用了。 import ElementUI from ‘element-ui’ import ‘element-ui/lib/theme-chalk/index.css’ Vue.use(ElementUI)

3、将 App.vue 改为 element-ui 中的后台布局

4、添加测试路由、组件，测试跳转逻辑

• (1) 、参照文档 el-menu 添加 router 属性
• (2) 、参照文档 el-menu-item 指定 index 需要跳转的地址

Babel

Babel 是一个 JavaScript 编译器，我们可以使用 es 的最新语法编程，而不用担心浏览器兼 容问题。他会自动转化为浏览器兼容的代码

Webpack

自动化项目构建工具。gulp 也是同类产