返回首页

Vue2+Vue3教程——By Bug

前言

本笔记为站长学习过程中做的笔记内容，可能有遗漏或错误等，本笔记仅供参考，一切以官方文档为准，谢谢！

笔记参考资料：

前端最新Vue2+Vue3基础入门到实战项目全套教程_（哔哩哔哩）

前端新版Vue2+Vue3基础入门到实战项目全套教程 (itheima.com)

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

vue基础案例接口 (apifox.com)

Vue入门

什么是Vue

• Vue是一个构建用户界面的渐进式 框架 构建用户界面：基于数据渲染出用户所看到的界面

• 优点：大大提升开发效率

• 缺点：需要记忆一些规则

Vue的两种使用方式：

1. Vue核心包开发 场景：局部模块改造

2. Vue核心包&Vue插件工程化开发 场景：整站开发

创建Vue实例

安装

安装 — Vue.js (vuejs.org)

xxxxxxxxxx
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

四个核心步骤：

1. 准备容器

2. 引包（开发版本/生产版本）

3. 创建Vue实例（new Vue()）

4. 指定配置项→渲染数据

xxxxxxxxxx
<!-- 准备容器 -->
<div id="tex">
    {{msg}}
</div>
<!-- 引包-开发版本-包含完整注释和错误警告 -->
<!-- 一旦引入软件包,全局环境中就包含了Vue构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    // 创建实例
    const a = new Vue({
        // 配置项
        el: '#tex',//指定容器
        data: {//提供数据
            msg: "1222234aa1a"

        }

    })
</script>

插值表达式

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

作用：利用表达式进行插值，将数据渲染到页面中。

语法：{{ 表达式 }}

xxxxxxxxxx
<div id="tex">
    {{msg}}
        </div>
data: {//提供数据
    msg: "1222234aa1a"
}

注意：

1. 使用的数据必须存在

2. 支持的是表达式，而不是语句：（if,for等不支持）

3. 不能在标签属性中使用

响应式特征

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

数据访问及修改方法：实例名.属性=值

例如：在下面的代码中，msg数据：abc先渲染到页面中，3秒之后变为123456并重新渲染到页面上

xxxxxxxxxx
<div id="tex">
    {{msg}}
</div>
<!-- 引包-开发版本-包含完整注释和错误警告 -->
<!-- 一旦引入软件包,全局环境中就包含了Vue构造函数 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    // 创建实例
    const a = new Vue({
        // 配置项
        el: '#tex',//指定容器
        data: {//提供数据
            msg: "abc"
        }
    })
    setTimeout(() => {
        a.msg = "123456"
    }, 3000);
</script>

Vue开发者工具安装

浏览器Vue插件，使用插件可以方便快捷的修改数据

在权限设置中开启允许访问文件地址

将浏览器重启，插件生效。

Vue指令

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

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

V-html

和innerhtml作用相同，可以把标签内容动态解析到标签中

插值表达式无法完成这个功能 当使用插值表达式插入标签时，会将标签以纯文本形式插入，而不会解析标签，如下所示

xxxxxxxxxx
//使用插值表达式
data: {//提供数据
    msg: `<a href="http://baidu.com">111</a>`
}

如果使用v-html属性插入，如下所示

xxxxxxxxxx
<div id="tex" v-html="msg"></div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    // 创建实例
    const a = new Vue({
        // 配置项
        el: '#tex',//指定容器
        data: {//提供数据
            msg: `<a href="http://baidu.com">点击我，跳转到百度</a>`
        }

    })

</script>

V-show&&V-if

这两个属性都是控制元素的显示和隐藏的。 其中V-if是条件渲染 当条件为true时显示，为false时隐藏元素

V-show

作用：控制元素的显示和隐藏 语法：v-show=”表达式“ 表达式值true显示，false隐藏 原理：相当于使用display:none来控制元素的显示和隐藏。 场景：适合频繁切换显示和隐藏的场景（例如：二级菜单等）

V-if

作用：控制元素的显示和隐藏 语法：v-if=”表达式“ 表达式值true显示，false隐藏 原理：根据条件控制元素的创建和移除来控制元素的显示和隐藏。 场景：要么显示，要么隐藏，不频繁切换的场景（例如：页面广告等）

v-else&&v-else-if

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

