Vue快速上手

Vue概念

Vue是一个用于构建用户界面的渐进式框架

Vue两种使用方式

1. Vue核心包开发

   场景：局部模块改造

2. Vue核心包 & Vue插件 工程化

   场景：整站开发

框架：

优点：大大提升开发效率

缺点：需要记忆规则 -> 官网

创建实例

创建Vue实例初始化渲染

步骤：

1. 准备HTML容器
2. 引包-开发版本/生产版本
3. 创建Vue实例 new Vue()
4. 指定配置项 ->渲染数据
   • el指定挂载点
   • data提供数据

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

<div id="app">
    {{ msg }}
</div>

<script src="../libs/vue.js"></script>
<script>
    // 通过引入的Vue包，创建Vue实例对象
    const app = new Vue({
        // 通过el选择器，指定Vue管理的盒子
        el:"#app",
        // 通过data提供数据
        data:{
            msg:"Hello Vue"
        }
    })
</script>

插值表达式

插值表达式是一种vue的模板语法

1
2
3
4
5
6
7
8
9
10
11

<div id="app">
    {{ msg }}
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            msg:"Hello Vue"
        }
    })
</script>

1. 作用：利用表达式进行插值，渲染到页面中

   表达式：是可以被求值的代码，JS会算出一个结果

2. 语法：

   1 2	<h3>{{ age > 18 ? '成年' : '未成年' }}</h3> <p>{{ friend.name }}</p>

注意：

1. 使用的数据必须存在于data

2. 支持表达式，并非语句，例如 if for

   1	<p>{{ if }}</p>

3. 不能再标签属性中使用插值

   1	<p title="{{ title }}">p标签</p>

响应式特性

响应式：数据变化，视图自动更新

修改数据 实例.属性名 = 新值

访问数据 实例.属性名

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

<div id="app">
    {{ msg }}
</div>

<script src="../libs/vue.js"></script>
<script>
    // 通过引入的Vue包，创建Vue实例对象
    const app = new Vue({
        // 通过el选择器，指定Vue管理的盒子
        el:"#app",
        // 通过data提供数据
        data:{
            msg:"Hello Vue"
        }
    })

    document.querySelector("#app").addEventListener("click", ()=>{
        app.msg = "你点我干嘛"
    })
</script>

开发者工具

装插件调试Vue应用

Vue指令

Vue会根据不同的指令，对标签实现不同的功能

指令：带有v-前缀的特殊标签属性

v-show 和 v-if

1. v-show

   作用：控制元素的显示隐藏

   语法：v-show=“表达式”， 表达式值true显示，false隐藏

   原理：切换display：none控制显示隐藏

   场景：频繁切换显示隐藏的场景

2. v-if

   作用：控制元素的显示隐藏（条件渲染）

   语法：v-if = “表达式”，表达式值true显示，false隐藏

   原理：基于条件判断，是否创建或移除元素节点

   场景：要么显示，要么隐藏，不频繁切换的场景

3. v-show 和v-if 的区别

   v-show：通过控制css属性display：none来控制标签的显隐

   v-if：通过条件控制元素的创建和移除

v-else和v-else-if

作用：辅助v-if进行渲染判断

语法：v-else v-else-if=“表达式”

注意：需要紧挨着v-if一起使用

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

<div id="app">
    <p v-if="gender === 1">性别：男</p>
    <p v-else>性别：女</p>

    <hr>

    <p v-if="score >= 90">成绩A</p>
    <p v-else-if="score >= 80">成绩B</p>
    <p v-else-if="score >= 70">成绩C</p>
    <p v-else-if="score >= 60">成绩D</p>
</div>

<script src="../libs/vue.js"></script>
<script>
    // 通过引入的Vue包，创建Vue实例对象
    const app = new Vue({
        // 通过el选择器，指定Vue管理的盒子
        el:"#app",
        // 通过data提供数据
        data:{
            gender:1,
            score:80
        }
    })
</script>

v-on

作用：注册事件 = 添加监听 + 提供处理逻辑

语法：

1. v-on: 事件名 = “内联语句”

   1	<button v-on:click="count++">按钮</button>

   可以使用 @ 来替换 v-on:

   1	<button @click="count++">按钮</button>

2. v-on: 事件名 = “methods的函数名”

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

   <div id="app"> <button @click="add">-</button> <button>{{ count }}</button> <button @click="sub">+</button> </div> <script src="../libs/vue.js"></script> <script> const app = new Vue({ el:"#app", data:{ count:100 }, methods:{ add(){ app.count++ }, sub(){ app.count-- } } }) </script>

3. 简写：@事件名=

Vue指令：v-on调用传参

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

<button @click="fn(参数一,参数二)" >按钮</button>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            count:100
        },
        methods:{
            fn(a, b){
                console.log(a, b)
            }
        }
    })
