[Study]Vue

Posted 2022-10-31 Spring-_-Bear

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[Study]Vue相关的知识，希望对你有一定的参考价值。

文章目录

一、基础语法
二、组件化
三、脚手架
四、vuex 插件
五、vue-router 插件
六、Vue3

一、基础语法

1.1 概述

Vue：一套用于构建用户界面的渐进式 javascript 框架。何为渐进式？是指 Vue 可以自底向上逐层地应用，也即按需引入 Vue 的各种组件
Vue 的发展历程：2013（0.6.0）、2014（0.8.0）、2015（1.0.0）、2016（2.0.0）、2020（3.0.0）
Vue 的特点：
- 采用组件化模式，提高代码复用率，易于维护
- 声明式编码，无需直接操作 DOM，提高开发效率
- 使用虚拟 DOM + 优秀的 Diff 算法，尽量复用 DOM 节点

1.2 入门案例

容器与 Vue 实例的关系：容器与 Vue 实例是一对一的关系，真实开发环境中只有一个 Vue 实例，并且会配合着组件一起使用
插值语法：用于解析标签体内容，xxx 插值语法中 xxx 要写 js 表达式，且 xxx 可以自动读取到 data 中的所有属性，一旦 data 中的数据发生改变，那么页面中用到该数据的地方都会自动解析并更新
指令语法：用于解析标签属性，如 v-bind 等
数据绑定：
- 单向数据绑定（v-bind）：v-bind: 可简写为 :
- 双向数据绑定（v-model）：只能用于表单类元素，v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是表单元素的 value 值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Vue 入门案例</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- 插值语法 -->
    <h1>Hello,  name.toUpperCase() </h1>
    <!-- 指令语法 -->
    <a v-bind:href="url">百度一下</a><hr/>

    <!-- 数据绑定 -->
    单向数据绑定（data -> 页面）：<input type="text" v-bind:value="name"/><br/>
    双向数据绑定（data <-> 页面）：<input type="text" v-model:value="name">
</div>

<script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示
    Vue.config.productionTip = false

    new Vue(
        // el 即 element 指明当前 vue 实例为哪个容器服务
        el: '#root',
        // data 用于存储数据，供 el 指定的容器使用
        data: 
            name: 'Spring-_-Bear',
            url: 'https://baidu.com'
        
    )
</script>
</body>
</html>

1.3 el 与 data

el 的两种写法：

// el 的第一种写法
new Vue(
    el: '#root'
)

// el 的第二种写法
const vm = new Vue()
vm.$mount('#root')

data 的两种写法：

对象式：
```
data: 
    name: 'Spring-_-Bear'
```

函数式：由 Vue 管理的函数不能写为箭头函数，否则 this 指向存在问题

// 函数式完整写法
data: function () 
    return 
        name: 'Spring-_-Bear'
    

// 函数式简写写法
data() 
    return 
        name: 'Spring-_-Bear'

1.4 MVVM

MVVM：
- M(Model)：模型，对应 data 数据
- V(View)：视图，对应模板代码
- VM(ViewModel)：视图模型，对应 Vue 实例对象

vm：data 中所有的属性最终都出现在了视图模型 vm 身上，vm 身上所有的属性以及 Vue 原型上的所有属性在模板中都可以直接使用

<div id="root">
    <h1> name </h1>
    <!-- vm 的 _data 属性，对应数据 data -->
    <h1> _data </h1>
    <!-- Vue 的原型属性 $delete -->
    <h1> $delete </h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue(
        el: '#root',
        data: 
            name: 'Spring-_-Bear'
        
    )
    console.log(vm)
</script>

1.5 数据代理

Object.defineProperty 即为实现数据代理的基本原理：

<script type="text/javascript">
    let number = 18;
    let person = 
        name: 'Spring-_-Bear',
        sex: '男'
    

    Object.defineProperty(person, 'age', 
        // value: 18,          // 设置 person 对象的 age 属性值为 18
        // enumerable: true,   // 控制属性是否可以被遍历，默认 false
        // writable: true,     // 控制属性是否可以被修改，默认 false
        // configurable: true, // 控制属性是否可以被删除，默认 false

        // 当读取 person.age 时，get 函数自动调用，且返回值就是 person.age 的值
        get: function () 
            return number;
        ,
        // 当修改 person.age 时，set 函数自动调用，且会收到具体修改的值
        set(val) 
            number = val;
        
    )
</script>

数据代理：通过一个对象代理对另一个对象的属性操作

<script type="text/javascript">
    let obj1 = age: 18;
    let obj2 = ;
    // obj2 代理 obj1 的属性操作
    Object.defineProperty(obj2, 'age', 
        get() 
            return obj1.age;
        ,
        set(val) 
            obj1.age = val;
        
    )
</script>

