Vue3简单介绍和快速体验

XError＿xiaoyu

于 2024-08-09 06:00:00 发布

阅读量259

点赞数 17

分类专栏：编程学习专栏 # 前端工程学习文章标签：笔记 vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_72543266/article/details/141035777

版权

编程学习专栏同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

前端工程学习

10 篇文章 0 订阅

订阅专栏

前言

在学习Vue3之前,自己已经学习过的vue2了,在学习Vue3后还是能感觉到2和3在使用和构建方面有一些格式上的不同,但总体学习和使用难度差不多,本篇是学习完Vue3后慢慢对之前学习的Vue3做个回顾,在学习Vue之前,

我个人的学习新知识的方法是: 先对学习的知识进行一个简单demo使用. 这里demo可以是通过直接复制别人代码来进行使用,还是照着写都可以,主要是体验一下框架的功能和一些使用的格式,方便后续学习,以及留一个印象,方便后续进行学习过程中加深印象,辅助学习

1. Vue3介绍

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。官网为:

https://cn.vuejs.org/https://cn.vuejs.org/

1.1 Vue的两个核心功能：

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM,这个需要用到响应式数据,后面在说

1.2 Vue作者介绍

VUE作者:尤雨溪

尤雨溪（Evan You），毕业于科尔盖特大学，前端框架Vue.js的作者、HTML5版Clear的打造人、独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的JavaScript项目，最后自己也走上了开源之路，现全职开发和维护Vue.js
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。
尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript，从此被这门编程语言深深吸引，开启了自己的前端生涯。

膜拜一波大神,偶然接触便写出Vue框架,OK了,果然是路人的世界

2. Vue3快速体验(非工程化方式)

2.1 所有代码

先是展示一个对Vue3有基本了解的demo方便对后续学习有个基本的了解

下面对一些重要部分代码进行一个基本解释,方便快速了解Vue3的使用

<!DOCTYPE html>
<html lang="en">
    <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">
        <title>Document</title>
    </head>
    <body>
        <!-- 这里也可以用浏览器打开连接,然后将获得的文本单独保存进入一个vue.js的文件,导入vue.js文件即可 -->
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
        <div id="app">
            <!-- 给style属性绑定colorStyle数据 -->
            <!-- {{插值表达式 直接将数据放在该位置}} -->
           <h1 v-bind:style="colorStyle">{{headline}}</h1>
           <!-- v-text设置双标签中的文本 -->
           <p v-text="article"></p>
           <!-- 给type属性绑定inputType数据 -->
           <input v-bind:type ="inputType" value="helloVue3"> <br>
           <!-- 给按钮单击事件绑定函数 -->
           <button  @click="sayHello()">hello</button>
        </div>

        <script>
            //组合api
            const app = Vue.createApp({
                // 在setup内部自由声明数据和方法即可!最终返回!
                setup(){
                    //定义数据
                    //在VUE中实现DOM的思路是: 通过修改修数据而影响页面元素
                    // vue3中,数据默认不是响应式的,需要加ref或者reactive处理,后面会详细讲解
                    let inputType ='text'
                    let headline ='hello vue3'
                    let article ='vue is awesome'  
                    let colorStyle ={'color':'red'}        
                    // 定义函数
                    let sayHello =()=>{
                        alert("hello Vue")
                    }
                    //在setup函数中,return返回的数据和函数可以在html使用
                    return {
                       inputType,
                       headline,
                       article,
                       colorStyle,
                       sayHello
                    }
                }
            });
            //挂载到视图
            app.mount("#app");
        </script>
    </body>
</html>

2.2 导入js

都知道Vue是一个前端框架,因此初步理解为通过js文件进行一些内置的操作,因为此次并没有通过工程化的方式,因此可以先通过js文件导入,来实现Vue的功能

<!-- 这里也可以用浏览器打开连接,然后将获得的文本单独保存进入一个vue.js的文件,导入vue.js文件即可 -->
        <script src="https://unpkg.com/vue@3/dist/vue.global.js">

2.3 一些基本指令

其中的一些常见使用在之前我写文章中都有,和Vue2中的使用是一致的,直接在目录中查看Vue部分即可

Webpack源码泄露到Vue快速入门_webpack泄露-CSDN博客文章浏览阅读1.8k次，点赞26次，收藏29次。刚好最近学习了Vue和Webpack,回顾一下学习并对Vue的学习过程中对笔记总结进行记录,同时进行思考过程中的理解加入其中,方便自己进行后续的学习和回顾,当然因为这两个内容都和我之前在进行渗透测试中碰到的一种漏洞类型相关,其中很容易碰到资产是关于使用wepack进行打包的,并且存在js.map泄露,在源码泄露中,常见的前端是通过vue进行编写的,顺便加深一下之前渗透过程的印象.webpack是一个JavaScript应用程序的静态资源打包器。_webpack泄露https://blog.csdn.net/weixin_72543266/article/details/1391552351. {{}} 插值表达式,用于将变量数据展示到页面

2. v-bind或:(简写文冒号): 用于绑定属性,包含url,href,value,type等等

3.v-text:和插值表达式的作用基本一致,将变量的值绑定到标签上

4.@Click或是v-on:click 作用都是将js中的一些事件函数绑定到自定义的function上,
@click表示点击事件,点击后触发

 <div id="app">
            <!-- 给style属性绑定colorStyle数据 -->
            <!-- {{插值表达式 直接将数据放在该位置}} -->
           <h1 v-bind:style="colorStyle">{{headline}}</h1>
           <!-- v-text设置双标签中的文本 -->
           <p v-text="article"></p>
           <!-- 给type属性绑定inputType数据 -->
           <input v-bind:type ="inputType" value="helloVue3"> <br>
           <!-- 给按钮单击事件绑定函数 -->
           <button  @click="sayHello()">hello</button>
</div>

2.4 app对象的创建和挂载

其中首先是通过Vue.createApp创建一个app对象,然后通过在setup(){} 中编写想要展示的数据和方法,最后在retuen中需要声明在setup中定义的变量和方法,就是直接写出,最后进行视图的挂载,也就是将数据展示在id为app的位置

<script> 
const app = Vue.createApp({
         setup(){} 
        ..............省略..............

 return {}
});
//挂载到视图
            app.mount("#app");
</script>

基本的就不介绍了,看懂指令后,de代码就很简单

点击hello按钮,便会弹出弹窗

XError＿xiaoyu

关注

17
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue3简单介绍和快速体验

在学习Vue3之前,自己已经学习过的vue2了,在学习Vue3后还是能感觉到2和3在使用和构建方面有一些格式上的不同,但总体学习和使用难度差不多,本篇是学习完Vue3后慢慢对之前学习的Vue3做个回顾,在学习Vue之前,我个人的学习新知识的方法是: 先对学习的知识进行一个简单demo使用. 这里demo可以是通过直接复制别人代码来进行使用,还是照着写都可以,主要是体验一下框架的功能和一些使用的格式,方便后续学习,以及留一个印象,方便后续进行学习过程中加深印象,辅助学习。
复制链接

扫一扫