xxxxxxxxxx
<div id="tex">
    <p v-if="gen===1">男</p>
    <p v-else-if="gen===2">女</p>
    <p v-if="sc>=80">优</p>
    <p v-else-if="sc>=60">良</p>
    <p v-else-if="sc<60">差</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const a = new Vue({
        el: '#tex',
        data: {
            gen: 2,
            sc: 44
        }
    })

</script>

v-on

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

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

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

3. 为了方便 v-on: 可简写为@

内联语句

实例：控制数字加减

xxxxxxxxxx
<div id="tex">
    <button v-on:click="gen--">-</button>
    <span>{{gen}}</span>
    <button v-on:click="gen++">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
    const a = new Vue({
        el: '#tex',
        data: {
            gen: 100
        }
    })
</script>

methods函数

xxxxxxxxxx
<div id="a1">
    <button @click="sho">显示/隐藏</button>
    <h1 v-show="s1">这是一段话</h1>
</div>
<script>
    const a = new Vue({
        el: "#a1",
        data: {
            s1: true
        },
        methods: {
            sho() {
                this.s1 = !this.s1
            }
        }
    })
</script>

v-on调用传参

xxxxxxxxxx
<button @click="sho(参数1，参数2,参数n...)">显示/隐藏</button>

案例：自动取款机

xxxxxxxxxx
<div id="a1">
    <h1>自动取款机</h1>
    <button @click="sho(-100)">取100元</button>
    <button @click="sho(-400)">取400元</button>
    <button @click="sho(200)">存200元</button>
    <h4>当前余额：{{money}}</h4>

</div>
<script>
    const a = new Vue({
        el: "#a1",
        data: {
            money: 1200
        },
        methods: {
            sho(a) {
                if (this.money + a < 0) {
                    alert("余额不足")
                }
                else {
                    this.money += a
                }
            }
        }
    })
</script>

v-bind

作用：动态的设置html的标签属性（src,url,title等）

语法：v-bind:属性名=“表达式” v-bind可以省略 直接写 :属性名=“表达式”

例如：我们想要动态渲染img标签的图片地址，宽度等

xxxxxxxxxx
<div id="a2">
    <img src="" :src="imgsrc" :width="w" alt="">
</div>
<script>
    const a2 = new Vue({
        el: "#a2",
        data: {
            imgsrc: "img/2.png", w: 300
        }
    })
</script>

案例：图片轮播效果

xxxxxxxxxx
<div id="a2">
    <img src="" :src="imgsrc" :width="w" :h="h" alt="">
</div>
<script>
    const a2 = new Vue({
        el: "#a2",
        data: {
            imgsrc: "",
            w: 300,
            h: 300
        }
    })
    let n = 1;

    const a3 = setInterval(() => {
        if (n > 5) {
            n = 1
        }
        else {

            a2.imgsrc = `./img/${n++}.png`
            console.log(a2.imgsrc)
        }
    }, 1500);

v-bind操作class

语法：:class="对象、数组"

• 对象→key就是类名，值就是布尔值，值为true则有这个类，为false则没有这个类

  xxxxxxxxxx
  <div class="box" :class="{ 类名1：布尔值，类名2：布尔值}"></div>、
  

• 数组→数组中所有的类，都添加到盒子上，本质就是一个class列表

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

   

实例：为导航栏点击加背景颜色

xxxxxxxxxx
<style>
    .pink {
        background-color: pink;
    }
</style>
<ul id="a">
    <li v-for="(a,b) in list" :class="{pink:b===act}" :key="a.id" @click="act=b">{{a.tx}}</li>
</ul>
<script>
    const aa = new Vue({
        el: "#a",
        data: {
            act: 0,
            list: [
                { id: 1, tx: "首页" },
                { id: 2, tx: "秒杀" },
                { id: 3, tx: "特价" }
            ],
        }
    })
</script>

v-bind操作style

语法：:style="样式对象"

xxxxxxxxxx
<div :style="{color:'red','font-size':'30px'}">1</div>

v-for

作用：基于数据循环，多次渲染整个元素 v-for支持：数组、对象、数字

遍历数组语法： v-for=”(item,index) in 数组名“

xxxxxxxxxx
<ul id="a5">
    <li v-for="(item,index) in a6">{{item}}</li>
</ul>
<script>
    const ac = new Vue({
        el: "#a5",
        data: {
            a6: ["吃饭", "睡觉", "打豆豆"]
        }
    })
</script>

案例：书架

