vue的执行顺序(局部组件和全局组件)

最新推荐文章于 2024-05-17 17:50:07 发布

前端交互仔

最新推荐文章于 2024-05-17 17:50:07 发布

阅读量686

点赞数 1

分类专栏：前端(HTML 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/liulang68/article/details/120149548

版权

前端(HTML 专栏收录该内容

235 篇文章 3 订阅

订阅专栏

在这里插入图片描述

<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>default</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="aaa"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#aaa')

<template>
  <div id="aaa">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'aaa',
  components: {
    HelloWorld
  }
}
</script>

<style>
#aaa {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>


<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述创建一个app的组件，然后把他挂载到#app上。

在这里插入图片描述

在这里插入图片描述
不是一行的情况

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <button-counter></button-counter>
</div>

<script>
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    </button>`
})
app.mount('#app')
</script>
</body>
</html>

在这里插入图片描述

前端交互仔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue的执行顺序(局部组件和全局组件)

<!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"> <link rel=".
复制链接

扫一扫