Vue3学习第一天

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
欢迎各位小伙伴交流一下自己的学习经验

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值