xxxxxxxxxx
<ul id="a7">
    <li v-for="(item,index) in a8">
        <span>{{item.name}}</span>-
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
    </li>
</ul>
<script>
    const ad = new Vue({
        el: "#a7",
        data: {
            shows: true,
            a8: [
                { id: 1, name: "《西游记》", author: "吴承恩" },
                { id: 2, name: "《红楼梦》", author: "曹雪芹" },
                { id: 3, name: "《水浒传》", author: "施耐庵" },
                { id: 4, name: "《三国演义》", author: "罗贯中" }
            ]
        },
        methods: {
            del(id) {
                this.a8 = this.a8.filter(item => item.id !== id)
                console.log(this.a8)
            }
        }
    })
</script>

v-for中的key

语法：:key=“唯一标识”

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

xxxxxxxxxx
<ul id="a7">
    <li v-for="(item,index) in a8" :key="item.id">
        <span>{{item.name}}</span>-
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
    </li>
</ul>

注意：

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

2. key的值必须具有唯一性

3. 推荐使用id作为key，不推荐使用数组下标

v-model

作用：给表单元素使用，双向绑定→可以快速或设置表单元素

数据变化→视图自动更新 视图变化→数据自动更新

语法：v-model="变量"

实例：登录

xxxxxxxxxx
<div id="logform">
    <input type="text" placeholder="请输入账号" v-model="users"><br>
    <input type="password" placeholder="请输入密码" v-model="pwds">
    <button @click="loginbt">登录</button>
    <button @click="restbt">重置</button>
</div>
<script>
    const lg = new Vue({
        el: "#logform",
        data: {
            users: "1",
            pwds: "123"
        },
        methods: {
            loginbt() {
                console.log(`登录成功，账号：${this.users},密码：${this.pwds}`)
            },
            restbt() {
                console.log("重置完成")
                this.users = ""
                this.pwds = ""
            }
        }
    })
</script>

应用于其他表单元素

常见的表单元素都可以用v-model绑定关联→快速设置和获取表单元素的值 它会根据控件的类型自动选取正确的方法，无需手动设置

输入框：input:text——value 文本域：textarea——value 复选框：input:checkbox——checked 下拉菜单：select——value

v-model原理

原理本质上是一个语法简写，例如应用在输入框上，就是value属性和input事件的合写 作用：提供数据的双向绑定 数据变，视图跟着变 :value 视图变，数据跟着变 @input

比如：子组件在设置下拉菜单传来的值时，是无法直接修改的，需要把v-model进行拆分

v-model等价于 :value ——@input

xxxxxxxxxx
<template>
<div class="as">
    <input type="text" v-model="msg">
    <input type="text" :value="msg1" @input="msg1 =$event.target.value">
    </div>
</template>
<script>
    export default {
        data(){
            return{
                msg:1,
                msg1:2
            }
        }
    }
</script>

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

v-model应用于组件

像类似地址选择下拉菜单等常用的模块经常封装成组件，以便进行复用，这便会涉及到组件间的数据通信问题

实例：下拉菜单组件

x
// xiala.vue
<template>
  <div>
    <select name="" id="" :value="value" @change="chooseCity">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">广州</option>
        <option value="104">深圳</option>
        <option value="105">成都</option>
    </select>
  </div>
</template>

<script>

export default {
    props:{
        value:String
    },
    methods:{
        chooseCity(e){
            console.log("你选择的是："+e.target.value)
            this.$emit("input",e.target.value)
        }
    }

}
</script>

<style>

</style>

xxxxxxxxxx
// APP.vue
<template>
  <div id="app">
    <Xiala v-model="CityID"></Xiala>
  </div>
</template>

<script>

import Xiala from './components/XiaLa'
export default {
  data() {
    return {
      CityID:"101"
    }
  },
  components:{
    Xiala
  },
  watch:{
    CityID(){
      console.log(this.CityID)
    }
  }
  
}
</script>

<style scoped>
#app{
  width: 600px;
  margin: 100px auto;
  border: 1px solid red;
  border-radius: 5px;
  background-color: antiquewhite;
}
</style>

• 表单类组件封装

  1. 父传子：数据从父组件中传递过来，v-model拆解绑定数据

  2. 子传父：监听输入，子传父值给父组件进行修改

xxxxxxxxxx
//父组件中
<子组件标签 :ids='sc' @事件名='sc=$event'></子组件标签>

