Vue3基础语法（⼀）

最新推荐文章于 2024-07-12 10:51:43 发布
最新推荐文章于 2024-07-12 10:51:43 发布
阅读量674 收藏 1
点赞数 1
分类专栏： Vue3+ts 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45732235/article/details/128337081
版权
本文详细介绍了Vue3中的基础语法，包括模板语法如Mustache表达式、v-once指令、v-text和v-html的使用，以及v-bind的多种绑定方式。同时，讲解了如何绑定class和style，以及事件处理v-on的基本用法和参数传递，还涉及动态绑定属性和对象。文章通过实例代码展示了这些概念在实际应用中的操作。
摘要由CSDN通过智能技术生成

文章目录

02——Vue3基础语法（⼀）

上一节中的问题：
在这里插入图片描述

答案：
在这里插入图片描述
前端面试之彻底搞懂this指向

在这里插入图片描述

VSCode代码片段

在这里插入图片描述

在这里插入图片描述
https://snippet-generator.app

在这里插入图片描述
在这里插入图片描述

模板语法

在这里插入图片描述

Mustache

<body>
    <div id="app"></div>
    <template id="my-app">
        <!-- mustache的基本使用 -->
        <h2>{{message}}</h2>
        <!-- 是一个表达式 -->
        <h2>{{counter * 100}}</h2>
        <h2>{{message.split(" ").reverse().join(" ")}}</h2>
        <!-- 也可以调用函数 -->
        <h2>{{getReverseMessage()}}</h2>
        <!-- 三元运算符 -->
        <h2>{{ isShow ? "阿司匹林" : ""}}</h2>
        <button @click="toggle">切换</button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    message: "hello world",
                    counter: 10,
                    isShow: true
                }
            },
            methods: {
                getReverseMessage() {
                    return this.message.split(" ").reverse().join(" ")
                },
                toggle() {
                    this.isShow = !this.isShow
                }
            },
        }

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

v-once指令

在这里插入图片描述

<body>
    <div id="app"></div>
    <template id="my-app">
        <h2>{{counter}}</h2>
        <h2 v-once>v-once: {{counter}}</h2>
        <div v-once>
            <h2>{{counter}}</h2>
        </div>
        <button @click="increment">+1</button>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    counter: -1
                }
            },
            methods: {
                increment() {
                    this.counter++
                }
            },
        }

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

以上代码，点击+1 只有第一行的counter变化， 下面两行一直都是显示是-1

v-text

在这里插入图片描述
不过还是推荐使用Mustache语法

v-html

在这里插入图片描述
<h2 v-html="message"></h2>

v-pre

在这里插入图片描述

v-bind

在这里插入图片描述

<body>
    <div id="app"></div>
    <template id="my-app">
        <!-- v-bind的基本使用 -->
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="link">百度一下</a>
        <!-- v-bind 提供的一个语法糖 -->
        <img :src="imgUrl" alt="">
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    imgUrl: "https://pics7.baidu.com/feed/bf096b63f6246b601b80a47592b08f4a500fa2f7.jpeg?token=5ca864652fbb35921a2127578f40c7b3",
                    link: "http://www.baidu.com"
                }
            }
        }

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

绑定class

在这里插入图片描述

对象语法
<style>
    .active {
        color: red;
    }

    .why {
        font-size: 25px;
    }
</style>
-------------------------------------------------------------------------------------
<body>
    <div id="app"></div>
    <template id="my-app">
        <div :class="className">hhhhhhhhh</div>
        <!-- 对象语法：{'类名' : boolean} -->
        <div :class="{'active': isActive}">呵呵哈哈哈</div>
        <button @click="toggle">切换</button>

        <!-- 类名的引号不写也正常 -->
        <div :class="{active: isActive}">类名没引号</div>

        <!-- 也可以有多个键值对 -->
        <div :class="{'active': isActive, 'title': isTitle}">嗯嗯</div>

        <!-- 默认的class和动态的class结合 -->
        <div class="abc cba" :class="{'active': isActive, 'title': isTitle}">test</div>

        <!-- 将对象放到一个单独的属性 -->
        <div :class="classObj">单独的属性</div>

        <!-- 将返回的对象放到一个methods(computed)方法中 -->
        <div :class="getClassObj()">方法</div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    className: 'why',
                    isActive: true,
                    isTitle: true,
                    classObj: {
                        active: true,
                        title: true
                    }
                }
            },
            methods: {
                toggle() {
                    this.isActive = !this.isActive
                },
                getClassObj() {
                    return {
                        active: true,
                        title: true
                    }
                }
            },
        }

        Vue.createApp(App).mount("#app")
    </script>
