学习Vue3笔记

最新推荐文章于 2024-05-27 12:29:10 发布
最新推荐文章于 2024-05-27 12:29:10 发布
阅读量108 收藏
点赞数
文章标签： 学习 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60100978/article/details/125855002
版权

一、学习Vue3的相关资料

Vue3的官方说明书
关于Vue3的一切
div和span标签以及标签分类
关于JS的一切
关于Html的一切
关于Css的一切

二、Vue3课程笔记

基础Vue示例：hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                massage:'hello world'
            }
        },
        template:"<div>{{massage}}</div>"
    });
    app.mount('#root');
</script>
</html>

一、Vue中应用和组件的基础

1.设计模式

MVVM： m-> model数据 v->view 视图 vm->viewModel试图数据连接层

2. 应用

  • Vue.createApp() ：创建一个应用，每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的
  • const vm = app.mount()： vm是获取应用的根组件，通过vm可以获取vue里的任何数据，属性和方法
  • vm.$data ： 获取根组件数据对应内容
  • massage:'hello world'：定义数据
  • template:"<div>{{massage}}</div>"：定于模块
  • mount（）：进行挂载，与上面内容进行联系
  • data(){} ： data方法，用于在vue中声明数据,对象或函数类型,页面中可以直接访问使用
  • methods:{} ： methods属性，用于编写vue中的方法,所有的方法由vue对象来调用, 访问data中的属性直接使用this.xx

二、生命周期函数

在某一时候会自动执行的函数

  • alert('<弹窗内容>')：警告弹窗
  • mounted()：自动执行函数
  • beforeCreate（）：在初始化/创建实例之前自动执行的函数
  • created：在初始化/创建实例之后自动执行的函数

三.表单中双向绑定指令的使用

  • checkbox

（1）
-可多选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        
        data(){
            return{
                message:[]
            }
        },
        template:`
        <div>
            {{message}}
            Bell <input type="checkbox" v-model="message" value="Bell" />
            Amy<input type="checkbox" v-model="message" value="Amy" />
            Pee <input type="checkbox" v-model="message" value="Pee" />
            
        </div>
        `
    });

显示结果

（2）自定义表示选择与否（不用true和false表示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        
        data(){
            return{
                message:"hello",
                
            }
        },
        template:`
        <div>
            {{message}}
            <input type="checkbox" v-model="message" true-value="hello" false-value="world" / >
        </div>
        `
    });
    const vm = app.mount('#root');
</script> 
</html>

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

  • radio

-单项选择

template:`
        <div>
            {{message}}
            Bell <input type="radio" v-model="message" value="Bell" />
            Amy<input type="radio" v-model="message" value="Amy" />
            Pee <input type="radio" v-model="message" value="Pee" />
            
        </div>
        `

在这里插入图片描述

  • select（opation）

（1）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        
        data(){
            return{
                message:''
            }
        },
        template:`
        <div>
            {{message}}
            <select>
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            
        </div>
        `
    });
    const vm = app.mount('#root');
</script>
</html>

在这里插入图片描述
（2）


        template:`
        <div>
            {{message}}
            <select v-model="message">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            
        </div>
        `

在这里插入图片描述
（3）

template:`
        <div>
            {{message}}
            <select v-model="message">
                <option disable value=''>请选择内容</option>
                <option value='A'>A</option>
                <option value='B'>B</option>
                <option value='C'>C</option>
            </select>
            
        </div>
        `

在这里插入图片描述

（4）多选

//方法一：
 const app = Vue.createApp({
        
        data(){
            return{
                message:[]
            }
        },
        template:`
        <div>
            {{message}}
            <select v-model="message" multiple>
                <option disable value=''>请选择内容</option>
                <option value='A'>A</option>
                <option value='B'>B</option>
                <option value='C'>C</option>
            </select>
            
        </div>
        `
    });

//方法二：
const app = Vue.createApp({
        
        data(){
            return{
                message:[],
                options:[{
                    text:'A',value:'A'
                },{
                    text:'B',value:'B'
                },{
                    text:'C',value:'C'
                }]
            }
        },
        template:`
        <div>
            {{message}}
            <select v-model="message" multiple>
                <option disable value=''>请选择内容</option>
                <option v-for="item in options" :value="item.value">{{item.text}}</option>
            </select>
            
        </div>
        `
    });

