领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

Vue框架学习记录4

nixiaole 2025-01-12 17:36:25 知识剖析 13 ℃

本节紧接记录3，Vue本质是一个js库，我们直接在页面引入 vue.global.js 文件来学习它的作用，先不考虑构建一个大项目的各种逻辑文件关系，从一个简单页面的例子理解

Hello Vue

直接通过脚本引入Vue库，这里选择字节的CDN网址：https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js，实例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue学习</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
  </head>
  
  <body>
    <div id="hello-vue" class="demo">
      {{ message }}
    </div>
    <script>
      const HelloVueApp = {
        data() {
          return {
            message: 'Hello Vue!'
          }
        }
      }
      
      Vue.createApp(HelloVueApp).mount('#hello-vue')
     </script>
  </body>
</html>

这个HTML文件就会在网页端显示输出 Hello Vue! 的内容

html部分：

<div id="hello-vue" class="demo">
      {{ message }}
</div>

这部分构建了一个html页面的内容，具体包含了一个div元素，id为 hello-vue，他就是一个用于挂载 Vue 的实例

怎么理解挂载？

就是Vue代码具体让其生效的地方，Vue代码需要依赖一个具体的html元素来实现其作用，挂载就是让它指定到对应的元素位置然后生效

{{ }} 用于输出对象属性和函数返回值

{{ message }} 就对应了应用实例中 message 变量的值

JavaScript部分：

const HelloVueApp = {
        data() {
          return {message: 'Hello Vue!'}
        }
}
Vue.createApp(HelloVueApp).mount('#hello-vue')

HelloVueApp 是一个包含 data 的JavaScript对象

data 函数也返回一个对象，其中包含 message 属性，其值为 Hello Vue!

Vue框架的作用代码：

Vue.createApp(HelloVueApp).mount('#hello-vue')

1）Vue.createApp()：Vue3创建应用实例的方法，接受一个对象（如 HelloVueApp）并返回一个Vue3应用实例

2）mount()：应用实例的方法，用于将这个应用实例挂载到指定的 DOM 元素上

Vue.createApp(HelloVueApp).mount('#hello-vue')会创建一个HelloVueApp对象配置的Vue应用实例，然后把它挂载.mount()到指定位置 <div id="hello-vue"></div> 中生效，内容{{ message }}对应了应用实例中的message，所以最终显示效果就是应用实例中的 message 的具体值

Tags：

猜你喜欢

最近发表
标签列表