Vue3学习第一天

最新推荐文章于 2024-08-25 14:08:21 发布
最新推荐文章于 2024-08-25 14:08:21 发布
阅读量579 收藏 2
点赞数
分类专栏： Vue3.0学习 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36982349/article/details/115857053
版权

vue中的应用

我们在vue3中如何使用vue?

<div id="root"></div>
// createApp创建一个 Vue 的应用, 存储到 app 变量中,全称是createApplication
// 传入的参数表示,这个应用最外层的组件,应该如何展示
// Vue的编程是面向数据的编程
// mvvm 设计模式, m -> model 数据, v -> view 视图, vm -> viewModel 视图数据连接层
const app = Vue.createApp({
    data() {
        return {
            tip: 'vue3学习'
        }
    }
    template: '<div>{{tip}}</div>'
})
// 这个应用的 .mount 方法挂载到 app 这个节点上,使这个应用只作用于div中id为 app 的元素上面
app.mount('#app')
// vm 代表的是 vue 应用的根组件
const vm = app.mount('#root')

案例结果展示：
apply.png

apply1.png
Vue3中我们通过createApp来创建Vue的应用, 创建完成后, 通过mount方法进行挂载到指定的元素上, 完成操作后, 在上面定义了app和vm,我们在浏览器的控制台中就可以直接输入app或者vm, 访问app和vm中的内容, 我们也可以通过 vm.$data 访问根组件中的一些数据内容, 当我们通过 vm.$data.tip 操作视图连接层修改数据, 数据发生改变系统会自动更改页面上显示的内容。

vue的生命周期函数

生命周期函数: 指的是在【某一时刻】会【自动执行】的函数

下面官方生命周期图：
lifecycle .png

从图中我们可以看出Vue的生命周期一共有以下几个

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount
  • unmounted

以下是对生命周期函数的说明

<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习'
        }
      },
      // 实例生成之前会自动执行的函数
      beforeCreate() {
        console.log('beforeCreate')
      },
      // 实例生成之后会自动执行的函数
      created() {
        console.log('created')
      },
      // 在组件内容被渲染到页面之前,立即自动执行的函数
      beforeMount() {
        console.log(document.getElementById('root').innerHTML, 'beforeMount')
      },
      // 在组件内容被渲染到页面之后自动执行的函数
      mounted() {
        console.log(document.getElementById('root').innerHTML, 'mounted')
      },
      // 当数据变化时,会自动执行的函数
      beforeUpdate() {
        console.log(document.getElementById('root').innerHTML, 'beforeUpdate')
      },
      // 当数据变化时,页面重新渲染后,会自动执行的函数
      updated() {
        console.log(document.getElementById('root').innerHTML, 'updated')
      },
      // 当Vue应用失效(销毁)时,自动执行的函数
      beforeUnmount() {
        console.log(document.getElementById('root').innerHTML, 'beforeUnmount')
      },
      // 当Vue应用失效(销毁)时,且dom完全销毁之后,自动执行的函数
      unmounted() {
        console.log(document.getElementById('root').innerHTML, 'unmounted')
      },
      template: "<div>{{tip}}</div>"
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台输出结果：
beforeummount.png
beforeMount和mounted的区别

  • 控制台中beforeMount前面输出的结果是空,而mounted中输出的是<div>vue3学习</div>
    beforeUpdate和updated的区别
    updated.png
  • 当我们在控制台中通过 vm.$data.tip=“updated” 修改后发现在beforeUpdat中输出的是未修改的值,而updated输出的是我们修改后的值
    beforeUnmount和unmounted的区别
    unmounted.png
  • 当我们在控制台中通过app.unmount() 将dom进行销毁时,我们发现在beforeUnmount生命周期输出的dom元素还存在,在unmounted中dom元素已经销毁了

生命周期图中的一些额外说明

