2022.06.12 - Vue学习笔记

已于 2022-09-14 21:58:47 修改
阅读量193 收藏
点赞数
分类专栏： JavaScript 文章标签： Vue
于 2022-06-12 22:50:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42359693/article/details/125246582
版权

文章目录

Vue基础

Vue简介

  • Vue：是一套用于构建用户界面的渐进式框架。
  • 官方文档：

初识Vue

  • 下载地址：直接用 <script> 引入
    • 开发版本：有警告和调试模式
    • 生成版本：用于生成环境，无警告
  1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
  2. root容器里的代码依然符合html规范，只不过混入一些Vue语法
  3. root容器里的代码被称为“Vue模板”
  4. Vue实例和容器是一一对应的
  5. 真实开发中只有一个Vue实例，并且配合组件一起使用
  6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
  7. 一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新；
  • 使用<script>引入示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示
    Vue.config.productionTip = false;
</script>
</body>
</html>
  • Hello Vue示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
    <!--插值语法-->
    <h1>Hello, {{name.toUpperCase()}}</h1>
    <h1>Age is {{age}}</h1>
</div>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',  // el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串、
        data: {  // data中用于存储数据，数据供el所指定的容器去使用。
            name: 'JayLi',
            age: 18,
        }
    });
</script>
</body>
</html>

区分：js表达式 和 js代码

  • 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
    • a
    • a+b
    • demo(1)
    • x === y ? ‘a’ : ‘b’
  • js代码/语句：
    • if语句
    • for语句

模板语法

  • 模板语法有两大类
    • 插值语法：
      • 功能：用于解析标签体内容
      • 写法：{{xxx}}，xxx是js表达式，且可以直接读取data中的所有属性。
    • 指令语法：
      • 功能：用于解析标签（包括：属性、标签体内容、绑定事件等）
      • eg：v-bind:herf="xxx" 或 简写为 :herf="xxx"，xxx同样是js表达式。
      • 备注：Vue中有很多指令，且形式都是v-???。
  • 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <a v-bind:href="school.url">点我去{{school.name}}</a>
</div>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: 'jack',
            school: {  // 层级访问
                name: '百度',
                url: "http://www.baidu.com"
            }
        }
    })
</script>
</body>
</html>

数据绑定

  • Vue中有两种数据绑定的方式：

    1. 单项绑定（v-bind）：数据只能从data流向页面。
    2. 双项绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。
      • 双向绑定一般都应用在表单类元素上（如：input、select等）
      • v-model:value="xxx"，可以简写为v-model="xxx"，因为v-model默认收集的就是value值。

  • 代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--普通写法-->
    单向数据绑定：<input type="text" v-bind:value="name"><br>
    双向数据绑定：<input type="text" v-model:value="name"><br>
    <!--`v-model:`只能应用在表单类元素（输入类元素）上-->
    <!--简单写法-->
    单向数据绑定：<input type="text" :value="name"><br>
    双向数据绑定：<input type="text" v-model="name"><br>
</div>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: '学习Vue'
        }
    })
</script>
</body>
</html>

el与data的两种写法

  • el的2种写法：

    • new Vue时，配置el属性
    • 先创建Vue实例，随后再通过vm.$mount('#root')制定el的值。

  • data的2种写法：

    • 对象式
    • 函数式：组件，data必须使用函数式，否则会报错。

  • 重要原则：有Vue管理的函数，不能写箭头函数，一旦写了箭头函数，this就不是Vue实例，而且window了。

  • 代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>el与data的两种写法</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // // el的两种写法
    const v = new Vue({
        // el: '#root',
        data: {
            name: 'JayLi'
        }
    })
    console.log(v);
    // 1秒之后，才展示
    setTimeout(() => {
        v.$mount('#root');
    }, 1000);
    // data的两种写法
    const v = new Vue({
        el: '#root',
        // data: {
        //     name: 'JayLi'
        // }
        // data的第二种写法：函数式
        data() {  // 不可以使用箭头函数
            console.log('@@@', this);  // 此处的this是Vue实例对象
            return {
                name: 'JayLi2'
            }
        }
    })
</script>
</body>
</html>

MVVM模型

  • M：模型（Model），对应data中的数据
  • V：视图（View），模板
  • VM：视图模板（ViewModel），Vue实例对象

在这里插入图片描述

  • data中所有的属性，最后都出现在vm上。

  • vm身上的所有属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

  • 代码示例：

<body>
<script type="text/javascript" src="../vue_js/vue.js"></script>
<div id="root">
    <h1>名称：{{name}}</h1>
    <h1>地址：{{address}}</h1>
    <h1>测试一下1：{{1+1}}</h1>
    <h1>测试一下2：{{$options}}</h1>
    <h1>测试一下3：{{_c}}</h1>
</div>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            name: 'JayLi',
            address: 'Beijing'
        }
    })
</script>
</body>

数据代理