</script>

v-bind

作用：动态设置html标签属性 -> src url title

语法：v-bind：属性名 = “表达式”

通过表达式的结果动态的给属性赋值

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

<div id="app">
	<img v-bind:src="imgUrl">
</div>

<script src="../libs/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            imgUrl:"./img/1.png"
        }
    })
</script>

**简写：**v-bind:属性名 可以简写为 :属性名

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

<div id="app">
	<img :src="imgUrl">
</div>

<script src="../libs/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            imgUrl:"./img/1.png"
        }
    })
</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

<div id="app">
    <button v-show="index > 0" @click="index--">
        上一页
    </button>
    <div>
        <img :src="list[index]">
    </div>
    <button v-show="index < list.length-1" @click=index++>
        下一页
    </button>
</div>

<script src="../libs/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            index:0,
            list:[
                "./01.png",
                "./02.png",
                "./03.png",
                "./04.png",
            ]
        }
    })
</script>

v-bind对样式控制的增强

操作class

语法：:class=“对象/数组”

1. 对象 -> 键就是类名，值就是布尔值，如果为true，有这个类，否则就没有这个类

   1	<div class="box" :class="{类名:布尔值, 类名:布尔值}"></div>

2. 数组 -> 数组中所有的类，都会添加到盒子上，本质上就是添加一个class列表

   1	<div class="box" :class="[类名1, 类名2, 类名3]"></div>

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

<div id="app">
    <ul>
        <li v-for="(item, index) in list" :key="item.id" >
            <a href="#" @click="activeIndex=index" :class="{active:activeIndex===index}">{{ item.name }}</a>
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeIndex:0,
            list: [
                { id: 1, name: '京东秒杀' },
                { id: 2, name: '每日特价' },
                { id: 3, name: '品类秒杀' }
            ]

        }
    })
</script>

操作style

语法： :style=“样式对象”

1

<div class="box"  :style="{Css属性名:Css属性值}" ></div>

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

<div id="app">
    <div class="progress">
        <div class="inner" :style="{width: persent + '%'}">
            <span>{{ persent }}%</span>
        </div>
    </div>
    <button @click="persent=25">设置25%</button>
    <button @click="persent=50">设置50%</button>
    <button @click="persent=75">设置75%</button>
    <button @click="persent=100">设置100%</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            persent: 0
        }
    })
</script>

v-for

作用：基于数据循环，多次渲染整个元素 —> 数组，对象，数字

遍历数组的方式：

v-for = “(item, index) in 数组”

item表示数组的中的每一项，index表示数组下标

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

<div id="app">
    <ul>
    	<li v-for="(itme, index) in list">{{ item }}  {{ index }}</li>
    </ul>
</div>

<script src="../libs/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            index:0,
            list:[
                "./01.png",
                "./02.png",
                "./03.png",
                "./04.png",
            ]
        }
    })
</script>

v-for 中的 key

作用：给列表添加唯一标识，便于Vue进行列表项的正确排序复用

v-for的默认行为会尝试 原地修改元素（就地复用），如果我们删除的第一个元素，则Vue会默认删除最后一个，然后用剩下三个覆盖掉前面三个

1
2
3
4
5

<ul>
	<li v-for="(item, index) in bookList"  :key="item.id">
        <span>{{ itme.name }}</span>
    </li>
</ul>

注意：

1. key的值只能是字符串或数字类型

2. 可以的值必须具有唯一性

3. 推荐使用id作为key（唯一）， 不推荐使用index作为key（会变化，不对应）

   1	<li v-for="(item, index) in xxx" :key="唯一值"></li>

v-model

作用：给表单元素使用，双向数据绑定 -> 可以快速获取或设置表单元素内容

• 数据变化 -> 视图自动更新
• 试图变化 -> 数据自动更新

语法：v-model = “变量”

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

<div id="app">
    账户：<input type="text" v-model="username"> <br><br>
    密码：<input type="password" v-model="password"><br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
</div>

<script src="../libs/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            username:"",
            password:""
        },
        methods:{
            login(){
                console.log(this.username, this.password)
            },
            reset(){
                this.username = ""
                this.password = ""
                    
            }
        }
    })
</script>

应用于表单元素

所有表单元素都可以使用v-model来进行绑定

常见的表单元素都可以使用 v-model绑定关联 -> 快速获取或设置表单元素的值

它会根据控件类型自动选取正确的方法来更新元素

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

<div id="app">
	<from>
    	姓名：<input type="text" v-model="username"><br>
        是否单身：<input type="checkbox" v-model="isSingle"><br>
        性别：<input type="radio" name="gender" value = 0  v-model="gender">男
        	 <input type="radio" name="gender" value = 1  v-model="gender">女
        所在城市：
        <select v-model="city">
            <option value="101">北京</option>
            <option value="102">上海</option>
            <option value="103">成都</option>
        </select>
        
        自我描述
        <textarea v-model="desc"></textarea>
    </from>