life.png
在生命周期图中我们可以看到这个过程,说一下这个YES过程和NO过程的区别

  1. 当走YES过程时,Vue会寻找上面代码图中的这行代码template: "<div>{{tip}}</div>" 进行编译。
  2. 当走NO过程时,我们把图中的template代码移动到root标签下,如下图,这时候代码中没有template模板,Vue会找这行代码<div id="root"><div>{{tip}</div></div>进行编译。
<body>
  <div id="root">
    <div>{{tip}}</div>
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习'
        }
      },
      // 实例生成之前会自动执行的函数
      beforeCreate() {
        console.log('beforeCreate')
      },
      // 实例生成之后会自动执行的函数
      created() {
        console.log('created')
      },
      // 在模板已经被编译成函数之后(在组件内容被渲染到页面之前)立即自动执行的函数
      beforeMount() {
        console.log(document.getElementById('root').innerHTML, 'beforeMount')
      },
      // 在组件内容被渲染到页面之后自动执行的函数
      mounted() {
        console.log(document.getElementById('root').innerHTML, 'mounted')
      },
      // 当data中的数据发生变化时(当数据变化时)会自动执行的函数
      beforeUpdate() {
        console.log(document.getElementById('root').innerHTML, 'beforeUpdate')
      },
      // 当data中的数据发生变化(当数据变化时),同时页面完成更新后(页面重新渲染后),会自动执行的函数
      updated() {
        console.log(document.getElementById('root').innerHTML, 'updated')
      },
      // 当Vue应用失效(销毁)时,自动执行的函数
      beforeUnmount() {
        console.log(document.getElementById('root').innerHTML, 'beforeUnmount')
      },
      // 当Vue应用失效(销毁)时,且dom完全销毁之后,自动执行的函数
      unmounted() {
        console.log(document.getElementById('root').innerHTML, 'unmounted')
      },
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台输出结果：
template.png

常用模版语法讲解

v-html指令

想实现的效果: data中写标签使文字有加粗效果

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: '<b>vue3学习<b>'
        }
      },
      template: '<div>{{tip}}</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

注意：插值表达式中可以使用tip变量{{tip}},我们也可以使用js表达式{{'hello'+'world'}}或{{Math.random(1, 10)}},但是我们不能直接在{{if(真) alert('hello world')}}写语句,我们要区分好js表达式和语句

当我们把data中tip添加b标签,想在页面中显示加粗字体,我们直接使用插值{{tip}}是不行的,控制台输出结果如下

html.png
我们发现b标签会原样输出,为了显示加粗,我们可以v-html指令

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: '<b>vue3学习<b>'
        }
      },
      template: '<div v-html="tip"></div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

我们在div中添加v-html="tip"指令,就可以得到我们想要的结果了,控制台输出结果如下

vhtml.png

v-bind指令,可以简写为:

想实现的效果: 鼠标悬浮显示对应的文字

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习'
        }
      },
      template: '<div title="tip">vue3鼠标悬浮</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们想要实现文字悬浮提示,我们直接在div中使用title标签,但是这样会显示的是tip字符串,得不到我们想要的结果

bind.png

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习'
        }
      },
      template: '<div v-bind:title="tip">vue3鼠标悬浮</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

要想得到我们data中定义的文字,我们需要使用v-bind指令,在div中使用v-bind:title="tip",这样就可以得到我们想要的结果了

vbind.png
其中v-bind:title="tip"我们可以简写成:title="tip"

v-once指令

想实现的效果: div中的变量只使用一次

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习'
        }
      },
      template: '<div>{{tip}}</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

如果我们通过上面这种写法,我们去控制台修改对应的值,看下效果

once.png
我们可以多次修改值,每次修改值会该变,页面也会发生改变

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习'
        }
      },
      template: '<div v-once>{{tip}}</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们在标签中加入了v-once指令,我们会发现除了第一次显示默认展示的内容,无论我们怎么修改页面都不会改变

vonce.png

v-once在模板中也比较常见,可以让我们避免一些数据重复渲染

v-if指令

想实现的效果: div标签的显示和隐藏

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习',
          hide: true
        }
      },
      template: '<div v-if="hide">{{tip}}</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们在data中定义一个hide控制div标签的显示和隐藏,默认hide值为true,控制台结果如下

if.png

当我们将定义的hide值修改为false时,控制结果如下

vif.png
我们会发现不但页面中没有显示,而且对应的dom中也没有显示div标签,其中v-if可以和v-else一起使用

v-on指令,可以简写为@

想实现的效果: 点击文字弹出弹窗文字

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习',
          hide: false
        }
      },
      methods: {
        alertClick() {
          alert(123)
        }
      },
      template: '<div v-on:click="alertClick">{{tip}}</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