Object.defineProperty

  • 语法：Object.defineProperty(obj, '属性名', {配置字段}

    • value：赋值
    • enumerable：控制属性是否可以枚举，默认值是false
    • writable：控制属性是否可以被修改，默认值是false
    • configurable：控制属性是否可以被删除，默认值是false
    • get方法：当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
    • set方法：当有人修改person的age属性时，set函数就会被调用，且收到值就是age的值

  • 示例代码：

<script type="text/javascript">
    let person = {
        name: '张三',
        sex: '男'
    }
    Object.defineProperty(person, 'age', {
        value: 18,
        enumerable: true,  // 控制属性是否可以枚举，默认值是false
        writable: true,  // 控制属性是否可以被修改，默认值是false
        configurable: true,  // 控制属性是否可以被删除，默认值是false
    });
    console.log(person);
    for (let key in person) {  // 枚举
        console.log('@',person[key])
    }
    person.age = 19;
    console.log(person);
    delete person.age;
    console.log(person);
</script>
  • 示例代码：get和set
# js
let person = {
    name: '张三',
    sex: '男'
}
let number = 18;
Object.defineProperty(person, 'age', {
    // 当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
    get(){
        return number;
    },
    // 当有人修改person的age属性时，set函数就会被调用，且收到值就是age的值
    set(val){
        console.log('有人修改age属性的值', val);
        return number = val;
    }
});
number = 20;
console.log(person.age);
person.age = 30;
console.log(person.age);

数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

  • 代码示例：有obj2.y代理obj1.x。
let obj = {x: 100}
let obj2 = {y: 200}
Object.defineProperty(obj2, 'y', {
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})
console.log(obj);  // {x: 100}
obj2.y = 300;
console.log(obj);  // {x: 300}

Vue中的数据代理

  • 概念：通过vm对象来代理data对象中属性的操作（读/写）

  • 优势：更加方便地操作data中的数据

  • 原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部操作（读/写）中对应的属性。

  • 提示：vm._data内部使用了“数据劫持”

  • 示意图
    在这里插入图片描述

事件处理

事件的基本使用

  • 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名。

  • 事件的回调需要配置在methods对象中，最终会出现在vm上。

  • methods中配置的函数，不要用箭头函数！否则this就不是vm，而是windows了。

  • methods中配置的函数，都是被Vue管理的函数，this的指向是vm 或者 组件实例对象。

  • @click="demo"或@click="demo($event, args, ...)"效果一致，但后者可以传参。

  • 示例代码

<body>
<div id="root">
    <h2>欢迎来到{{name}}</h2>
    <button v-on:click="showInfo1">点我提示信息（不传参）</button>
    <br>
    <button @click="showInfo2($event, 66)">点我提示信息（传参）</button>
</div>
<script type="text/javascript">
// 关闭警告：阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
new Vue({
    el: '#root',
    data: {
        name: '北京'
    },
    methods: {
        showInfo1(event){
            console.log(event.target.innerText);  // 输出：点我提示信息
            console.log(this);  // 此处的this是vm
            alert('北京欢迎你')
        },
        showInfo2(event, number){
            console.log(event.target.innerText);  // 输出：点我提示信息
            // console.log(this);  // 此处的this是vm
            alert('北京欢迎你，哈哈' + number.toString())
        }
    }
})
</script>
</body>

事件修饰符

  • prevent：阻止默认事件（常用）

  • stop：组织事件冒泡（常用）

  • once：事件只触发一次（常用）

  • capture：使用事件的捕获模式

  • self：只有event.target是当前操作的元素才触发事件

  • passive：事件的默认行为立即执行，无需等待时间回调执行完毕

  • 修饰符可以连续写：

# 先阻止冒泡，再取消默认事件
<a href="http://www.baidu.com" @click.stop.prevent="showInfo">点我提示信息</a>
  • 代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../vue_js/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: green;
        }
        .box1{
            padding: 5px;
            background-color: blue;
        }
        .box2{
            padding: 5px;
            background-color: orange;
        }
        .list{
            width: 200px;
            height: 200px;
            background-color: darkred;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{name}}</h2>
    <p>阻止默认事件（跳转）</p>
    <a href="http://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
    <p>阻止事件冒泡：不加则弹出两次</p>
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
    </div>
    <p>事件只触发一次</p>
    <button @click.once="showInfo">点我提示信息</button>
    <p>事件的捕获模式</p>
    <div class="box1" @click.capture="showMsg(1)">
        div1
        <div class="box2" @click="showMsg(2)">
            div2
        </div>
    </div>
    <p>只有event.target是当前操作的元素才触发事件</p>
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>
    <p>事件的默认行为立即执行，无需等待时间回调执行完毕</p>
    <ul class="list" @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: '北京'
        },
        methods: {
            showInfo(e) {
                console.log(e.target);
                alert('欢迎你！！！')
            },
            showMsg(num) {
                console.log(num);
            },
            demo(){
                for (let i=0;i<1000;i++){
                    console.log('#')
                }
                console.log('累坏了');
            }
        }
    })
</script>
</body>
</html>

键盘事件

  • Vue中常用的按键别名：

    • 回车：enter
    • 删除：delete（捕获“删除”和“退格”键）
    • 退出：esc
    • 空格：space
    • 换行：tab（特殊：必须用keydown.tab）
    • 上：up
    • 下：down
    • 左：left
    • 右：right
    • 可以连续写：keyup.ctrl.y为按ctrl+y组合键。

  • Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

    • 如：CapsLock为caps-lock。

  • 系统修饰键（用法特殊）：ctrl, alt, shift, meta

    • 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
    • 配合keydown使用：正常触发事件。

  • 也可以使用keyCode去指定具体的按键（不推荐）

  • Vue.config.keyCodes.自定义键名 = 键码，可以定制按键别名。

