Vue3学习第一天

最新推荐文章于 2024-05-05 21:06:01 发布
最新推荐文章于 2024-05-05 21:06:01 发布
阅读量534 收藏 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
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue第一天学习笔记.txt
09-07
click函数定义在Vue实例 methods里面 调用函数方法形式:函数名:function(参数){内容} 属性绑定和数据双向绑定： v-bind:title v-bind:title缩写法 :title v-model 模板指令，数据双向绑定 计算属性和侦听器 计算...
关于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 3万+
setup相当于之前的created周期：创建时 onBeforeMount：DOM即将挂载 onMounted：DOM挂载完毕 onBeforeUpdate：DOM即将更新 onUpdated：DOM更新完毕 onBeforeUnmount：即将销毁 onUnmounted：销毁完毕 <script lang="ts"> import { defineComponen...
Vue 3 中的常用生命周期函数使用场景详解
最新发布
aike13ky的博客
05-05 2479
Vue 3 的生命周期钩子为开发者提供了在组件生命周期的不同阶段执行特定逻辑的能力。通过合理使用这些钩子，我们可以更好地管理组件的状态、DOM 操作和副作用，从而创建出更高效、更健壮的 Vue 应用程序。每个钩子都有其特定的使用场景，了解并正确使用它们可以大大提高我们的开发效率。
Vue3 生命周期
qq_42389674的博客
10-01 1191
vue3的生命周期与vue 2的不同点 vue3没有 beforeCreate和created 使用setUp代替了他们 onBeforeMount beforeMount与vue3的beforeMount用法一致 onMounted beforeMount与vue3的beforeMount用法一致 onBeforeUpdate beforeUpdate与vue3的beforeUpdate用法一致 onUpdated updated与vue3的updated用法一...
vue3生命周期
qq_44540152的博客
11-29 7847
对比下面两张生命周期可以看出，vue3使用beforeUnmount和unmounted替代了beforeDestroy和destroyed。vue3在初始化的时候已经挂载到容器，无需在beforeMount判断是否有根节点项配置。 vue3生命周期： 对比vue2生命周期 代码验证生命周期： vue3生命周期有两种配置方式： 第一种：通过配置使用生命周期钩子函数，在setup()外面配置 第二种：在组合式api中使用生命周期钩子函数，其中beforeCreate()、 created()相当于setu
Vue3 学习
a9874561328的博客
03-25 1677
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之前...
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学习笔记（6）生命周期
gtd54789的博客
04-24 690
Vue3专栏入口 一、 常用的生命周期钩子 没什么讲的就是一些概念，后边用到可以把案例写回来，暂时就了解一下哇。 # 我们最常用的，在创建组件前执行 setup() # 组件开始挂载前执行 onBeforeMount() # 组件挂载完执行 onMounted() # 组件更新前执行 onBeforeUpdate() # 组件更新后执行 onUpdated() # 组件卸载前执行 onBeforeUnmount() # 组件卸载后执行 onUnmounted() # 当A组件切换成B组件时 A组件消失后执行
初识VUE第三天（VUE之生命周期钩子）
weixin_45582846的博客
10-11 962
什么是生命周期？ 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实...
Vue3 中生命周期的使用
weixin_62897746的博客
02-21 6572
组件从创建到销毁的整个过程，不同阶段执行不同的函数 每个 `Vue` 组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到 `DOM`，以及在数据改变时更新 `DOM`。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是`created`、`mounted`、`updated` 和 `unmounted`。
Vue3——第三章（生命周期钩子）
why404
01-10 7271
Vue3——第三章（生命周期钩子）
vue3生命周期详解
weixin_45357661的博客
05-01 4200
Vue3 的生命周期钩子函数
Vue3的生命周期
m0_51196832的博客
05-24 1万+
vue2的生命周期图 vue3的生命周期图 vue3中可以继续使用vue2.x中的生命周期钩子，但是有两个被改名： beforeDestroy改名为beforeUnmount destroyed改名为unmounted vue3也提供了Composition API形式的生命周期钩子，与vue2.x中钩子对应关系如下 beforeCreate =====setup（） created =========setup（） beforeMount=====onBeforeMount mo
Vue3 的生命周期函数
m0_74060654的博客
12-04 5188
Vue3 Composition API 附带了一个setup()方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离在旧的钩子函数之后和created的钩子函数之前立即调用setup方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在setup()方法中。
Vue3中setup语法糖下的常见生命周期钩子——onMounted和onBeforeMount
DM_Cxx的博客
06-06 8918
在setup语法糖下的onMounted和钩子函数主要区别就是是否能获取到html文档中的DOM实例，与Vue2.x时大同小异。个人感觉Vue3中的setup语法糖写法上更能让人明显感受到一个组件从实例创建到实例创建完成是经过了一条”生产线“，生产线由Vue官方团队提供，而其中提供的钩子函数则是交给用户自主定义，写Vue2.x的时候感悟还没那么深啊。附一个官方链接组合式API下的生命周期钩子文章有问题之处还望评论斧正！更多其他组合式API生命周期钩子文章链接放在下方⬇敬请期待！
三十天精通vue 3 第一天
08-12
第一天开始学习Vue 3，首先要了解Vue的基本概念和核心功能。Vue是一个用于构建用户界面的渐进式JavaScript框架，它采用组件化的方式来开发应用程序。 在Vue 3中，有一些重要的变化和改进。首先，Vue 3引入了Composition API，这是一个全新的API，可以让我们更好地组织和共享组件逻辑。通过Composition API，我们可以使用函数来编写组件的逻辑，而不仅仅是通过选项对象。 另一个重要的改进是性能的提升。Vue 3在内部进行了许多优化，例如使用Proxy替换了原来的Object.defineProperty来实现响应式系统。这使得Vue 3在处理大型数据集和性能敏感应用程序时更高效。 还有一项重大的变化是对TypeScript的更好支持。Vue 3引入了许多类型声明文件，使得在使用TypeScript时更容易推断和检测组件的类型。 在第一天，我们可以开始学习Vue 3的安装和使用。我们可以通过npm或yarn来安装Vue，然后使用Vue的命令行工具创建一个新的Vue项目。 接下来，我们可以学习Vue的基本语法和核心概念，例如如何定义一个组件、使用指令和插值表达式、处理事件等。 最后，我们可以尝试编写一个简单的Vue应用程序，并将其运行起来。通过实践，我们可以更加深入地理解Vue的使用和原理。 第一天是学习Vue 3的基础，为接下来的学习打下坚实的基础。希望通过努力学习，在接下来的30天内可以精通Vue 3的使用和开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值