Vue3.x基础

最新推荐文章于 2024-08-30 16:49:27 发布

渡城WEDU

最新推荐文章于 2024-08-30 16:49:27 发布

阅读量523

点赞数

分类专栏： Vue 文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/ducheng_/article/details/126145563

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片是之前写md的时候直接截图的，懒得再截一次上传，自己试试比较好。

Vue3.x基础

Vue是一种MVVM模式（Model-View-ViewModel）的前端框架，**Model（模型）**可以理解为数据，**View（视图）**可以理解为HTML页面，ViewModel（视图模型）即业务逻辑（或类似于方法），Vue就是用MVVM实现的数据双向绑定，即Model层与View层均与ViewModel层互相关联，而Model层与View层没有直接联系，是一种低耦合、可重用、易测试的模式。

Vue3.x官方文档：https://v3.cn.vuejs.org/

推荐使用Live Server插件进行Vue单页应用的编写。

创建一个Vue应用

首先确保使用CDN引入了Vue（在单页应用中）

<script src="https://unpkg.com/vue@next"></script>

也有其他使用构建工具快速创建的方法，如使用vue-cli、vite、nuxt.js等，后续再议。

Vue需要一个根节点来告诉Vue在哪挂载与渲染，即需要一个最外层包裹的div。

<body>
    <div id="app">
    </div>
</body>

然后我们需要一个Script标签，在里面进行Vue应用的创建。

<script>
    const app = {
        data() {
            return {
                str: "Hello World",
            }
        }
    }

    Vue.createApp(app).mount("#app");
</script>

其中createApp是Vue中自带的一个创建应用的方法，需要我们告诉Vue这个app是如何定义的，后续操作都在这个常量（变量）中进行，mount则定义Vue应用挂载与渲染到哪一个节点，里面的参数就是根节点的id。

注：const app与let app都可以使用。

我在script标签中定义了一个常量app，在这个常量中定义了需要返回的数据，也就是告诉了Vue我需要把html中的str变量渲染成Hello World。app这个常量的内容是json格式的，不要忘记元素之间的逗号。

然后我们在根节点中使用这个变量，语法是mustache（两个大花括号），与微信小程序类似。

<body>
    <div id="app">
        {{str}}
    </div>
</body>

现在网页的整体是这样的：

<!DOCTYPE html>
<html lang="zh-CN">

<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">
    <!-- CDN引入Vue3.x -->
    <script src="https://unpkg.com/vue@next"></script>
    <title>第一个Vue应用</title>
</head>

<body>
    <div id="app">
        {{str}}
    </div>
</body>

<script>
    const app = {
        data() {
            return {
                str: "Hello World",
            }
        }
    }

    Vue.createApp(app).mount("#app");
</script>

</html>

注：如果没有成功，可能是CDN加载失败，可以使用下载Vue源码后导入的方法。

至此，第一个Vue应用已经创建完成（仅适用于单页应用）。

Vue的生命周期

https://v3.cn.vuejs.org/images/lifecycle.svg

官方文档里面的图，大致解释一下：

createApp、app.mount

开始创建一个Vue实例对象。

创建时生命周期（单次）

beforeCreate（创建前）

这个时候对象中只有一些生命周期函数和默认事件，data、methods等方法中的数据都还没有初始化。

created（创建后）

这个时候，data、methods等方法中的内容都已经初始化好了，已经可以操作了。这里往往用来进行ajax请求（即向后端发送请求读取数据）。

created之后、beforeMount之前

Vue开始编辑模板，判断html内容中有没有模板<template>标签（还在渲染阶段），如果有，把template中的内容进行编译渲染，如果没有，把el根节点中的内容进行编译渲染，如果还没有，就啥也不渲染。此时，Vue在执行createApp中的数据和方法，并将所有内容编译成为一个模板字符串，最后再渲染到内存中，但此时还没有将内容挂载到根节点中。

beforeMount（挂载前）

已经将模板字符串渲染好了，但是还没有挂载到页面中。

mounted（挂载后）

将模板字符串挂载到页面中，此时一般进行一些早期DOM操作。

运行时生命周期（多次调用）

beforeUpdate（数据更新前）

data中的数据是新的，但是页面中的数据还没有同步。

updated（更新后）

页面和data的数据已经同步了。

销毁时生命周期（单次）

beforeDestroy（销毁前）

此时所有的data、methods等方法中的数据都还可以使用，往往进行接口的关闭操作等。

destroyed（销毁后）

此时整个页面已经完全被销毁，所有内容均不可用。

Vue的mustache模板语法

前面提到Vue的mustache模板语法与微信小程序类似，但Vue中的模板语法完全支持JavaScript表达式，如字符串分割.split()，字符串、数组反转.reverse()，数组切割.slice()、.splice()，三元表达式、运算符等。

一般使用

<span>String: {{ str }}</span>

v-once的使用

v-once会使当前元素内的模板变成一次性的，data更新不影响当前元素，但是要注意其他元素。

<input type="text" v-model="str" /><br/>
<span v-once>v-once String: {{ str }}</span><br/>
<span>String: {{ str }}</span>

这里用到了v-model双向绑定。

v-html的使用