<div id="root">
    <h2>欢迎来到{{name}}</h2>
    <!--回车输出-->
    <input type="text" placeholder="按下按键提示输入" @keyup.enter="showInfo">
</div>
</body>
<script type="text/javascript">
    // 关闭警告：阻止vue在启动时生成生产提示。
    Vue.config.productionTip = false;
    // 自定义别名：回车的名称为huiche
    Vue.config.keyCodes.huiche = 13
    // 创建Vue实例
    new Vue({
        el: '#root',
        data: {
            name: '北京',
        },
        methods: {
            showInfo(e) {
                console.log(e.keyCode, e.key)  // 按键码，按键名称
                console.log(e.target.value)
            }
        }
    })
</script>

计算属性与监视

计算属性

  • 效果：全名的内容为联动展示
    在这里插入图片描述

  • 定义：要用的属性不存在，要通过已有属性计算得来。

  • 原理：底层借助了Object.defineproperty方法提供的getter和setter。

  • get函数什么时候执行？

    1. 初次读取的时候会执行一次
    2. 当依赖的数据发生变化的时，会被再次调用。

  • 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

  • 备注：

    1. 计算属性最终会出现在vm上，直接读取使用即可。
    2. 如果计算属性要被修改，那必须set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

  • 代码示例（完整写法）：08_03_计算属性_姓名案例_计算属性实现.html

<body>
<div id="root">
    姓：<input type="text" v-model="firstName">
    <br>
    名：<input type="text" v-model="lastName">
    <br>
    全名：<span>{{fullName}}</span>
    缓存：<span>{{fullName}}</span>