xxxxxxxxxx
//子组件中
<标签 :value='n' @change='ab'></标签>
props:{
    n:类型
},
methods:{
    change(e){
        this.$emit('事件名',e.target.value)
    }
}

• v-model简化代码

  1. 子组件中：props通过value接收，事件触发input

  2. 父组件中：v-model给组件直接绑定数据

xxxxxxxxxx
// 父组件
<BaseSelect v-model="selectId"></BaseSelect>

xxxxxxxxxx
//子组件
<select :value="value"@change="handlechange">...</select>
props:{
    value: String
},
methods: {
    handleChange (e) {
        this.$emit('input', e.target.value)
    }
}

简化的代码：

xxxxxxxxxx
// APP.VUE
<template>
  <div id="app">
    <Xiala v-model="CityID"></Xiala>
  </div>
</template>

<script>

import Xiala from './components/XiaLa'
export default {
  data() {
    return {
      CityID:"101"
    }
  },
  components:{
    Xiala
  },
  watch:{
    CityID(){
      console.log(this.CityID)
    }
  }
  
}
</script>

xxxxxxxxxx
// xiala.vue
<template>
  <div>
    <select name="" id="" :value="value" @change="chooseCity">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">广州</option>
        <option value="104">深圳</option>
        <option value="105">成都</option>
    </select>
  </div>
</template>

<script>

export default {
    props:{
        value:String
    },
    methods:{
        chooseCity(e){
            console.log("你选择的是："+e.target.value)
            this.$emit("input",e.target.value)
        }
    }

}
</script>

指令修饰符

通过 “.” 指名一些指令的后缀，不同的后缀封装了不同的操作→简化代码

1. 按键修饰符 @keyup.enter→键盘回车键监听

2. v-model修饰符 v-model.trim→去除首尾空格 v-model.number→转数字

3. 事件修饰符 @事件名.stop→阻止冒泡 @事件名.prevent→阻止默认行为

4. 更多指令修饰符，见官方文档

计算属性

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

语法：

1. 声明在computed配置项中，一个计算属性对应一个函数