</div>
<script>
	const app = new Vue({
        el:"#app",
        data:{
            username:"",  // text
            isSingle:"",  // true, false
            gender:"",    // 0, 1
            city:"",      // 101, 102, 103
            desc:"",	  //  text
        }
    })
</script>

v-model原理

作用：提供数据双向绑定

原理：v-model本质上就是一种简写，例如在输入框上就是value属性和input事件的合写

注意：$event用于模板上获取事件的形参

1
2
3
4
5
6

<template>
	<div id="app">
        <input v-model="msg" type="text">
        <input :value="msg" @input="msg=$event.target.value" type="text">
    </div>
</template>

表单类组件

1. 父传子: 数据 应该是组件 props 传递 过来的，v-model折解绑定数据，子元素不能使用v-model来进行数据绑定，因为数据时父元素的，子元素不能直接修改，而v-model是双向绑定
2. 子传父:监听输入，子传父传值给父组件修改

父文件

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

<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 通过$event来获取子元素传来的数据 -->
    <BaseSelect :cityId="cityId" @changeId="cityId=$event"></BaseSelect>
  </section>
</template>

<script>
import BaseSelect from "./components/BaseSelect.vue"
export default {
  components:{
    BaseSelect
  },
  data(){
    return {
      cityId:"102"
    }
  }
}
</script>

<style> 
</style>

子文件

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

<template>
  <select :value="cityId" @change="changeId">
    <option value="101">上海</option>
    <option value="102">北京</option>
    <option value="103">邯郸</option>
  </select>
</template>

<script>
export default {
    props:{
        cityId:String
    },
    methods:{
        changeId(e){
            this.$emit("changeId", e.target.value)
        }
    }
}
</script>
<style>
</style>

父元素中的内容也可简化，通过v-model来对父元素中的内容进行双向绑定

v-model = :value="", @input=""

所以

父元素：

1
2
3
4

// 老
<BaseSelect :cityId="cityId" @changeId="cityId=$event"></BaseSelect>
// 新
<BaseSelect v-model="cityId"></BaseSelect>

子元素，接收的时候必须使用value接收，返回的时候触发事件也必须是input

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

// 老
props:{
	cityId:String
},
methods:{
	changeId(e){
		this.$emit("changeId", e.target.value)
	}
}
// 新
props:{
	value:String
},
methods:{
	changeId(e){
		this.$emit("input", e.target.value)
	}
}

小黑记事本

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
66
67
68
69
70
71
72
73
74
75
76
77
78

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./css/index.css" />
        <title>记事本</title>
    </head>
    <body>

        <!-- 主体区域 -->
        <section id="app">
            <!-- 输入框 -->
            <header class="header">
                <h1>小黑记事本</h1>
                <input placeholder="请输入任务" class="new-todo" v-model="todoName" />
                <button class="add" @click="add(todoName)">添加任务</button>
            </header>
            <!-- 列表区域 -->
            <section class="main">
                <ul class="todo-list">
                    <li class="todo" v-for="(item, index) in list" :key="item.id">
                        <div class="view">
                            <span class="index">{{ index +1 }}</span> <label>{{ item.todoName }}</label>
                            <button class="destroy" @click="del(item.id)"></button>
                        </div>
                    </li>
                </ul>
            </section>
            <!-- 统计和清空 -->
            <footer class="footer" v-show="list.length != 0">
                <!-- 统计 -->
                <span class="todo-count">合 计:<strong> {{ list.length }} </strong></span>
                <!-- 清空 -->
                <button class="clear-completed" @click="clear">
                    清空任务
                </button>
            </footer>
        </section>

        <!-- 底部 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>

            const app = new Vue({
                el: '#app',
                data: {
                    todoName:"",
                    list:[

                    ]
                },
                methods:{
                    clear(){
                        this.list = []
                    },
                    add(todoName) {
                        if(todoName.trim() === ""){
                            alert("任务名称不许为空！")
                            return;
                        }
                        this.list.unshift({
                            id:Date.now(),
                            todoName:todoName
                        })
                        this.todoName = ""
                    },
                    del(id){
                        this.list = this.list.filter(item=> item.id != id)
                    }
                }
            })

        </script>
    </body>
</html>

指令修饰符

通过 "."指明一些指令后缀，不同后缀封装了不同的操作处理 -> 简化代码

1. 按键修饰符

   @keyup.enter -> 键盘回车监听

   例如小黑记事本中使用回车添加记录

   1	<input @keyup.enter="add" placeholder="请输入任务" class="new-todo" v-model="todoName" />