</div>
</body>
<script type="text/javascript">
// 关闭警告：阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
vm = new Vue({
    el: '#root',
    data: {
        firstName: '张',
        lastName: '三'
    },
    computed: {
        // get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
        // get什么时候调用：1. 初次读取时。2. 所依赖的数据发生变化时
        fullName: {
            get(){
                console.log('get')
                // 此处的this是vm
                return this.firstName + '-' + this.lastName
            },
            // set什么时候调用？当fullName被修改时
            set(value){
                console.log('set', value)
                const arr = value.split('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})
</script>
  • 代码示例（简写）：如果不需要
vm = new Vue({
    el: '#root',
    data: {
        firstName: '张',
        lastName: '三'
    },
    computed: {
        fullName(){
            return this.firstName + '-' + this.lastName
        },
    }
})

监视属性

  1. 当被监视的属性变化时，回到函数自动调用，进行相关操作
  2. 监视的属性必须存在，才能被监视！
  3. 监视属性的两种写法：
    a. new Vue时传入watch配置
    b. 通过vm.$watch配置
<body>
<div id="root">
    <h2>今天天气很{{info}}</h2>
    <!--绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句-->
    <button @click="changeWeather">切换天气</button><br>
</div>
</body>
<script type="text/javascript">
// 关闭警告：阻止vue在启动时生成生产提示。
Vue.config.productionTip = false;
// 创建Vue实例
vm = new Vue({
    el: '#root',
    data: {
        isHot: true
    },
    watch: {
        isHot: {
            immediate: true,  // 初始化时，让handler被调用
            // handler什么时候被调用：当isHot发生变化时
            handler(newValue, oldValue){
                console.log('isHot被修改了', newValue, oldValue)
            }
        }
    }, shen
    computed:{
        info(){
            return this.isHot ? '炎热' : '凉爽'
        }
    },
    methods:{
        changeWeather(){
            this.isHot = !this.isHot
        }
    }
})
// $watch配置：监视info
vm.$watch('info', {
    immediate: true,  // 初始化时，让handler被调用
    // handler什么时候被调用：当isHot发生变化时
    handler(newValue, oldValue){
        console.log('info被修改了', newValue, oldValue)
    }
})
</script>
深度监视
  • Vue中的watch默认不监测对象内部值的变化（一层）。
  • 配置deep:true可以监测对象内部值的变化（多层）。
  • 备注：
    • Vue自身可以监测对象内部值的变化，只是watch默认不可见。
    • 使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别

  • computed能完成的功能，watch都可以完成。

  • watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作。

  • 两个重要原则：

    • 被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
    • 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数 等），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

  • 代码示例：姓名案例的不同实现

样式绑定

class样式

  • 写法：class="xxx"，xxx可以是字符串、对象、数组。
  • 字符串写法适用于：类名不确定，要动态获取。
  • 对象写法市适用于：要绑定多个样式，个数不确定，名字也不确定。
  • 数组写法适用于：要绑定读多个样式，个数确定，名字也确定，但不确定用不用。

style样式

  • :style="{fontSize: xxx}"其中xxx是动态值。
  • :style="[a,b]"其中a,b是样式对象。

条件渲染

v-if

  • 写法：
    • v-if="表达式"
    • v-else-if="表达式"
    • v-else
  • 适用于：切换频率较低的场景。
  • 特点：不展示的DOM元素直接被移除。
  • 注意：可以组合使用，但是结构不能被“打断”。

v-show

  • 写法：v-show="表达式"

  • 适用于：切换频率较高的场景。

  • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。

  • 备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

  • 示例代码：条件渲染

列表渲染

v-for指令

  • 用于展示列表数据

  • 语法：<li v-for="(item, index) of xxx" :key="index">item</li>

  • 可遍历：

    • 常用：数组、对象
    • 不常用：字符串、指定次数。

  • 示例代码：基本列表

key的原理

  • :key="index"引发的错误，流程如下
    在这里插入图片描述

面试题：react和Vue中的key有什么作用？（key的内部原理）

  • 虚拟DOM中key的作用：
    • key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据“新数据”生成“新虚拟DOM”，随后Vue进行“新虚拟DOM”与“旧虚拟DOM”的差异比较。
  • 对比规则：
    • “旧虚拟DOM”找到了与“新虚拟DOM”相同的key：
      • 若虚拟DOM中内容没变，直接使用之前的真实DOM！
      • 若虚拟DOM变了，则生成新的真实DOM，随后替换页面中之前的真实DOM。
    • “旧虚拟DOM”中未找到与“新虚拟DOM”中相同的key：
      • 创建新的真实DOM，随后渲染到页面
  • 用index作为key可能会引发的问题：
    • 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新，界面效果没问题，但效率低。
    • 如果结构中还包含输入类的DOM：会产生错误DOM更新，界面有问题。
  • 开发中如何选择key？
    • 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一标识。
    • 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅渲染列表用于展示，使用index作为key是没有问题的。

过滤列表

列表排序

更新时的一个问题

Vue监视数据的原理

  • Vue会监视data中所有层次的数据

  • 如何监视对象中的数据：通过setter实现监视，且要在new Vue时就传入要监视的数据

    • 对象中后追加的属性，Vue默认不做响应式处理
    • 如需给后添加的属性做响应式，请使用如下API：
      • Vue.set(target, propertyName/index, value)
      • this.$set(target, propertyName/index, value)

  • 如何监视数组中的数据：通过包裹数组更新元素的方法，本质就是：

    • 调用原生对应的方法对数组进行更新。
    • 重新解析模板，进而更新页面。

  • 在Vue修改数组中的某个元素一定要用如下方法：

    • 使用这些API：push, pop, shift, unshift, splice, sort, reverse
    • Vue.set() 或 vm.$set

  • 注意：Vue.set() 或 vm.$set不能给vm或vm的根数据对象(vm._data) 添加属性

  • 代码示例：总结Vue数据监测

收集表单数据

  • 示例页面：收集表单数据
    在这里插入图片描述

  • <input type="text">，则v-model收集的是value值，用户输入的就是value值。

  • <input type="radio">，需要给标签配置value值。

  • <input type="checkbox">

    • 没有配置input的value属性，那么收集的就是checked（是否勾选，布尔值）
    • 配置input的value属性：
      • v-model的初始值是非数组，那么收集的就是cehcked（是否勾选，布尔值）
      • v-model的初始值是数组，那么收集的就是value组成的数组

  • v-model的三个修饰符：v-model.xxx="something"

    • lazy：失去焦点再收集数据
    • number：输入字符串转为有效的数字
    • trim：输入首尾空格过滤

过滤器

  • 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
  • 语法：
    • 注册过滤器：Vue.filter(name, callback) 或 new Vue(filters: {})
    • 使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性="xxx|过滤器名"
  • 备注：
    • 过滤器也可以接收额外的参数、多个过滤器可以串联
    • 并没有改变原本的数据，是产生新的对应数据

内置指令

  • v-bind：单向绑定解析表达式，简写：:xxx
  • v-model：双向数据绑定
  • v-for：遍历数组/对象/字符串
  • v-on：绑定事件监听，简写：@xxx
  • v-if：条件渲染（动态控制节点是否存在）
  • v-else：条件渲染（动态控制节点是否存在）
  • v-show：条件渲染（动态控制节点是否展示）

v-text指令

  • 作用：向其所在的节点中渲染文本内容。
  • 与插值语法区别：v-text会替换掉节点中的内容，{{xxx}}不会。

v-html指令

  • 作用：向指定节点中渲染包含html结构的内容。
  • 与插值语法的区别：
    • v-html会替换掉节点的所有内容，{{xx}}则不会。
    • v-html可以识别html结构
  • 注意：v-html有安全性问题
    • 在网站上渲染任意HTML是非常危险的，容易导致XSS攻击（冒充用户之手攻击）。
    • 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上。

v-cloak指令（没有值）

  • 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
  • 使用css配合v-cloak可以解决网速慢时，页面展示出{{xxx}}的问题。
  • 示例代码：v-cloak指令

v-once指令

  • v-once所在节点在初次动态渲染后，就视为静态内容了。
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
  • 示例代码：v-once指令

v-pre指令

  • 跳过其所在节点的编译过程
  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

  • 需求1：定义一个v-big指令，和 v-text指令类似，但会把绑定的数值放大10倍。

  • 需求2：定义一个v-fbind指令，和v-bind指令功能类似，但可以让其所绑定的input元素默认获取焦点。

  • 实现代码：自定义指令

  • 定义语法：

    • 局部指令：
    new Vue({
	directives: {
		指令名: 配置对象
		或
		指令名(element, binding){回调函数}
}  
})
    • 全局指令：Vue.directive(指令名, 配置对象) 或 Vue.directive(指令名, 回调函数)

  • 配置对象中常用的3个回调：

    • bind：指令与元素成功绑定时调用。
    • inserted：指令所在元素被插入页时调用。
    • update：指令所在模板结构被重新解析时调用。

  • 备注：

    • 指令定义时，不加v-，但使用时要写v-xxx
    • 指令名如果是多个单词，要使用kebab-case明明方式，不要用camelCase命名。

生命周期

  • 生命周期回调函数、函数、钩子：Vue在关键时刻帮我们调用的一些特殊名称的函数。
  • 生命周期函数的名字不可更改，但函数具体内容是程序员根据需求编写的。
  • 生命周期函数中的this是vm 或 组件实例对象。
  • 完整生命周期示意图：

在这里插入图片描述

  • 常用的生命周期钩子：
    • mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
    • beforeDestory：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
  • 关于销毁Vue实例：
    • 销毁后借助Vue开发者工具看不到任何信息。
    • 销毁后自定义事件会失效，但原生DOM事件依然有效。
    • 一般不会再beforeDestory操作数据，因为即便操作数据，也不会再触发更新流程了。

Vue组件化编程

为什么使用组件

  • 传统方式编写应用

    • 依赖关系混乱，不好维护。
    • 代码复用率不高。
      在这里插入图片描述

  • 使用组件方式编写应用
    在这里插入图片描述

  • 组件的嵌套
    在这里插入图片描述

  • 组件的定义：实现应用中的局部功能代码和资源的集合。

非单文件组件

  • 单文件组件：一个文件中只包含1个组件
  • 非单文件组件：一个文件中只包含n个组件（推荐）

基本使用

  • Vue中使用组件的三大步骤：

    • 定义组件/创建组件
    • 注册组件
    • 使用组件（写组件标签）

  • 如何定义一个组件？

    • 使用Vue.extend(options)创建，其中options和new Vue(options)时，传入的那个options几乎一样。
    • 区别：
      • 不要写el：最终所有组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
      • data必须写成函数：避免组件被复用时，数据存在引用关系。
    • 备注：使用template可以配置组件结构

  • 如何注册组件：

    • 局部注册：靠new Vue的时候，传入components选项
    • 全局注册：靠Vue.component('组件名', 组件)

  • 编写组件标签：<some></some>

  • 示例代码：非单文件组件的基本使用.html

几个注意点

关于组件名
  • 一个单词组成：
    • 第一种写法（首字母小写）：school
    • 第二种写法（首字母大写）：School
  • 多个单词组成：
    • 第一种写法（kebab-case命名）：my-school
    • 第二种写法（CamlCase命名）：MySchool（需要Vue脚手架支持）
  • 备注：
    • 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
    • 可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签
  • 第一种写法：
  • 第二种写法：
  • 备注：不用使用脚手架时，会导致后续组件不能渲染。
简写方式
  • const school = Vue.extend(options)
    • 可简写为：const school = options

关于VueComponent

  • school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

  • 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

  • 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

  • 关于this指向：

    • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
    • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

  • VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

    • Vue的实例对象，以后简称vm。

  • 示例代码：VueComponent.html

一个重要的内置关系

  • 一个重要的内置关系：VueComponent.prototype.proto === Vue.prototype
  • 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

在这里插入图片描述

单文件组件

安装Vue脚手架

  • Mac安装：brew install npm
  • npm配置淘宝的镜像源：npm config set registry https://registry.npm.taobao.org
  • 全局安装：npm install -g @vue/cli
  • 切换到你要创建项目的目录，然后使用命令创建vue_test项目：vue create vue_test
  • 进入vue_test目录，运行脚手架：npm run serve

Vue脚手架

脚手架文件结构

├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

render函数

  • vue.js与vue.runtime.xxx.js的区别：

    • vue.js是完整版的Vue，包含：核心功能+模板解析器。
    • vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

  • 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

  • 示例代码：vue_test/src/main.js

import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false

//创建Vue实例对象---vm
new Vue({
	el:'#app',
	//render函数完成了这个功能：将App组件放入容器中
  	render: h => h(App),
  	// 以下用法报错
	// template:`<h1>你好啊</h1>`,
	// components:{App},
})

vue.config.js配置文件

  • 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
  • 使用vue.config.js可以对脚手架进行个性化定制，详情见：官方config配置指南

ref属性

  • 被用来给元素或子组件注册引用信息（id的替代者）

  • 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

  • 使用方式：

    1. 打标识：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
    2. 获取：this.$refs.xxx

  • 示例代码：02_src_ref属性/App.vue

props配置项

  • 功能：让组件接收外部传过来的数据
  • 传递数据：<Demo name="xxx"/>
  • 接收数据：
    • 第一种方式（只接收）：props:['name']
    • 第二种方式（限制类型）：props:{name:String}
    • 第三种方式（限制类型、限制必要性、指定默认值）：
        props:{
    	name:{
    	type:String, //类型
    	required:true, //必要性
    	default:'老王' //默认值
    	}
    }

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin（混入/混合）

  • 功能：可以把多个组件共用的配置提取成一个混入对象

  • 使用方式：

    • 第一步定义混合：
    {
    data(){....},
    methods:{....}
    ....
}
    • 第二步使用混入：
      • 全局混入：Vue.mixin(xxx)
      • 局部混入：mixins:['xxx']

  • 示例代码：04_src_mixin混入

插件

  • 功能：用于增强Vue
  • 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
  • 定义插件：
对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}
  1. 使用插件：Vue.use()

scoped样式

  1. 作用：让样式在局部生效，防止冲突。
  2. 写法：<style scoped>

总结TodoList案例（组件化）

组件化编码流程

  • 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
  • 实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
    1. 一个组件在用：放在组件自身即可。
    2. 一些组件在用：放在他们共同的父组件上（状态提升）。
    3. 实现交互：从绑定事件开始。

props适用于

  • 父组件 ==> 子组件 通信
  • 子组件 ==> 父组件 通信（要求父先给子一个函数）
  • 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
  • props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

  • 示例代码：08_浏览器本地存储
  • 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
  • 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
  • 相关API：
    • xxxxxStorage.setItem('key', 'value');：该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
    • xxxxxStorage.getItem('person');：该方法接受一个键名作为参数，返回键名对应的值。
    • xxxxxStorage.removeItem('key');：该方法接受一个键名作为参数，并把该键名从存储中删除。
    • xxxxxStorage.clear()：该方法会清空存储中的所有数据。
  • 备注：
    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

组件的自定义事件

  • 示例代码：组件自定义事件

  • 一种组件间通信的方式，适用于：子组件 ===> 父组件

  • 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  • 绑定自定义事件：

    1. 第一种方式，在父组件中：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>
    2. 第二种方式，在父组件中：
      <Demo ref="demo"/>
  ......
  mounted(){
     this.$refs.xxx.$on('atguigu',this.test)
  }
    1. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  • 触发自定义事件：this.$emit('atguigu',数据)

  • 解绑自定义事件this.$off('atguigu')

  • 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  • 注意：通过this.$refs.xxx.$on('atguigu', 回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线（GlobalEventBus）

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
	   ......
})
  • 使用事件总线：
    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
  1. 提供数据：this.$bus.$emit('xxxx',数据)
  • 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布（pubsub）

  • 示例代码：14_src_消息订阅与发布

  • todolist使用消息订阅与发布：15_src_TodoList_pubsub

  • 一种组件间通信的方式，适用于任意组件间通信。

  • 使用步骤：

    • 安装pubsub：npm i pubsub-js
    • 引入: import pubsub from 'pubsub-js'
    • 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
    methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
    • 提供数据：pubsub.publish('xxx',数据)
    • 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

nextTick

  1. 语法：this.$nextTick(回调函数)
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

Vue封装的过度与动画

  • 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
  • 图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />

用法

一. 先写好动画样式
元素进入的样式
  1. v-enter：进入的起点
  2. v-enter-active：进入过程中
  3. v-enter-to：进入的终点
元素离开的样式：
  1. v-leave：离开的起点
  2. v-leave-active：离开过程中
  3. v-leave-to：离开的终点
二. <transition>标签
  • 使用<transition>包裹要过度的元素，并配置name属性：
<transition name="hello">
	<h1 v-show="isShow">你好啊！</h1>
</transition>
  • 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

vue脚手架配置代理

方法一

  • 在vue.config.js中添加如下配置：
devServer:{
  proxy:"http://localhost:5000"
}
  • 说明：
    1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
    2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
    3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

方法二

  • 编写vue.config.js配置具体代理规则：
module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/
  • 说明：
    1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
    2. 缺点：配置略微繁琐，请求资源时必须加前缀。

插槽

  • 示例代码：插槽
  • 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。
  • 分类：默认插槽、具名插槽、作用域插槽

默认插槽

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽

  1. 难点：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
  2. 具体编码：
父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

Vuex

基础概念

  • 概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

  • 何时使用：多个组件需要共享数据时

  • 多组件共享数据(读/写)

    • 全局事件总线的实现
      在这里插入图片描述
    • vuex的实现
      在这里插入图片描述

  • 案例：23_src_求和案例_纯vue版

  • vuex工作原理图
    在这里插入图片描述

搭建vuex环境

  • 创建文件：src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})
  1. 在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

基本使用

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}
const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}
//初始化数据
const state = {
   sum:0
}
//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})
  • 组件中读取vuex中的数据：$store.state.sum
  • 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