当我们使用v-on指令绑定事件后,我们在methods中执行对应的事件,控制台结果如下

on.png
其中v-on:click="alertClick"我们可以简写成@click="alertClick"

知识了解
  1. 我们可以将事件绑定的元素放在data中,使用动态参数控制,案例如下
<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习',
          hide: false,
          event: 'click'
        }
      },
      methods: {
        alertClick() {
          alert(123)
        }
      },
      template: '<div @[event]="alertClick">{{tip}}</div>'
    })
    const vm = app.mount('#root')
  </script>
</body>

代码中我们在template中可以这样写<div @[event]="alertClick">{{tip}}</div>,这样的话我们直接修改data中的event对应的事件,那么template中的事件也会发生改变,同理v-bind中也可以使用数组这个进行绑定

  1. 如何点击链接阻止跳转,案例如下
    第一种方法我们可以通过e.preventDefault()去阻止事件跳转。
<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习',
          hide: false,
          event: 'click'
        }
      },
      methods: {
        alertClick(e) {
          e.preventDefault()
        }
      },
      template: `<form action="https://v3.cn.vuejs.org/" @click="alertClick">
          <button type="submit">提交</button>
        </form>`
    })
    const vm = app.mount('#root')
  </script>
</body>

第二种方法我们可以直接使用@click.prevent去阻止事件跳转。

<body>
  <div id="root">
  </div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          tip: 'vue3学习',
          hide: false,
          event: 'click'
        }
      },
      methods: {
        alertClick() {
          // e.preventDefault()
        }
      },
      template: `<form action="https://v3.cn.vuejs.org/" @click.prevent="alertClick">
          <button type="submit">提交</button>
        </form>`
    })
    const vm = app.mount('#root')
  </script>
</body>

控制台中点击显示效果

prevent.png
欢迎各位小伙伴交流一下自己的学习经验