2. v-model修饰符

   v-model.trim -> 去除首位空格

   v-model.number -> 转数字

3. 事件修饰符

   @事件名.stop -> 阻止冒泡

   1 2 3

   <button @click.stop = "fn"> </button>

   @事件名.prevent -> 阻止默认型为

   1	<a @click.privent>阻止默认行为</a>

计算属性

概念:基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法：

1. 声明在computed配置项中，一个计算属性对应一个函数
2. 使用起来和普通属性一样使用

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

const app = new Vue(){
    el:"#app",
    data:{
        list:[
            {id:1, name:"篮球", num:1},
            {id:1, name:"足球", num:6},
            {id:1, name:"排球", num:4},
        ]
    },
        computed: {
            totalCount(){
                return this.list.reduce((sum, item)=>sum+item.nun, 0)
            }
        }
}

计算属性VS方法

computed计算属性：

作用：封装了一段对于数据的处理，求得一个结果

语法：

1. 写在computed配置项中
2. 作为属性，直接使用 → this.计算属性

methods方法：

作用：给实例提供了一个方法，调用业务逻辑

语法：

1. 写在computed配置项中
2. 作为方法，需要调用 → this.方法名 {{ 方法名() }} @事件名=“方法名”

computed：具有缓存特性（提升性能）， 计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变了，会自动重新计算，并再次缓存

计算属性的完整写法

计算属性默认的简写，只能读取访问，不能修改

如果要修改 → 需要写计算属性的完整写法

1
2
3
4
5
6
7
8
9
10
11

computed:{
    计算属性名:{
        get(){
           计算属性
           return 结果
        },
        set(value){
            修改属性
        }
    }
}

watch侦听器

作用：监视数据变化，执行一些业务逻辑或异步操作

语法：