getters的使用

  • 示例代码：25_src_求和案例_getters
  • 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
  • 在store.js中追加getters配置
......
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}
//创建并暴露store
export default new Vuex.Store({
	......
	getters
})
  • 组件中读取数据：$store.getters.bigSum

四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},
  1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},
  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

模块化+命名空间

const countAbout = {
  namespaced:true,//开启命名空间
  state:{x:1},
  mutations: { ... },
  actions: { ... },
  getters: {
    bigSum(state){
       return state.sum * 10
    }
  }
}
const personAbout = {
  namespaced:true,//开启命名空间
  state:{ ... },
  mutations: { ... },
  actions: { ... }
}
const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})
  • 开启命名空间后，组件中读取state数据：
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
  • 开启命名空间后，组件中读取getters数据：
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
  • 开启命名空间后，组件中调用dispatch
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  • 开启命名空间后，组件中调用commit
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

路由

  1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
  2. 前端路由：key是路径，value是组件。

基本使用

  1. 安装vue-router，命令：npm i vue-router@3，为了搭配Vue2使用。
  2. 应用插件：Vue.use(VueRouter)
  3. 编写router配置项:
//引入VueRouter
import VueRouter from 'vue-router'
//引入Luyou 组件
import About from '../components/About'
import Home from '../components/Home'