v-html会将data中的html编译成为html样式。

<span>raw: {{ str }}</span><br/>
html: <span v-html="str"></span>

const app = {
    data() {
        return {
            str: "<b>Hello World</b>",
        }
    }
}

v-bind的使用

v-bind会将数据绑定到当前元素，常用于动态类名（class）绑定等。

v-bind的语法糖（缩写）是一个英文冒号==:，**:class=v-bind:class**。

<span v-bind:class="classRed">{{ str }}</span><br />
<span :class="classBlue">{{ str }}</span><br />
<span :class="classOrange">{{ str }}</span>

const app = {
    data() {
        return {
            str: "Hello World",
            classRed: "red",
            classBlue: "blue",
            classOrange: "orange",
        }
    }
}

.red {
    color: red;
}

.blue {
    background-color: blue;
}

.orange {
    box-shadow: 5px 5px 1px 2px orange;
}

v-on的使用

主要用法

v-on用于监听DOM事件，如click、keyup、keydown等。

v-on的语法糖（缩写）是==@==，@click=v-on:click

<button @click="hidden=!hidden">点我{{ hidden?'显示':'隐藏' }}span</button><br/>
<span :class="hidden?'hidden':''">{{ str }}</span>

const app = {
    data() {
        return {
            str: "Hello World",
            hidden: true,
        }
    }
}

.hidden {
    display: none;
}

事件修饰符

为了更方便地实现一些逻辑，Vue提供了一些修饰符供我们使用，使用方法为==@click.xxx==，具体内容参考文档：

https://v3.cn.vuejs.org/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

按键修饰符、系统修饰键

同理，Vue提供了监听键盘按键的修饰符，使用方法同上，具体内容参考文档：

https://v3.cn.vuejs.org/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

https://v3.cn.vuejs.org/guide/events.html#%E7%B3%BB%E7%BB%9F%E4%BF%AE%E9%A5%B0%E9%94%AE

v-show的使用

控制元素的显示与否，v-show=“true”则显示，v-show=“false”则隐藏，只是给元素添加了一个css样式display: none;。

<button @click="hidden=!hidden">点我{{ hidden?'显示':'隐藏' }}span</button><br/>
<span v-show="!hidden">{{ str }}</span>

const app = {
    data() {
        return {
            str: "Hello World",
            hidden: true,
        }
    }
}

.hidden {
    display: none;
}

v-if的使用

v-if（条件渲染）可以控制多个元素的显示与否，与v-show不同，v-if是动态渲染，并不是简单地给元素添加样式display: none;。

<button @click="hidden=!hidden">{{ !hidden }}</button><br/>
<span v-if="!hidden">v-if=true</span>
<span v-else>v-if=false</span>

const app = {
    data() {
        return {
            hidden: true,
        }
    }
}

v-for的使用

v-for（列表渲染）即循环渲染多个数据结构类似的元素，通常需要与==:key==配合给元素绑定一个key。

<ul>
    <li v-for="(item, index) in list" :key="index">
        {{ index }}:{{ item }}
    </li>
</ul>

const app = {
    data() {
        return {
            list: ["111","222","333"]
        }
    }
}

v-model的使用

v-model（双向绑定）将元素与数据动态双向绑定，同步变化。

<input type="text" v-model="str" /><br/>
str: {{ str }}

const app = {
    data() {
        return {
            str: "",
        }
    }
}

Vue的data property与方法

data property

const app = {
    data() {
        return {
            msg: "Hello World",
        }
    }
}

以上即data property的使用方法。data在Vue中体现为一个函数，在渲染时被返回为一个对象，以$data形式存储在实例中，在JavaScript中使用方法为this.$data（$data可以忽略）。由于只在创建时生命周期被添加到节点中，因此所有在模板中所用到的数据都需要在data中声明。

methods

所有在模板中需要被调用的方法都需要在methods中声明。

<button @click="clickHandler">点我+1</button>
num: {{ num }}

const app = {
    data() {
        return {
            num: 0,
        }
    },
    methods: {
        clickHandler() {
            this.$data.num++;
        }
    }
}

computed计算属性

计算属性常用于响应式数据的复杂逻辑，与methods不同，methods需要触发方式，而computed是完全响应式的，无需触发。

<button @click="addItem">添加一项</button>
<ul>
    <li v-for="(item, index) in list" :key="index">
        {{ index }}-{{ item }}
    </li>
</ul>
{{ itemLength }}

const app = {
    data() {
        return {
            list: ["111", "2222", "33333"],
        }
    },
    methods: {
        addItem() {
            this.$data.list.push("addItem");
        }
    },
    computed: {
        itemLength() {
            return this.$data.list.length;
        }
    }
}

计算属性也提供了getter和setter，详见https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter/

侦听器

看官方文档吧，想不到合适的例子了。

https://v3.cn.vuejs.org/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

methods: {
    addItem() {
        this.$data.list.push("addItem");
    }
},
    computed: {
        itemLength() {
            return this.$data.list.length;
        }
	}
}

计算属性也提供了getter和setter，详见https://v3.cn.vuejs.org/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter/

单页应用只能讲这么多，后续使用vue-cli创建项目时还有更多内容可以讲。