2. 使e'e'e'e方法和普通属性一样——{{ 计算属性名 }}

   xxxxxxxxxx
   computed: {
       计算属性名() {
           计算逻辑代码
           return 计算结果;
       },
   

    

实例：购物车统计

xxxxxxxxxx
<style>
    tr,
    td {
        border: 1px solid;
    }
</style>
<table style="border: 1px solid;" id="sp">
    <thead>
        <tr>
            <td>商品ID</td>
            <td>商品名</td>
            <td>商品单价</td>
            <td>数量</td>
        </tr>
    <tbody>
        <tr v-for="(a,b) in list" :key="a.id">
            <td>{{a.id}}</td>
            <td>{{a.name}}</td>
            <td>{{a.price}}</td>
            <td>{{a.num}}</td>
        </tr>
        <tr>
            <td colspan="4"><span>总个数：{{sum}}件，总价：{{sump}}元</span></td>
        </tr>
    </tbody>
    </thead>

</table>
<script>
    const shop = new Vue({
        el: " #sp", data: {
            list: [
                { id: 1, name: "苹果", price: 3, num: 7 },
                { id: 2, name: "香蕉", price: 3.5, num: 2 },
                { id: 3, name: "榴莲", price: 26, num: 4 },
                { id: 4, name: "梨", price: 4, num: 8 },
                { id: 5, name: "葡萄", price: 13, num: 12 }
            ]
        }, computed: {
            sum() {
                return this.list.reduce((sum, it) =>
                                        sum + it.num, 0)
            },
            sump() { return this.list.reduce((sum, it) => sum + (it.price * it.num), 0) }
        }

    })
</script>

computed和methods的区别 computed计算出结果后可以缓存，下次在使用时直接使用缓存数据，除非数据变了才会重新计算 methods每使用一次就会被调用一次

计算属性的完整的写法

计算属性的默认写法是只能访问，不能修改的。 若要想修改，需要使用计算属性的完整写法。

语法如下：

xxxxxxxxxx
computed: {
    计算属性名() {
       get(){ 
        计算逻辑代码
        return 计算结果;
       },
       set(){ 
        修改逻辑代码
       }
    }

watch 侦听器

作用：监视数据的变化，执行一些逻辑或异步操作 需求：翻译应用，左侧输入，右侧展示翻译结果

语法：

1. 简单写法

   xxxxxxxxxx
   data:{
       name:"zhangsan",
           num:1
   },
       watch:{//数据属性和要监视的属性同名
           数据属性名(新数据，旧数据){
               业务逻辑、操作
           }
       }
   
   

   实例：文本实时展示框

   xxxxxxxxxx
   <div id="tx">
       <textarea name="" id="" rows="10" v-model="oldv"></textarea>
       <textarea name="" id="" rows="10" v-model="newv"></textarea>
   </div>
   <script>
       const b = new Vue({
           el: "#tx",
           data: {
               oldv: "",
               newv: ""
           },
           watch: {
               oldv(n) {
                   n += "翻译完成"
                   this.newv = n
               }
           }
       })
   </script>
   

    

2. 完整写法

   添加额外的配置项

   1. deep:true——对复杂类型深度监视

   2. immediate:true——初始化立即执行一次handler方法

   xxxxxxxxxx
   data:{
       obj:{
           name:"zhangsan",
               num:1
       }
   },
       watch:{//数据属性和要监视的属性同名
          obj:{
               deep:true,
                   函数名(新数据，旧数据){
                   业务逻辑、操作
               }
           }
       }
   

    

综合案例：笔记本

xxxxxxxxxx
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: cadetblue;
        }

        #box {
            position: relative;
            width: 500px;
            margin: 200px auto;

            background-color: wheat;
        }

        #box h1 {
            width: 100%;
            text-align: center;
            margin-bottom: 30px;
        }

        #box input {
            width: 480px;
            height: 50px;
            padding-left: 10px;
            font-size: 30px;
            border: 2px solid red;
            border-radius: 10px;
            margin-left: 10px;
        }

        #box input:focus {
            outline: 0;
        }

        #box button {
            position: absolute;
            top: 72px;
            right: 10px;
            height: 50px;
            width: 100px;
            border: 0;
            background-color: red;
            border-radius: 0 10px 10px 0;
            font-size: 20px;
            color: white;

        }

        ul:last-child {
            margin-bottom: 10px;
        }

        li img {
            float: right;
            margin-top: 5px;
            height: 30px;
            margin-right: 20px;
            display: none;
        }

        li:hover img {
            display: block;
        }

        li {
            list-style: none;
            border-bottom: 1px solid #c9c5c5;
            font-size: 30px;
            color: #888;
            padding: 10px 0;
        }

        #box font {
            display: inline-block;
            width: 40px;
            height: 40px;
            padding-left: 10px;
        }

        #btm {
            margin-top: 5px;
            background-color: wheat;
            height: 30px;
            color: #4d4b4b;
        }

        #btm :first-child {
            position: absolute;
            left: 10px;

        }

        #btm :last-child {
            position: absolute;
            right: 10px;

        }

        #btm :last-child:hover {
            cursor: default;
        }
    </style>
    <div id="box">
        <h1>黄桑的记事本</h1>
        <input type="text" v-model="tex" placeholder="请输入任务">
        <button @click="adddata">添加任务</button>
        <ul>
            <li v-for="(a,b) in list" :key="a.id">
                <font>{{b+1}}.</font>{{a.tex}}
                <img src="./img/del.png" alt="" title="删除" @click="deldata(a.id)">
            </li>
        </ul>
        <div id="btm">
            <span>总计：{{list.length}} 个任务</span>
            <span @click="clsdata">清除任务</span>
        </div>
    </div>

    <script>
        const box = new Vue({
            el: "#box",
            data: {
                tex: "",
                imgshow: false,
                list: []
            },
            methods: {
                deldata(id) {
                    this.list = this.list.filter(itm => itm.id !== id)
                },
                clsdata() {
                    this.list = []
                },
                adddata() {
                    if (this.tex.trim() != "") {
                        let j = { id: +new Date(), tex: this.tex }
                        this.list.push(j)
                        this.tex = ""
                    }
                }
            }
        })
    </script>

</body>

综合案例：水果购物车