//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})

//暴露router
export default router
  1. 实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
  1. 指定展示位置
<router-view></router-view>

几个注意点

  1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
  2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
  4. 整个应用只有一个router，可以通过组件的$route属性获取到。

多级路由（多级路由）

  1. 配置路由规则，使用children配置项：
routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]
  1. 跳转（要写完整路径）：
<router-link to="/home/news">News</router-link>

路由的query参数

  1. 传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>
  1. 接收参数：
$route.query.id
$route.query.title

命名路由

如何使用

  1. 给路由命名：
{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                      name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
  1. 简化跳转：
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

路由的params参数

  1. 配置路由，声明接收params参数
{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数
					component:Detail
				}
			]
		}
	]
}
  1. 传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

  1. 接收参数：
$route.params.id
$route.params.title

路由的props配置

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
}

<router-link>的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式：<router-link replace .......>News</router-link>

编程式路由导航

  1. 作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活
  2. 具体编码：
//$router的两个API
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})

this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退

缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁。
  2. 具体编码：
    • 注意：include中放入 组件名！！！
<keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

两个新的生命周期钩子

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
  2. 具体名字：
    1. activated路由组件被激活时触发。
    2. deactivated路由组件失活时触发。

路由守卫

  1. 作用：对路由进行权限控制
  2. 分类：全局守卫、独享守卫、组件内守卫