</body>
数组语法
<div id="app"></div>
<template id="my-app">
    <div :class="['abc', title]"></div>
    <div :class="['abc', title, isActive ? 'actve' : '']"></div>
    <div :class="['abc', title, {'active': isActive}]"></div>
</template>

<script src="../js/vue.js"></script>
<script>
    const App = {
        template: '#my-app',
        data() {
            return {
                isActive: true,
                title: 'cba'
            }
        }
    }

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

绑定style

在这里插入图片描述


<body>
    <div id="app"></div>
    <template id="my-app">
        <div :style="{color: finalColor, fontSize: '50px'}">hhhhhh</div>
        <div :style="styleObj">绿色</div>
        <div :style="getStyleObj()">eeee</div>
        <!-- 数组 -->
        <div :style="[styleObj2, styleObj]">ttttt</div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    finalColor: 'red',
                    styleObj: {
                        color: 'yellow',
                        backgroundColor: 'red',
                        fontSize: '22px'
                    },
                    styleObj2: {
                        fontWeight: 700,
                        textDecoration: 'underline',
                        padding: '10px'
                    }
                }
            },
            methods: {
                getStyleObj() {
                    return {
                        color: 'skyblue',
                        fontSize: '50px',
                        fontWeight: 700
                    }
                }
            },
        }

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

在这里插入图片描述

动态绑定属性

在这里插入图片描述在这里插入图片描述

绑定一个对象

在这里插入图片描述

v-on

在这里插入图片描述

基本使用

<body>
    <div id="app"></div>
    <template id="my-app">
        <!-- 完整写法v-on:监听的事件"methods中的方法"-->
        <button v-on:click="btnClick">按钮</button>
        <div class="area" v-on:mousemove="mouseMove"></div>
        <!-- 语法糖@ -->
        <button @click="btnClick">按钮</button>
        <!-- 绑定一个表达式 -->
        <button @click="counter++">{{counter}}</button>
        <!-- 绑定一个对象 -->
        <div class="area" v-on="{click: btnClick, mousemove: mouseMove}"></div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        const App = {
            template: '#my-app',
            data() {
                return {
                    counter: 100
                }
            },
            methods: {
                btnClick() {
                    console.log("鼠标点击事件")
                },
                mouseMove() {
                    console.log("鼠标移动")
                }
            },
        }

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

参数传递

在这里插入图片描述

修饰符

在这里插入图片描述
在这里插入图片描述