xxxxxxxxxx
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        table {
            width: 520px;
            margin: 10px auto;
            border-collapse: collapse;
        }

        td,
        tr {
            border: 1px solid;
            text-align: center;
        }

        thead {
            height: 25px;
            line-height: 25px;
            background-color: wheat;
        }

        .bgc {
            background-color: #eadddd;
        }

        tr img {
            width: 60px;
        }

        .numbox button {
            width: 25px;
            height: 25px;

        }

        .numbox span {
            display: inline-block;
            width: 30px;
        }

        .del {
            background-color: red;
            border: 0;
            padding: 4px 8px;
            color: white;
            border-radius: 5px;
        }

        tbody tr>:first-child,
        tbody tr>:nth-child(2),
        tbody tr>:nth-child(3),
        tbody tr>:nth-child(6) {
            width: 80px;
        }

        tbody tr>:nth-child(4),
        tbody tr>:nth-child(5) {
            width: 100px;
        }

        tfoot {
            height: 50px;
        }

        .allcheck {
            float: left;
            margin-left: 30px;
            line-height: 50px;
        }

        .allcheck input {
            margin-right: 6px;
        }

        .sumpbox {
            color: rgb(32, 140, 247);
            font-size: 30px;
            line-height: 50px;
            float: left;
            margin-left: 160px;
        }

        .jiesuan {
            float: right;
            margin-top: 10px;
            margin-right: 30px;
            width: 80px;
            height: 30px;
            border: 0;
            background-color: rgb(101, 147, 245);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 900;
            color: white;
            line-height: 30px;
            text-align: center;
        }
    </style>
    <table id="shopcar">
        <thead>
            <tr :style="{ height:'40px'}">
                <td colspan="6">
                    <h2>水果购物车</h2>
                </td>
            </tr>
            <tr>
                <td>选择</td>
                <td>图片</td>
                <td>单价</td>
                <td>个数</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody v-if="list.length>0">
            <tr v-for="a in list" :key="a.id" :class="{bgc:a.checked}">
                <td><input type="checkbox" v-model="a.checked" v-model="chooseone" id=""></td>
                <td><img :src="a.imgurl" alt=""></td>
                <td>{{a.price}}</td>
                <td class="numbox">
                    <button :disabled="a.num<=0" @click="a.num--">-</button>
                    <span> {{a.num}}</span>
                    <button @click="a.num++">+</button>
                </td>
                <td>{{(a.price*a.num).toFixed(2)}}</td>
                <td><button class="del" @click="deldata(a.id)">删除</button></td>
            </tr>
        </tbody>
        <tbody v-else>
            <tr>
                <td colspan="6" style="font-size: 30px; padding: 20px 30px; text-align: center; width: 500px;">
                    🛒购物车被你清空啦！</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
                    <span class="allcheck"><input type="checkbox" name="" id="" v-model="chooseall">全选</span>
                    <span class="sumpbox">{{topr}}元</span><button @click="jiesuan"
                        class="jiesuan">结算({{tosum}})</button>
                </td>
            </tr>
        </tfoot>
    </table>
    <script>
        const dflist = [
            { id: 1, checked: true, imgurl: "./img/fruit/菠萝.png", price: 6, num: 1 },
            { id: 2, checked: true, imgurl: "./img/fruit/草莓.png", price: 3, num: 12 },
            { id: 3, checked: true, imgurl: "./img/fruit/橙子.png", price: 4.4, num: 3 },
            { id: 4, checked: true, imgurl: "./img/fruit/哈密瓜.png", price: 3.4, num: 3 },
            { id: 5, checked: true, imgurl: "./img/fruit/梨子.png", price: 7.5, num: 7 },
            { id: 6, checked: true, imgurl: "./img/fruit/荔枝.png", price: 6.5, num: 9 },
            { id: 7, checked: true, imgurl: "./img/fruit/芒果.png", price: 6.8, num: 9 },
            { id: 8, checked: true, imgurl: "./img/fruit/猕猴桃.png", price: 2.6, num: 6 },
            { id: 9, checked: true, imgurl: "./img/fruit/苹果.png", price: 5.6, num: 5 },
            { id: 10, checked: true, imgurl: "./img/fruit/桃子.png", price: 3.1, num: 5 },
            { id: 11, checked: true, imgurl: "./img/fruit/西瓜.png", price: 0.9, num: 12 },
            { id: 12, checked: true, imgurl: "./img/fruit/香蕉.png", price: 4.8, num: 9 }
        ]
        const a = new Vue({
            el: "#shopcar",
            data: {
                list: JSON.parse(localStorage.getItem('list')) || dflist
            },
            methods: {
                deldata(id) {
                    this.list = this.list.filter(it => it.id !== id)
                },
                jiesuan() {
                    alert('结算成功！')
                    this.list = this.list.filter((it, b) => it.checked !== true)

                }
            },
            computed: {

                chooseall: {
                    get() {
                        return this.list.every(it => it.checked)
                    },
                    set(v) {
                        this.list.forEach(a => a.checked = v)
                    }
                },
                tosum() {
                    return this.list.reduce((sum, a) => a.checked ? sum + a.num : sum, 0)
                },
                topr() {
                    return (this.list.reduce((sum, a) => a.checked ? sum + (a.num * a.price) : sum, 0)).toFixed(2)
                }
            },
            watch: {
                list: {
                    deep: true,
                    handler(n) {
                        localStorage.setItem('list', JSON.stringify(n))
                    }
                }
            }
        })
    </script>