周帅帅Love
关注
专栏目录
Vue第一天.xmind
08-26
6.v-once:只渲染元素和组件一次 v-model基本使用： 1.v-model的数据双向绑定 2.视图发生变化，数据也跟着变化 事件的基本使用： 1.简写形式 v-on可以简写为@ 2.当不传递参数的时候加不加括号都一样 3.传递...
关于vue3生命周期的使用、了解以及用途（详细版）
老余的博客
02-22 1万+
每一个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是created、mounted、updated和unmounted。可以监听某一类型的改变而执行某项操作。跟vue2并没有太多不同之处Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
vue基础 - 24 （vue3 生命周期：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted）
热门推荐
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-05 4万+
setup相当于之前的created周期：创建时 onBeforeMount：DOM即将挂载 onMounted：DOM挂载完毕 onBeforeUpdate：DOM即将更新 onUpdated：DOM更新完毕 onBeforeUnmount：即将销毁 onUnmounted：销毁完毕 <script lang="ts"> import { defineComponen...
vue3生命周期源码浅析
最新发布
Jinuss的博客
08-25 1289
浅析Vue3的生命周期源码，内部原理介绍
Vue3 生命周期
qq_42389674的博客
10-01 1234
vue3的生命周期与vue 2的不同点 vue3没有 beforeCreate和created 使用setUp代替了他们 onBeforeMount beforeMount与vue3的beforeMount用法一致 onMounted beforeMount与vue3的beforeMount用法一致 onBeforeUpdate beforeUpdate与vue3的beforeUpdate用法一致 onUpdated updated与vue3的updated用法一...
Vue 3 中的常用生命周期函数使用场景详解
aike13ky的博客
05-05 3280
Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。
vue3生命周期
qq_44540152的博客
11-29 8051
对比下面两张生命周期可以看出，vue3使用beforeUnmount和unmounted替代了beforeDestroy和destroyed。vue3在初始化的时候已经挂载到容器，无需在beforeMount判断是否有根节点项配置。 vue3生命周期： 对比vue2生命周期 代码验证生命周期： vue3生命周期有两种配置方式： 第一种：通过配置使用生命周期钩子函数，在setup()外面配置 第二种：在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setu
Vue第一天学习笔记.txt
09-07
click函数定义在Vue实例 methods里面 调用函数方法形式:函数名:function(参数){内容} 属性绑定和数据双向绑定： v-bind:title v-bind:title缩写法 :title v-model 模板指令，数据双向绑定 计算属性和侦听器 计算...
Vue.js第四天学习笔记
10-20
在Vue.js的学习过程中，第四天的内容涉及到了将JSON数组数据转换为CSV格式并进行导出。这个功能在数据管理和分析中非常实用，特别是在处理表格数据时。以下是对这段代码的详细解析： 首先，HTML部分创建了一个按钮...
学习vue简单项目第一天出现的问题和解决方法
01-07
p1:自己的vue没有高亮显示而且没有代码提示 1、下载vetur插件解决高亮显示 2、代码提示通过设置中的setting.json—–下图 p2：vue里的eslint 代码规则比较反人类 怎么解决 1、下载eslint插件 2、高版本用代码段复制...
Vue基础学习第四天（基础结束）
06-20
在Vue.js的基础学习中，第四天的内容主要集中在利用本地数据库进行数据存储和管理，以便于在Web应用中实现数据持久化。Vue.js是一款轻量级的前端JavaScript框架，以其易学易用、组件化开发模式和高效的数据绑定受到...
Vue3 学习
a9874561328的博客
03-25 1701
1 创建vue3项目(首先要确保@vue/cli版本在4.5.0以上) vue --version ## 检查版本 vue install -g @vue/cli ## 全局安装vue脚手架 vue create vue_test (项目名) ## 创建项目 2 相较于vue2的变化 不再引入Vue构造函数，而是引入一个叫做createApp的工厂函数 template中不再需要根标签 3 SetUp setup的执行时机：在beforeCreate之前...
vue3学习笔记（6）生命周期
gtd54789的博客
04-24 734
Vue3专栏入口 一、 常用的生命周期钩子 没什么讲的就是一些概念，后边用到可以把案例写回来，暂时就了解一下哇。 # 我们最常用的，在创建组件前执行 setup() # 组件开始挂载前执行 onBeforeMount() # 组件挂载完执行 onMounted() # 组件更新前执行 onBeforeUpdate() # 组件更新后执行 onUpdated() # 组件卸载前执行 onBeforeUnmount() # 组件卸载后执行 onUnmounted() # 当A组件切换成B组件时 A组件消失后执行
初识VUE第三天（VUE之生命周期钩子）
weixin_45582846的博客
10-11 1053
什么是生命周期？ Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。 通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例...
学习Vue3 第十二章（认识组件&Vue3生命周期）
qq1195566313的博客
02-07 1万+
组件基础 每一个.vue 文件呢都可以充当组件来使用 每一个组件都可以复用 例如 helloWorld 充当子组件 父组件使用 引入子组件 helloWorld 然后直接就可以去当标签去使用 （切记组件名称不能与html元素标签名称一样） 组件的生命周期 简单来说就是一个组件从创建 到 销毁的 过程 成为生命周期 在我们使用Vue3 组合式API 是没有beforeCreate 和created 这两个生命周期的 onBeforeMount() 在组件DOM实...
Vue 3.0学习 （2）
qq_19527577的博客
03-08 831
什么是 hook？-- 本质就是一个函数，把 setup 函数中使用的 Composition API 进行封装，使其可以在其他地方被调用类似于 vue2.x 中的mixins自定义 hook 的优势，复用代码，提高开发效率，让 setup 中的逻辑更加清楚易懂x: 0,y: 0});});});});
Vue3 中生命周期的使用
weixin_62897746的博客
02-21 7028
组件从创建到销毁的整个过程，不同阶段执行不同的函数 每个 `Vue` 组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到 `DOM`，以及在数据改变时更新 `DOM`。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是`created`、`mounted`、`updated` 和 `unmounted`。
Vue3——第三章（生命周期钩子）
why404
01-10 7323
Vue3——第三章（生命周期钩子）
Vue框架入门：第一天学习总结
"这是关于Vue.js框架的学习笔记，涵盖了对Vue的基本认识、安装方式、初步使用体验，以及列表渲染和计数器的示例。" 在前端开发领域，Vue.js是一个非常流行的渐进式JavaScript框架，它允许开发者构建用户界面并处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值