lalaxuan
关注
专栏目录
Vue基础语法
m0_68917672的博客
10-19 143
本文重点陈述了过滤器的作用及用法以及自定义指令和生命周期的基本解析以下是本篇文章正文内容- 内置指令不能满足我们特殊的需求- Vue允许我们自定义指令-自定义指令的作用 ： 可以自定义函数给元素执行-自定义指令 操作dom对象 js原生象 js原生到这里对文章进行总结如下：以上就是今天要讲的内容，本文仅仅简单介绍了Vue基础语法使用，提供了大量能使我们快速便捷地处理前端vue的处理。二、
面试题梳理 - Vue基础篇
suixuejiqiren66的博客
03-13 197
vue基础面试题
Vue详解＜三＞?
weixin_46409887的博客
10-26 349
1.vue的生命周期? beforeCreate->created->beforeMount->mouted->beforeUpdate->updated-> beforeDestory->destoyed 共八个生命周期: 初始前->初始后->载入前->载入后->更新前->更新后->销毁前->销毁后 2.路由? 访问不同的路径，就可以返回不同的结果,可以做到跳转页面却不需要刷新页面，整体来说是跳转组件用的。 传统的路由方式
Vue3尝鲜之Suspense异步组件(踩坑)
CuiCui_web的博客
12-09 5270
Suspense组件是Vue3中的知名功能之一。 它们允许我们的应用程序在等待异步组件时渲染一些后备内容，可以让我们创建一个平滑的用户体验。 值得庆幸的是，Suspense组件非常容易理解，它们甚至不需要任何额外的导入! 可以解决异步请求的困境； Suspense是Vue3推出的一个内置的特殊组件； 如果使用Suspense,需要返回一个Promise 创建第一个组件： AsyncShow <!-- * @Description: Suspense - 异步请求好帮手 * @Author: Rulyc
Vue3 !!是什么意思
最新发布
专注基础架构领域
07-12 203
在Vue.js中，双感叹号（!）通常用于将一个值转换为布尔类型。在JavaScript中，有一些值可以被视为“假”或“真”，如false、0、空字符串、null、undefined等等。当我们使用双感叹号对这些值进行转换时，它会将它们转换为对应的布尔值。在上面的例子中，双感叹号将null转换为false，因此hasValue的值为false。使用双感叹号可以简洁地将一个值转换为布尔类型，方便我们进行条件判断和逻辑运算。这种转换在很多情况下都很有用，比如判断一个变量是否有值或者判断一个变量是否为真。
vue3中的各种知识点
letnewworld的博客
07-06 297
vue3
第三章：VUE3(三)----基本指令介绍
fly1157932256的博客
06-13 219
主要介绍了vue基本指令的用法
Vue3 开发语法使用总结（超详细、超基础）
wocwin的博客
06-21 1466
Vue3 开发语法使用总结（超详细、超基础）
vue面试——2021最全面的vue基础面试题.pdf
12-14
Vue面试2021最全面的Vue基础面试题.pdf 本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、...使⽤Proxy的好处是它可以完美地监听到任何形式的数据改变，唯⼀的缺点是兼容性的问题，因为Proxy是ES6的语法。
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1024
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
深入Vue3+TypeScript技术栈-coderwhy大神新课
m0_58577539的博客
05-24 3520
老师介绍 王红元 《TypeScript数据结构与算法》《React技术权威指南》作者 简　　介 coderwhy在课程中会全面讲解Vue3+TypeScript+Webpack5+Vite2+Element-Plus+ECharts的知识内容，这些所有的技术也是目前在公司进行项目开发时所需要掌握的核心知识内容。 蓝光资源->>>>>>csdn私聊 01 邂逅Vue3和Vue3开发体验 【回放】邂逅Vue3和Vue3开发体.
vuecli3以上配置可选操作符写法
u013611033的博客
07-27 462
效果 const firstName = message?.body?.user?.firstName || 'default'; //避免用&&方式规避属性不存在时的问题 下载babel插件 npm i @babel/plugin-proposal-optional-chaining --save-dev .babel.config.js文件,没有就建一个,如果你搭建项目时没有选bebel,那这个文件可能就没有自动生成,需要先安装babel,在新建配置文件 "plu.
Vue 3 介绍
weixin_46413834的博客
03-30 767
ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步。Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库。Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间。目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本。Vue3.0在经过一年的迭代后，越来越好用。轻量、可靠的移动端 Vue 组件库。Vue3性能更高，体积更小。
vue中的（ ？）和（？？）的用法
热门推荐
zlc516的博客
08-28 1万+
今天遇到一点小问题，查了查做个小记录，给大家分享一下，不对的地方还请大家多多指教。 storeValue (restitle) { document.title = restitle?.deptName this.title = restitle?.deptName this.tenantId = restitle?.tenantId } //this.title = restitle?.deptName 等价于 //this.title = restit
Vue基础--Vue中的常见基础指令详解
qq_44749491的博客
09-24 1575
Vue中的基础指令
Vue3 语法
weixin_45137240的博客
06-05 1401
Vue3 中，和 Vue2 一样，也是通过自定义事件来实现子组件给父组件传值。< template > < button @ click = "toFather" > 按钮 < / button > < / template > < script setup lang = "ts" > const emit = defineEmits([ 'getData' ]) const toFather =() => {// 调用自定义事件，并传值 emit('getData' , 100);
13.三元运算符
qq_39393387的博客
07-18 347
三元运算符
Vue3 中有哪些值得深究的知识点？
前端人的博客
12-07 1082
众所周知，前端技术一直更新很快，这不 vue3 也问世这么久了，今天就来给大家分享下vue3中值得注意的知识点。
vue3基础语法小案例
04-03
以下是一个简单的Vue3基础语法小案例： HTML代码： ``` <div id="app"> <h1>{{ message }}</h1> <button v-on:click="changeMessage">Change Message</button> </div> ``` Vue实例代码： ``` const app = Vue.createApp({ data() { return { message: 'Hello, Vue3!' } }, methods: { changeMessage() { this.message = 'Vue3 is awesome!' } } }) app.mount('#app') ``` 运行效果： 当页面加载时，会显示一个标题为“Hello, Vue3!”的H1标签和一个按钮。当用户点击按钮时，会调用changeMessage方法，将message的值改为“Vue3 is awesome!”，并更新页面上的H1标签的文本内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lalaxuan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值