</body>

Vue生命周期

什么是生命周期

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

生命周期的4个阶段

1. 创建阶段

   • 只会执行一次

   • 将普通数据转换成响应式数据

2. 挂载阶段

   • 只会执行一次

   • 渲染模板

3. 更新阶段

   • 可以执行多次

   • 修改数据更新视图

4. 销毁阶段

   • 销毁实例

    

生命周期钩子

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

八个（4组）钩子函数

1. before Create（创建阶段前）

2. created（创建阶段后）——发送初始化渲染请求

3. before Mount（挂载阶段前）

4. mounted（挂载阶段后）——操作dom

5. before Update（更新阶段前）

6. updated（更新阶段后）

7. before Destroy（销毁阶段前）——释放Vue外的资源（定时器等）

8. destroyed（销毁阶段后）

案例：记账本

xxxxxxxxxx
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
    <div id="bigbox">
        <div class="headbox">
            <input v-model="names" type="text">
            <input v-model.number="prices" type="text">
            <button @click="adddata">添加账单</button>
        </div>
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>消费项目</td>
                    <td>消费金额</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(a,b) in list" :key="a.id">
                    <td>{{b+1}}</td>
                    <td>{{a.name}}</td>
                    <td>{{a.price.toFixed(2)}}</td>
                    <td><a href="" @click.prevent="del(a.id)">删除</a></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">总计：{{sumprice}}元</td>
                </tr>
            </tfoot>
        </table>
        <div :style="{width:'400px',height:'400px'}" id="main"></div>
    </div>

    <script>
        const a = new Vue({
            el: "#bigbox",
            data: {
                names: '',
                prices: "",
                list: []
            },
            methods: {
                async del(id) {
                    const d = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
                    this.getlist()
                },
                async adddata() {
                    if (!this.names.trim()) {
                        alert("名称不能为空")
                    }
                    if (typeof this.prices !== 'number') {
                        alert("请输入正确价格")

                    }

                    const add = await axios.post('https://applet-base-api-t.itheima.net/bill',
                        { creator: "huangsir", name: this.names, price: this.prices })
                    this.getlist()
                    this.names = "" 
                    this.prices = ""
                },
                async getlist() {
                    const req = await axios.get('https://applet-base-api-t.itheima.net/bill',
                        {
                            params: {
                                creator: "huangsir"
                            }
                        }
                    )
                    this.list = req.data.data
                    this.myChart.setOption({
                        series: [
                            {
                                // data: [{ value: 123, name: "12" }]
                                data: this.list.map(a => ({ value: a.price, name: a.name }))
                            }
                        ]
                    })
                }

            },
            computed: {
                sumprice() {
                    return this.list.reduce((sum, item) => sum + item.price, 0).toFixed(2)
                }
            },
            async created() {
                this.getlist()

            },
            mounted() {
                this.myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                let a = []
                this.list.forEach(element => {
                    a.push({ value: element.price, name: element.name })
                });
                console.log(a)
                option = {
                    title: {
                        text: "消费账单",
                        left: 'center'
                    },
                    legend: {
                        orient: "vertical",
                        left: "left"
                    },
                    series: [
                        {
                            type: 'pie',
                            name: "消费项目",
                            radius: "50%",
                            // data: [{ value: 123, name: "12" }]
                            data: a
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                this.myChart.setOption(option);
            }


        })

    </script>
</body>

示例：渲染哔哩哔哩日榜

xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <td colspan="2"><h3>{{ newslist.name+newslist.subtitle }}</h3></td>
                </tr>
                <tr>
                <td>标题</td>
                <td>热度</td>
            </tr></thead>
            <tbody>
                <tr v-for="item in  newslist.data">
                    <td><a :href="item.url">{{ item.title }}</a></td>
                    <td>{{ item.hot }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        const app = new Vue({
            el: "#box",
            data: {
                
                    newslist: []
               
            },
            created() {
                async function get_news_list() {
                 
                        const response = await axios.get('https://api.vvhan.com/api/hotlist/bili');
                        this.newslist = response.data
                        
                        
                }
                get_news_list.call(this);
            }
        });
    </script>
    <style>
        td,tr {
            border: 1px solid;
            text-align: center;
            padding: 3px;
        }
    </style>
</body>
</html>

工程化开发入门

开发Vue的两种方式：

1. 核心包传统开发模式：基于html／css/js文件，直接引l入核心包，开发Vue。

2. 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue。 源代码→自动化编译压缩组合→运行的代码

工程化开发&&vue脚手架

介绍： Vue CLI是vue官方提供的一个全局命令工具 它可以帮我们快速创建一个开发Vue项目的标准基础架子（集成了webpack配置）

使用步骤

1. 全局安装：yarn global add @vue/cli 或 npm i @vue/cli -g

2. 查看vue版本：vue --version

3. 创建项目架子：vue create 项目名（非中文）

   

4. 启动项目：yarn serve 或 npm run serve（找到package.json配置serve启动名称） 启动成功

脚手架目录文件介绍

组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件都有自己独立的结构，样式和行为。 优点：便于维护，利于复用，提升开发效率 组件类型：普通组件、根组件

根组件：整个应用最上层的组件，包裹着所有普通的小组件

App.vue文件（单文件组件）的三个组成部分

1. 结构（template）--只有一个根节点

2. 样式（style）--支持less，需要安装less和less-loader

   1. 给style加上lang="less"

   2. 安装依赖包

      xxxxxxxxxx
      yarn add less less-loader
      

3. 行为（script）

默认情况下，编译器无法对vue文件代码进行高亮显示，需要安装以下插件

组件注册

普通组件的局部注册

局部注册：只能在注册的范围内部使用

1. 创建.Vue文件（三个组成部分），在components目录中创建

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

注意：组件名使用大驼峰命名法

语法：

xxxxxxxxxx
//先创建一个小vue组件
import 组件对象 from 'vue文件路径'
export default{
components:{
//局部注册
"组件name":组件对象
}
}

使用： 直接将组件名当作HTML标签使用即可。即：<组件名></组件名>

示例：完成下面的效果图

代码展示：

• APP.vue

  xxxxxxxxxx
  <template>
    <div id="big">
      <PageHeader></PageHeader>
      <PageBody></PageBody>
      <PageFoot></PageFoot>
    </div>
  </template>
  
  <script>
  import PageHeader from './components/PageHeader.vue';
  import PageBody from './components/PageBody.vue';
  import PageFoot from './components/PageFoot.vue';
  export default {
    components:{
      PageHeader,
      PageBody,
      PageFoot
    }
  }
  </script>
  
  <style>
    #big{
      width: 600px;
      height:700px;
      background-color: blue;
      padding: 20px;
    }
  </style>
  

• PageHeader.vue

  xxxxxxxxxx
  <template>
      <div id="phead">这是header盒子</div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  #phead {
      text-align: center;
      width: 100%;
      line-height: 180px;
      height: 180px;
      background-color: rgb(255, 0, 34);
  }
  </style>
  

• PageBody.vue

  xxxxxxxxxx
  <template>
      <div id="pbody">这是body盒子</div>
    </template>
    
    <script>
    export default {
    
    }
    </script>
    
    <style>
    #pbody {
      width: 100%;
      height: 300px;
      background-color: rgb(0, 255, 47);
      text-align: center;
      margin-top: 20px;
      line-height: 300px;
      margin-bottom: 20px;
  }
    </style>
  

• PageFoot.vue

  xxxxxxxxxx
  <template>
    <div id="pfood">这是foot盒子</div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  #pfood {
      width: 100%;
      height: 180px;
      text-align: center;
      line-height: 180px;
      background-color: rgb(255, 238, 0);
  }
  </style>
  

  技巧

  • 输入HmFooter按tab可以让其成为标签

  • 如果HmFooter+tab出不来→需要配置vscode 设置中搜索 trigger on tab →勾上