1. 简单写法 → 简单类型数据，直接监视

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

   data:{ words: '苹果', obj: { words:'apple' } }, watch:{ 属性名(newValue, oldValue) { 一些业务逻辑 或 异步操作。 }, '对象.属性名' (newValue, oldValue) { 一些业务逻辑或异步操作 } }

   翻译案例

   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

   const app = new Vue({ el: '#app', data: { words: '', result:"" }, watch:{ // 监听words的改变 words(newValue) { // 设置防抖 // 先清除计时器 clearTimeout(this.timer) // 再从新设置计时器 this.timer = setTimeout(async ()=>{ // 进行异步请求 const res = await axios({ url:"https://applet-base-api-t.itheima.net/api/translate", parmers:{ words:this.words } }) this.result = res.data.data }, 300) } } })

2. 完整写法 → 添加格外配置项

   1. deep:true 对复杂类型深度监视，只要对象中有一个元素修改了就会触发
   2. immediate:true 初始化立刻执行一次handler方法

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

   data:{ obj:{ words:'apple', lang:"italy" } }, watch:{ 数据属性名:{ deep:true, immediate:true, handler (newValue){ console.log(newValue) } } }

   翻译案例

   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

   const app = new Vue({ el: '#app', data: { obj:{ words: '', lang:'' }, result:"" }, watch:{ // 监听words的改变 obj:{ deep:true, immdiate:true, handler(newValue){ // 设置防抖 // 先清除计时器 clearTimeout(this.timer) // 再从新设置计时器 this.timer = setTimeout(async ()=>{ // 进行异步请求 const res = await axios({ url:"https://applet-base-api-t.itheima.net/api/translate", parmers:newValue }) this.result = res.data.data }, 300) } } } })

水果案例

1. 渲染功能: v-if/v-else V-for :class
2. 删除功能:点击传参 filter过滤覆盖原数组
3. 修改个数:点击传参 find找对象
4. 全选反选:计算属性computed 完整写法 get/set
5. 统计选中的总价和总数量:计算属性computed reduce条件求和
6. 持久化到本地: watch监视，localStorage，JSON.stringify,JSoN.parse

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

const app = new Vue({
    el: '#app',
    data: {
        // 水果列表
        fruitList: [
            {
                id: 1,
                icon: 'http://autumnfish.cn/static/火龙果.png',
                isChecked: true,
                num: 2,
                price: 6,
            },
            {
                id: 2,
                icon: 'http://autumnfish.cn/static/荔枝.png',
                isChecked: false,
                num: 7,
                price: 20,
            },
            {
                id: 3,
                icon: 'http://autumnfish.cn/static/榴莲.png',
                isChecked: false,
                num: 3,
                price: 40,
            },
            {
                id: 4,
                icon: 'http://autumnfish.cn/static/鸭梨.png',
                isChecked: true,
                num: 10,
                price: 3,
            },
            {
                id: 5,
                icon: 'http://autumnfish.cn/static/樱桃.png',
                isChecked: false,
                num: 20,
                price: 34,
            },
        ],
    },
    methods:{
        sub(id){
            const fruit = this.fruitList.find(item=>item.id === id)
            if(fruit.num > 1 ){
                fruit.num--
            }else{
                this.del(id)
            }
        },
        add(id){
            const fruit = this.fruitList.find(item=>item.id === id)
            fruit.num++
        },
        del(id){
            this.fruitList = this.fruitList.filter(item => item.id !== id)
        },
    },
    computed:{
        isAll:{
            get(){
                return this.fruitList.every(item=>item.isChecked === true)
            },
            set(value){
                this.fruitList.forEach(item=>item.isChecked=value)
            }
        },
        totalCount(){
            return this.fruitList.reduce((sum, item)=>{
                if(item.isChecked){
                    return sum+item.num
                }else{
                    return sum
                }
            }, 0)
        },
        totalPrice(){
            return this.fruitList.reduce((sum, item)=>{
                if(item.isChecked){
                    return sum+item.num*item.price
                }else{
                    return sum
                }
            }, 0)
        }
    },
    watch:{
        fruitList:{
            deep:true,
            immdiate:true,
            handler(newValue){
                localStorage.setItem(fruitList, fruitList)
            }
        }
    }
})

自定义指令

自己定义的指令，可以封装一些dom操作，扩展额外的功能

全局注册，在

1
2
3
4
5
6

Vue.directive("指令名", {
	// inserted,在元素插入到页面的时候生效
	"inserted" (el) {
		el.focus()
	}
})

局部注册，在自己的组件中注册

1
2
3
4
5
6
7
8

directive{
	"指令名", {
		// inserted,在元素插入到页面的时候生效，相当于mounted(){}
		"inserted" (el) {
			el.focus()
		}
	}
}

使用：在input插入到页面的时候获取焦点

1

<input v-指令名 type="text">

指令的值

语法：

1. 在绑定指令时，可以通过等号的形式为指令绑定具体参数值

   1 2 3

   <div v-color="color"> </div>

2. 通过binding.value可以拿到指令值，指令值修改会触发update函数

   通过update钩子，可以监听指令值的变化，进行dom操作

   1 2 3 4 5 6 7 8 9 10 11

   directives: { color: { inserted(el, binding){ el.style.color = binding.value }, // 指令的值修改完之后触发 update(el, binding){ el.style.color = binding.value } } }

v-loading指令封装

加载动画的使用

在实际开发场景的时候，发送请求需要时间，在请求数据未回来的时候，页面会处于空白状态=》用户体验不好

需求：封装一个v-loading指令实现加载中的效果

分析

1. 本质loading效果就是一个蒙层，改在了盒子上面
2. 数据请求过程中，开启loading蒙层
3. 数据请求完毕之后，关闭loading蒙层

实现

1. 准备一个loading类，通过伪元素定位，设置宽高，实现蒙层

2. 准备开启loading状态，本质只是需要添加移除类即可

3. 结合自定义的语法进行封装复用

   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

   <template> <div class="main" v-loading="isLoading"> </div> </template> <script> export default { data(){ return{ // 页面初始化的时候默认是加载 isLoading:true } }, async created(){ const res = await axios.get("") // 请求成功的时候，将加载图标去掉 this.isLoading=false }, directives:{ loading:{ // 页面元素添加时候自动触发 inserted(el, binding){ binding.value ? el.classList.add("loading") : el.classList.remove("loading") }, // 当isLoading修改的时候触发 update(el, binding){ binding.value ? el.classList.add("loading") : el.classList.remove("loading") } } } } </script> <style> .mian{ width: 400px; height: 400px; } .loading::before{ width: 100%; height: 100%; position: absolute; content:""; left:0; right:0; background: #fff url("./loading.gif") no-repeat center; } </style>

Vue特性

生命周期

Vue声明周期：一个Vue实例从创建到销毁的整个过程

分为四个阶段：创建，挂载，更新，销毁

初始化渲染请求，需要Vue准备好数据之后在进行，所以最早可以在创建完之后，进行初始化渲染

操作dom，需要Vue将数据挂载到html中之后再进行操作，所以最早可以在挂载完毕之后在进行dom操作

钩子函数

在Vue声明周期中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定的阶段运行自己的代码

四个阶段，八个钩子 -> 三个常用 created, mounted, beforDestory(释放资源：定时器，全局监听事件)

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

const app = new Vue({
    el:"#app",
    data:{
        apple:"苹果"
    },
    // 以下函数会自动执行
    // 创建阶段
    beforCreate () {
        // 创建数据之前
    },
    created () {
        // 创建数据之后
    },
    
    // 挂载阶段
    beforMount () {
        // 挂载Dom，模板渲染之前
    },
    mounted () {
        // 挂载Dom，模板渲染之后
    },
    
    // 更新阶段
    beforUpdate () {
        
    },
    updated () {
        
    },
    
    // 销毁阶段
    beforDestroy () {
    
	},
    destroyed () {
        
    }
})

案例

一进页面就立刻发送请求，获取数据并在页面上渲染

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

const app = new Vue({
    el:"#app",
    data:{
        // 此时list中并没有数据
        list:[]
    },
    async created () {
        const res = await axios.get("网址")
        // 通过自己获取的数据自动给list赋值
        this.list = res.data.data
    }
})

小黑商品列表

基本渲染

在数据准备完成之后进行渲染

可以再created中使用

注意：渲染列表的方式可以提取出来，这样在修改数据的时候可以直接调用即可，注意:methods中的方法在别处调用的时候，一定要加this.方法名获取

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

created() {
    // 方法也要通过this访问
    this.getList()
}
methods: {
    async getList() {
        const res = await axios({
            url: "https://applet-base-api-t.itheima.net/bill",
            method: "GET",
            params: {
                creator: "张三"
            }
        })
        // 一定要加this 否则赋值不上
        this.priceList = res.data.data
    }
},

添加功能

添加完毕之后需要使用 上面封装的获取列表函数来进行从新渲染

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

await axios({
    url: "https://applet-base-api-t.itheima.net/bill",
    method: "POST",
    data: {
        creator: "张三",
        name: this.goodsName,
        price: this.goodsPrice,
    }
})
// 从新渲染获取的数据
this.getList()
this.goodsName = ""
this.goodsPrice = ""
}

删除功能

同样，删除完毕之后需要重新渲染

1
2
3
4
5
6
7

async del(id) {
    await axios({
        url: `https://applet-base-api-t.itheima.net/bill/${id}`,
        method: "delete"
    })
    this.getList()
},

饼图渲染

初始化饼图

因为饼图需要绑定到页面上的dom对象中，所以最早可以再mounted钩子中使用

具体细节可以阅读官方文档

myChart可以定义到this中，这样方便更新

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

mounted() {
    this.myChart = echarts.init(document.getElementById('main'));
    this.myChart.setOption({
        title: {
            text: '商品消费图',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '商品价格',
                type: 'pie',
                radius: '50%',
                data: [],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    })
}

更新饼图

每次在获取完数据之后可以通过覆盖的方式来更新饼图

通过this获取到mounted中定义的myCharts来进行

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

async getList() {
    const res = await axios({
        url: "https://applet-base-api-t.itheima.net/bill",
        method: "GET",
        params: {
            creator: "张三"
        }
    })
    // 一定要加this 否则赋值不上
    this.priceList = res.data.data
    this.myChart.setOption({
        series: [
            {
                data: this.priceList.map(item => ({value:item.price, name:item.name}))
            }
        ]
    })
},

工程化开发VUE CLI

开发Vue的两种方式:

1. 核心包传统开发模式:基于html/css /js 文件，直接引入核心包，开发 Vue。
2. 工程化开发模式:基于构建工具 (例如: webpack)的环境中开发 Vue

Vue CLI 是Vue 官方提供的一个全局命令工具，可以帮助我们快速创建一个开发Vue 项目的标准化基础架子。[集成了 webpack 配置]

好处：

1. 开箱即用，零配置
2. 内置babel等工具
3. 标准化

使用步骤:

1. 全局安装(一次): yarn global add @vue/cli 或 npmi @vue/cli -g
2. 查看 Vue 版本: vue --version
3. 创建项目架子:vue create project-name(项目名-不能用中文)
4. 启动项目: yarn serve 或 npm run serve (找packagejson)

组件开发

1. 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为

   好处:便于维护，利于复用 提升开发效率

   组件分类:普通组件、根组件

2. 根组件：整个应用最上层的组件，包裹所有小组件

根组件：App.vue的三部分

1. template：结构
2. script：js逻辑
3. style：样式

普通组件注册和使用

1. 局部注册：只能在注册的组件内使用

   在components文件夹下创建 .vue文件（有三个组成部分）

   

   在使用的组件内导入并注册

   app.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

   <template> <div class="app"> <!-- 头部 --> <HguHeader></HguHeader> <!-- 身体 --> <HguMain></HguMain> <!-- 尾部 --> <HguFooter></HguFooter> </div> </template> <script> import HguHeader from "./components/HguHeader.vue" import HguMain from "./components/HguMain.vue" import HguFooter from "./components/HguFooter.vue" export default { components:{ HguHeader:HguHeader, HguMain:HguMain, HguFooter:HguFooter, } } </script> <style> .app { width: 600px; height: 600px; background-color: aqua; margin: 0 auto; padding: 20px; } </style>

2. 全局注册：所有组件都能使用

   在components文件夹下创建 .vue文件（有三个组成部分）

   vue.component(组件名， 组件对象)

   在main.js组件内导入并注册

3. 使用：

   当成html标签使用即可 <组件名></组件名>

   命名规范-大驼峰命名法

页面开发思路

页面开发思路

1. 分析页面，按模块拆分组件，搭架子(局部或全局注册)
2. 根据设计图，编写组件html结构 css样式(已准备好)
3. 拆分封装通用小组件 (局部或全局注册

将来通过js动态渲染，实现功能

组件的三大部分组成

组件有三部分组成：结构，样式，逻辑

样式

默认情况：写在组件中的样式会全局生效 -> 因此容易造成多个组件之间样式冲突问题

全局样式（默认） ：影响所有组件（即使写到单个组件中）

局部样式：scoped下的样式，只作用于当前组件

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

<template>
  
</template>

<script>
export default {

}
</script>
// 加上 scoped可以只作用于当前文件中的内容
<style scoped>

</style>>

scoped原理：

1. 当前组件内标签都被添加 data-v-hash值 的属性
2. css选择器都被添加[data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的素,才会有这个自定义属性,才会被这个样式作用到

逻辑

1. el根实例独有

2. data是一个函数：一个组件的 data 选项必须是一个函数。> 保证每个组件实例，维护独立的一份数据对象每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

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

   <template> <div> <button @click="count++">＋</button> <span>{{ count }}</span> <button @click="count--">－</button> </div> </template> <script> export default { data(){ return { count:999 } } } </script> // <style scoped> </style>>

3. 其他配置项一致

组件通信

组件与组件之间的数据传递

组件数据是独立的，无法直接访问其他组件的数据，想用其他组件的数据需要使用组件通信

不同的组件关系，组件通信解决方案不同

1. 父子关系

   props和$emit

   父组件通过 props 将数据传递给子组件

   父组件：

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

   <template> <div> <!-- 通过绑定属性来给子元素传递数据 --> <son :title="myTitle"></son> </div> </template> <script> import son from "./components/son.vue" export default { data(){ return { myTitle:"你好" } }, components:{ son } } </script> // <style scoped> </style>>

   子组件

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

   <template> <div> {{ title }} </div> </template> <script> export default { props:["title"] } </script> // <style scoped> </style>>

   子组件利用 $emit 通知父组件修改更新

   子组件

   $emit(事件名，数据)

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

   <template> <div> {{ title }} <button @click="handleClick"> 修改title </button> </div> </template> <script> export default { props:["title"], methods:{ handleClick(){ // 子元素通过$emit来绑定触发事件，并传递参数 this.$emit("changeTitle", "修改后的名字") } } } </script> // <style scoped> </style>>

   父组件

   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

   <template> <div> <!-- 通过绑定属性来给子元素传递数据 --> <!-- 通过监听son的事件来进行修改 --> <son :title="myTitle" @changeTitle="changeFn"></son> </div> </template> <script> import son from "./components/son.vue" export default { data(){ return { myTitle:"你好" } }, components:{ son }, methods:{ changeFn(newTitle){ this.myTitle=newTitle } } } </script> // <style scoped> </style>>

​

2. 非父子关系

   provide & inject：作用：跨层级共享数据

   简单数据类型：不是响应式的

   复杂数据类型：是响应式的

   1. 父组件：provide提供数据

      1 2 3 4 5 6 7 8

      export default { provide() { return { color:this.color, userInfo:this.userInfor } } }

   2. 子孙组件inject取值使用

      1 2 3 4 5 6

      export default { inject:["color", "userInfo"], created () { console.log(this.color, this.userInfo) } }

   eventbus：作用：非父子组件之间，进行简易的消息传递

   1. 创建一个都能访问到的事件总线 JS文件

   1 2 3

   import Vue from "vue" const Bus = new Vue() export default Bus

   2. 接收方，监听Bus实例的对象

      1 2 3 4 5

      created(){ Bus.$on("sendMsg", (msg)=>{ this.msg=msg }) }

   3. 发送方，触发Bus实例事件

      1	Bus.$emit("sendMsg", msg)

prop

prop定义：组件上注册的一些自定义属性

prop作用：向子组件传递数据

特点：

可以传递任意数量的prop

可以传递任意类型的prop

prop校验

通过改变prop的方式来传递

1. 类型校验

   prop:{校验的属性名:类型}

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

   <template> <div> {{ title }} <button @click="handleClick"> 修改title </button> </div> </template> <script> export default { props:{ title:String }, methods:{ handleClick(){ // 子元素通过$emit来绑定触发事件，并传递参数 this.$emit("changeTitle", "修改后的名字") } } } </script> <style scoped> </style>

2. 完整写法

   props:{ w :{约束条件}}

   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

   <template> <div> {{ title }} <button @click="handleClick"> 修改title </button> </div> </template> <script> export default { props:{ title:{ type:String, // 类型 required:true,// 非空 default:0, // 默认值 validator (value) { // 自定义属性 ，返回true和false // 根据value判断 return true } } }, methods:{ handleClick(){ // 子元素通过$emit来绑定触发事件，并传递参数 this.$emit("changeTitle", "修改后的名字") } } } </script> <style scoped> </style>

prop和data

共同点：都可以给组件提供数据

区别：

data的数据时自己的：可以随便改

prop的数据是外部的：不可以随便改

.sycn修饰符

作用：可以实现子组件和父组件的双向绑定，简化代码

特点：prop属性名可以自定义，非固定的value

本质：就是**:属性名和@update:属性名**合写

父元素

1
2
3
4
5
6

<BaseDialog :visible.sync="isShow" />

<BaseDialog
            :visible="isShow"
            @update:visible="isShow=$event"
/>

子元素

1
2
3
4

props:{
	visible:Boolean
},
this.$emit("update:visible", false)

ref和$refs

作用：可以获取dom元素，或组件实例

特点：查找范围更加精确，documen.queryselector() 查找全局的

获取dom

1. 目标标签 添加ref属性

   1	<div ref="chartRef">图片渲染容器</div>

2. 恰当时机，通过this.$refs.xxx获取目标标签

   1 2 3

   mounted(){ console.log(this.$refs.chartRef) }

   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

   <template> <div class="base-chart-box" ref="baseBox" ></div> </template> <script> import * as echarts from "echarts"; export default { mounted() { // 通过refs精确获取指定盒子 const myChart = echarts.init(this.$refs.baseBox); myChart.setOption({ xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], }, yAxis: { type: "value", }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: "bar", }, ], }); }, }; </script> <style scoped> .base-chart-box{ width: 400px; height: 400px; } </style>

获取组件实例

1. 目标组件添加ref属性

   1	<BaseFrom ref="BaseFrom"></BaseFrom>

2. 恰当时机，可通过this.$refs.xxx获取目标组件

   1	this.$refs.BaseFrom.组件方法()

例如：

子表

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

<template>
  <form>
    账号：<input type="text" v-model="account">
    密码：<input type="password" v-model="password">
  </form>
</template>

<script>
export default {
    data(){
        return{
            account:"",
            password:"",
        }
    },
    methods:{
        getValues(){
            return{
                account:this.account,
                password:this.password
            }
        },
        reset(){
            this.account="",
            this.password=""
        }
    }
}
</script>

<style>

</style>

父表

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

<template>
  <div class="app">
    <BaseFrom ref="basefrom"></BaseFrom>
    <button @click="getValue">获取数据</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import BaseFrom from "./components/BaseFrom.vue"
export default {
  components:{
    BaseFrom
  },
  methods:{
    getValue(){
      console.log(this.$refs.basefrom.getValues())
    },
    reset(){
      this.$refs.basefrom.reset()
    }
  }
}
</script>
<style>
</style>

Vue异步更新，$nextTick

需求：当点击一个按钮的时候，输入框立刻出现，并自动获取焦点

1. 点击编辑，显示编辑框

2. 让编辑框，立刻获取焦点

   1 2	this.isShowEdit = true // 显示输入框 this.$refs.inp.focus() // 获取焦点

   Vue是异步更新的，所以在执行show操作的时候，Dom元素不会立刻渲染出来

   可使$nextTick来等待Dom元素加载完毕之后在获取焦点

   1 2 3 4

   this.isShowEdit = true // 显示输入框 this.$nextTick(()=>{ this.$refs.inp.focus() // 获取焦点 })

插槽

作用：让组件内部的一些结构支持自定义

需求：在页面中显示对话框，封装成一个组件

问题：组件内容部分，不希望写死，希望使用的时候自定义

语法

1. 组件内需要定制的结构部分，改用< slot >< /slot >占位

2. 使用组件的时候，< MyDialog ></ MyDialog >标签内容，传入结构替换slot

   组件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

   <template> <div> <div class="header"> </div> <div class="main"> <slot></slot> </div> <div class="footer"> </div> </div> </template> <script> export default { } </script> <style> </style>

   使用Vue

   1 2 3 4 5 6 7 8

   <MyDialog> <!-- 标签内部的文本会传入到改标签组件中slot的位置 --> 你确定要删除吗 </MyDialog> <MyDialog> <!-- 标签内部的文本会传入到改标签组件中slot的位置 --> 你确定要修改吗 </MyDialog>

默认内容

为slot设置默认内容，如果不设置默认内容，而且也没有传入相应的参数的话，则会显示空白

直接向slot中写入默认内容即可，如果外面有值传递进来，则会替换掉默认内容