在这里插入图片描述

四.全局、局部组件

  • 全局命名：小写字母，两个单词用-连接，如：hello-world
  • 局部命名：首字母大写，驼峰命名，如：HelloWorld

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({ 
        template:`
        <div>
            <hello />
            <counter />
        </div>
        `
    });


    app.component('hello',{
        template:`
        <div>hello</div>
        `
    })


    app.component('counter',{
        data(){
            return{
                count:1
            }
        },
        
        template:`
        {{count}}
        <button @click="count++">增加</button>
        
        `
    })

    const vm = app.mount('#root');
</script> 
</html>

局部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>

    const Counter={
        data(){
            return{
                count:1
            }
        },
        
        template:`
        {{count}}
        <button @click="count++">增加</button>
        
        `
    }
    
    const HelloWorld={
        template:`
        <div>hello world</div>
        `
    }    
    
    
       
    const app = Vue.createApp({ 
        components:{HelloWorld,Counter},
        template:`
        <div> 
            <HelloWorld />
            <Counter />
        </div>
        `
    });




    const vm = app.mount('#root');
</script> 
</html>

五、使用 Vue 实现基础的 CSS 过渡与动画效果

1.动画效果

<!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>
    <style>
        @keyframes leftToRight{
            0%{
                transform: translateX(-100px);
            }
            50%{
                transform: translateX(-50px);
            }
            0%{
                transform: translateX(0px);
            }
        }
        .animation{
            animation: leftToRight 3s;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>

<script>
    const app=Vue.createApp({
         data(){
            return{
                animate:{
                    animation:false
                }
            }
        },
        methods: {
            handleClick(){
                this.animate.animation = !this.animate.animation
            }
        },

        template:`
        <div>
        <div :class="animate">hello world</div>  
        <button @click="handleClick">动画</button>  
        </div>
        `

    });

    

    const vm=app.mount('#root');
        
</script>
</html>

2.过渡效果

<!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>
    <style>
        .transition{
            transition:3s background-color ease;
        }
        .blue{
            background: blue;
        }
        .green{
            background: green;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>

<script>
    const app=Vue.createApp({
         data(){
            return{
                animate:{
                    transition:true,
                    blue:true,
                    green:false,
                }
            }
        },
        methods: {
            handleClick(){
                this.animate.blue = !this.animate.blue;
                this.animate.green = !this.animate.green;
            }
        },

        template:`
        <div>
        <div :class="animate" >hello world</div>  
        <button @click="handleClick">动画</button>  
        </div>
        `

    });

    

    const vm=app.mount('#root');
        
</script>
</html>

六、状态动画

setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。

this.timerID = setInterval(
			() => this.tick(),
			1000		
		);
		<!--清除该函数-->
	clearInterval(this.timerID);

示例代码（如下）：

<!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>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>

<script>
    const app=Vue.createApp({
         data(){
            return{
                number:1,
                animateNumber:1
            }
         },

         methods: {
            handleClick(){
                this.number = 10;
                if (this.animateNumber < this.number){
                    const animation = setInterval(() => {
                        this.animateNumber += 1;
                        if(this.animateNumber === 10){
                            clearInterval(animation);
                        }
                    },1000);
                }
            },
         },

        template:`
        
         <div> 
            <div>
                {{animateNumber}}
            </div>
            <button @click="handleClick">增加</button>
        </div>
         `
    });
    const vm=app.mount('#root');  
</script>
</html>

七、Mixin混入的基础语法

mixin 混入
1.组件 data、methods 优先级高于 mixin data、methods 优先级
2.生命周期函数，先执行 mixin 里面的，在执行组件里面的

八、开发实现 Vue 中的自定义指令

示例1：自动聚焦

<!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>

    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>

<script>  
    const app=Vue.createApp({
        template:`
         <div> 
            <input v-focus />
        </div>
         `
    });

    app.directive('focus',{
        mounted(el){
            el.focus();
        }
    })

    

    const vm=app.mount('#root');
        
</script>
</html>
遨游在代码里的小y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3学习笔记
weixin_46448867的博客
03-01 192
vue3常用API学习笔记
Vue3笔记
m0_67445092的博客
01-08 970
打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%什么是hook？—— 本质是一个函数，把setup函数中使用到的Composition API（组合式API）进行了封装。类似于vue2.x中的mixin。自定义hook的优势：复用代码。让setup中的逻辑更清楚易懂。在工程目录下创建一个hooks文件夹，里面的文件命名规则useXxxx 明起意// 引入需要的组合// 创建函数 点击函数并且暴露出去// 实现鼠标点击获取坐标数据x: 0,y: 0})
Vue3学习笔记（待更）
最新发布
2302_80742310的博客
05-27 727
学习Vue3的笔记
vue3笔记
qq_31539817的博客
05-25 3004
第一章：vue3.0基础 1，认识vue3.0 vue3.0发布时间为2020-9-18，从项目体验上，vue3.0比起vue2.0有以下优势： 打包大小减少41% 初次渲染块55%，更新渲染块133% 内存占比少54% 2，新增内容 源码重构，新增特性，重写架构。 第二章：使用vue3.0 创建vue3.0有两种方式：使用vue-cli和使用vite i.使用cli： vue create vue-name 选择vue3.0项目 2，使用vite 安装vite ..
Vue3的基本语法及使用（vue3尚硅谷学习笔记）
vayne_1的博客
10-14 3607
适合初学vue3者，以及学习观看尚硅谷视频的同学，本文精简笔记内容
2024年Vue 3学习笔记：Vu3基础的完整指南
m0_63231347的博客
01-07 2756
这篇笔记中是在学习禹神最新Vue3教程记下来的，其中有一些自己写的笔记见解、搬禹神、vue、vite官网的一些笔记。主要目的还是给自己多一点知识点的总结。其实一遍下来，基本大部分都会，所以学习会很快。有几点我得好好在下面总结。
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。...通过学习Vue，可以提高前端开发的效率和质量。
vue3自己的学习笔记
01-25
Vue 3 学习笔记 本文将详细介绍 Vue 3 中的新特性和变化，包括 Setup 函数、Reactive 数据、生命周期、计算属性、监听函数等等。 Setup 函数 在 Vue 3 中，Setup 函数是一个特殊的函数，它用于定义组件的初始状态...
VUE3笔记 VUE3 VUE
01-02
Vue3 是一款流行的前端JavaScript框架，由尤雨溪开发，用于构建用户...学习Vue3不仅能够提升开发效率，还能让你更好地适应前端技术的发展趋势。通过阅读和实践，你可以深入理解Vue3的精髓，并将其应用到实际项目中。
Vue Markdonwn学习笔记
11-17
Markdown基础语法是学习Vue Markdown的重要部分。包括#号表示的标题，-或*表示的无序列表，1.表示的有序列表，`包裹的代码块，以及[链接](URL)和![图片](URL)的使用。此外，Markdown还支持表格、引用、内联样式等，...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue3学习笔记，亲测有效，持续更新
06-14
小白上手神器，记录的是我每天学习vue3的笔记，有的收费视频观看了好几遍，亲测有效，持续更新
尚硅谷---Vue3同步笔记
Father_Of_Soft的博客
03-05 2086
Vue3新特性介绍，Vue3入门到精通。尚硅谷Vue3教程同步笔记，方便您预习复习~
Vue3学习笔记
qq_62476499的博客
07-23 960
Vue3学习笔记
Vue3笔记整理
qq_54889094的博客
05-24 279
Vue系列笔记
Vue3.0快速上手-重要知识点罗列-系列二
JackieDYH的博客
07-31 4815
Vue3快速上手 1.Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy
Vue3框架学习总结一（详细记录Vue3框架安装、工程创建及配置整个过程）
彼岸尚有荣光在，应不断记录总结！！！
02-10 2500
一、Vue3配置环境及安装 基础环境安装：Node.js、淘宝npm镜像 1、Node.js基础内容 Node.js：本质上是一个JavaScript的运行环境。 官方下载地址：Download | Node.js（msi傻瓜式安装） 运行测试：（控制台输出 / 使用 node -v 命令测试安装是否成功） node.js是JavaScript的运行环境，而npm是JavaScript包的管理工具，我们可以利用npm下载模块，复用已有的代码，提高效率，但...
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值