Vue 数据代理的基本原理：通过 vm 对象来代理 data 对象中属性的操作，如此可以更加方便地操作 data 中的数据
- 复制 data：将 data 对象中的属性复制到 vm._data 对象中
- _data 到 vm：通过 Object.defineProperty() 把 vm._data 对象中所有属性添加到 vm 上
- getter/setter：为每一个添加到 vm 上的属性都指定一个 getter/setter，在 getter/setter 方法内部操作 data 对应的属性

1.6 事件处理

事件绑定：使用 v-on: 或 @ 简写形式绑定对应的事件：

<div id="root">
    <!-- v-on:click：不传递参数 -->
    <button v-on:click="clickMe">点我呀（不传参）</button>
    <!-- @click：传递参数 -->
    <button @click="sayHello($event, 'Hello World')">说你好（传递参数）</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue(
        el: '#root',
        /*
         * 受 Vue 管理的函数不要写成箭头函数，否则 this 对象为 Window 而非 vm
         */
        methods: 
            clickMe(event) 
                // 事件对象即 button 按钮元素
                console.log(event.target.innerText)
            ,
            sayHello(event, content) 
                // this -> vm
                console.log(this)
                alert(content)
            
        
    )
</script>

事件修饰符：

prevent：阻止事件的默认行为

<a @click.prevent="sayHello" href="https://baidu.com">走，百度两下</a>

stop：阻止事件冒泡

<div @click="sayHello">
    <!-- 先阻止事件冒泡，后阻止事件默认行为 -->
    <button @click.stop.prevent="sayHello">点我呀</button>
</div>

once：事件只触发一次

<button @click.once="sayHello">点击只生效一次哦</button>

capture：使用事件的捕获行为

<div @click.capture="sayHello('div1')" style="width: 100px; height: 100px; background: red">
    div1
    <!-- 点击 div2 时总是先输出 div1 再输出 div2 -->
    <div @click="sayHello('div2')" style="width: 50px; height: 50px; background: skyblue">
        div2
    </div>
</div>

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

<div @click.self="sayHello" style="height: 500px; width: 500px; background: red">
    <!-- 点击 button 时 div 的 click 事件不会响应 -->
    <button @click="sayHello">点我呀</button>
</div>

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

<div id="root">
    <!-- 滚动条滑动事件 -->
    <ul @scroll="msg" style="height: 200px; width: 200px; background: red; overflow: auto">
        <li style="height: 100px">1</li>
        <li style="height: 100px">2</li>
        <li style="height: 100px">3</li>
        <li style="height: 100px">4</li>
        <li style="height: 100px">5</li>
    </ul>
    <!-- 鼠标滚轮滚动事件，加上 passive 事件修饰符后立即滑动滑动条，无需等待 msg 回调执行完成 -->
    <ul @wheel.passive="msg" style="height: 200px; width: 200px; background: red; overflow: auto">
        <li style="height: 100px">1</li>
        <li style="height: 100px">2</li>
        <li style="height: 100px">3</li>
        <li style="height: 100px">4</li>
        <li style="height: 100px">5</li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue(
        el: '#root',
        methods: 
            msg() 
                for (let i = 0; i < 100000; i++) 
                    console.log('bear')
                
            
        
    )
</script>

键盘事件：

Vue 中提供的按键别名，可直接用于绑定按键事件：enter、delete、esc、space、tab、up、down、left、right

<div id="root">
    enter：<input type="text" @keyup.enter="show"/><br/>
    <!-- Tab 键的功能是从当前元素失焦，较为特殊，需绑定 @keydown 按下事件 -->
    tab：<input type="text" @keydown.tab="show" placeholder="绑定 @keydown 事件">
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue(
        el: '#root',
        methods: 
            show(e) 
                console.log(e.key, e.keyCode)
            
        
    )
</script>

Vue 未提供别名的按键，可以使用按键原始名称绑定，但多英文时注意要转为英文小写加短横线连接方式如 caps-lock
```
大小写切换提示：<input type="text" @keyup.caps-lock="show"/>
```
系统修饰键用法特殊：ctrl、alt、shift、meta（即 win 键）
- 配置 @keydown 使用时：正常触发事件
- 配合 @keyup 使用时：按下修饰键的同时按下其它键，释放其它键时事件才被触发
```
Ctrl + Y 释放 Y 时触发事件：<input type="text" @keyup.ctrl="show">
```

1.7 计算属性

姓名案例使用函数方式实现：

<div id="root">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span> fullName() </span>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue(
        el: '#root',
        data: 
            firstName: '张',
            lastName: '三'
        ,
        Vue Study [1]: Vue Setup
 [Study]Vue
 [Study]Vue
 vue配置路由以及设置路径简写
 ES6 简写：
 vue属性绑定和属性简写