全局守卫

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})

独享守卫

beforeEnter(to,from,next){
	console.log('beforeEnter',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){
			next()
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next()
	}
}

组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
}

路由器的两种工作模式

  1. 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
  2. hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
  3. hash模式：
    1. 地址中永远带着#号，不美观 。
    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    3. 兼容性较好。
  4. history模式：
    1. 地址干净，美观 。
    2. 兼容性和hash模式相比略差。
    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
      • 解决方案之一：nodejs+express使用nodejs-history-api-fallback中间件

上线部署代码

实战项目：模仿后台实现几个页面

  • 后台项目：VueAdmin
  • 技术栈：Vue2, elementUI, ajax

页面内容&功能

  • SPA（单页面项目）

数据查询-汇总数据（MyData组件）

  • post搜索接口 (DONE)
  • 组件间通讯：Search组件获取的结果 更新到List组件 (DONE)
  • 分页&翻页 (DONE)
  • 下角标的翻页 (DONE)
  • 列升序，降序，排序函数 # TODO
  • 页面内容的模糊搜索：elementUI table 实现前端全局搜索 # TODO
  • 每行的点击确认按钮 (DONE)
  • ajax post有问题，尝试nodejs实现服务端GET响应Json # TODO
    在这里插入图片描述

视频审核-待审核（VideoReview组件）

  • 整体效果展示 (DONE)
  • 貌似无法使用el-table实现，通过v-for实现 (DONE)
  • 子页面的切换 (DONE)
  • 通过路由整合不同页面和功能展示 (DONE)
  • 弹出式视频播放 (DONE)
  • 资源的根目录 & 本地资源展示：require(‘@/assests/xxx') (DONE)
    在这里插入图片描述
    在这里插入图片描述

部署

第三方库

常用的第三方库

  • moment.js：处理日期及格式
  • dayjs：轻量化的monent.js

常用UI库

PC

  • ElementUI：Element
  • AntDesign？
  • echart：图标展示

移动端

  • Vint？
  • Vant

TODO: Vue3部分

jaylixueji_csdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于《狂神说Java》Vue--学习笔记
wudidahuanggua的博客
06-18 1269
本笔记仅做学习与复习使用，不存在刻意抄袭。给各位学友强烈推荐《遇见狂神说》他的整套Java学习路线使我获益匪浅！！!点击跳转至遇见狂神说哔哩哔哩首页如果你也是狂神的小迷弟，可以加我好友一起探讨学习。...
【2022.4.20修改】Vue_day02_模板语法_指令_表单数据绑定_DevTools使用
pre_eminent的JAVA学习园地
04-22 377
Vue.js 四天课程学习笔记_第2天课程内容概要:1. 介绍Vue中模板语法及数据绑定 主要是概述了el、data、 methods语法的作用及注意事项2. 介绍Vue指令 主要是v-html、v-once、v-if(渲染与否)、v-show(显示与否)、v-for(循环)、v-on(绑定事件,简写是@)、v-bind(单向绑定,简写是:)、v-model(双向绑定)3. 介绍表...
vue3学习笔记
webtly的博客
07-15 981
vue3笔记记录
vue学习笔记——1{搭建脚手架}
zhouchao1964的博客
07-05 243
新手入门
【学习笔记】2023年3月 Vue.js 专题篇章之刻苦奋斗
xmfboss.科技
03-01 246
主要针对Vue进行全面的学习，把基础学扎实，全面吃透前端技术
最新全网精华分享（2022.06~~至今）计算机校招编程类
博客
03-11 998
阿秀的学习圈」每周精华分享第二十一期（2022.11.21-2022.11.27）https://articles.zsxq.com/id_ajd18whgk926.html。「阿秀的学习圈」每周精华分享第二十二期（2022.11.27-2022.12.04）https://articles.zsxq.com/id_w6b9w1u9amw4.html。
约2万字-Vue源码解读汇总篇(续更)
布知什么
02-21 1460
未完待续...Vue源码解读：06Vue3探索篇Vue源码解读：05生命周期篇Vue源码解读：04模板编译篇Vue源码解读：03虚拟Dom篇Vue源码解读：02变化侦测篇Vue源码解读：01核心思想篇Vue源码解读：前言篇从写下的代码，到用户见到界面，大致经历以下几个流程：模板字符串=》ast树=》render函数=》vnode=》用户见到的界面。将开发者写下的模板字符串，经过一些列处理，生成render函数的这一过程就是模板编译。简单地说，模板编译解析就是为了得到render函数。
Node.js学习笔记
抗争小青年的博客
06-09 3821
在这一个月的学习中，又对文章进行了一次修改。在这段时间里我把一些没有意义的内容删除，又添加了我之间没有学习到的知识点，并尽量把说明放在前，案例放在后，方便大家一起学习。篇幅较长，建议大家收藏后分块阅读。...
Vue学习笔记
摸鱼博客
01-01 1215
vue的学习有一阵子了，打算在这新的一年花一点时间去沉淀一下。 Vue的介绍 Vue主要采用了MVVM的设计模式，是原来的MVC设计模式的一个升级。以前传统的MVC,是将后端数据手动渲染到前端页面,将业务逻辑和前端渲染彻底分开。 MVVM本质上就是MVC 的改进版，指的是(Model,View,ViewModel),三者相互协调。 MVVM的工作原理 当数据源发生变化的时候，ViewMode就会监听到，负责自动渲染到视图层。 当表单数据发生变化时，也会被监听到，并且自动同步到Model的数据源之中。 .
Vue Pivottable-基于jQuery的PivotTable.js的Vue端口-Vue.js开发
05-27
cd vue-pivottable / demo / example-vue-cli3 / $ npm install $ npm run serve安装npm i vue-pivottable全局组件用法main.js从“ vue”导入Vue从“ vue-pivottable”导入VuePivottable导入“ vue-pivottable / ...
Vue.D3.tree D3.jsVue.D3.tree-基于D3.js的树视图-Vue.js开发
05-27
Vue.D3.tree Vue组件可基于D3.js布局显示图形。 Tree Live演示https://david-desmaisons.github.io/Vue.D3.tree/tree用法 从'vued3tree'导入{tree}导出默认{组件：{树}，data（）{返回{树：{名称：“父亲”，子代：...
vue-knob-control-Vue.js的旋钮控件-Vue.js开发
05-27
vue-knob-control Vue.js的旋钮控件Install npm install vue-knob-control -S用法从'vue'导入Vue从'vue-kno vue-knob-control导入KnobControl Vue.js的旋钮控件安装npm install vue-knob-control -S用法从'vue'导入...
vue-infinite-list-无限列表mixin可以为Vue.js 2回收dom-Vue.js开发
05-27
基于vue2的vue-infinite-list无限列表。 安装npm i vue-infinite-list演示npm run start基本使用导入并基于vue2注册无限li vue-infinite-list无限列表。 安装npm i vue-infinite-list演示npm run start基本使用导入...
-vue.js学习笔记
01-10
在Vue.js的学习过程中，了解JavaScript的基础知识是至关重要的，因为Vue.js是基于JavaScript构建的。以下是一些关于Vue.js和JavaScript核心概念的详细说明： 1. **日期对象**： 在JavaScript中，我们可以使用`Date...
超市管理系统，基于javaweb.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
vue3面试题2023,84页，几十道vue面试题，准备vue的面试，这么一份文件就够了
08-15
vue3面试题2023： Vue 的优缺点  优点 1.创建单页面应用的轻量级Web应用框架 2.简单易用 3.双向数据绑定 4.组件化的思想 5.虚拟DOM 6.数据驱动视图 缺点 不支持IE8
【雷达跟踪】基于matlab雷达目标生成与跟踪【含Matlab源码 7220期】.zip
08-15
CSDN海神之光上传的代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 功率谱估计： 故障诊断分析： 雷达通信：雷达LFM、MIMO、成像、定位、干扰、检测、信号分析、脉冲压缩 滤波估计：SOC估计 目标定位：WSN定位、滤波跟踪、目标定位 生物电信号：肌电信号EMG、脑电信号EEG、心电信号ECG 通信系统：DOA估计、编码译码、变分模态分解、管道泄漏、滤波器、数字信号处理+传输+分析+去噪（CEEMDAN）、数字信号调制、误码率、信号估计、DTMF、信号检测识别融合、LEACH协议、信号检测、水声通信
CTR2024中国广告主营销趋势调查报告.pdf
最新发布
08-15
【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2024中国广告主营销趋势调查报告.pdf【CTR】2
ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 2:0-38 Module not found: Error: Can't resolve 'ant-design-vue' in 'Z:\shhfw\src' @ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8 @ ./src/main.js 2:0-28 15:17-20
06-12
这个错误提示显示无法找到 'ant-design-vue' 模块，可能是因为你没有安装这个依赖项或者安装的版本与你的代码不兼容。 你可以尝试执行以下命令来安装 'ant-design-vue': ``` npm install ant-design-vue --save ``` 如果已经安装了 'ant-design-vue'，则需要检查以下几个方面： - 确认你的安装是否成功，是否能在 package.json 中看到 'ant-design-vue' 的依赖项 - 确认你是否正确引入了 'ant-design-vue'，比如在 App.vue 中使用了 import 引入组件库 - 确认你的引入语句是否正确，比如是否使用了以下语句引入了所有组件： ``` import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd); ``` 如果以上都检查无误，可以尝试重新安装 'ant-design-vue' 或者更新版本来解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值