Detailed explanation of the three writing forms of vue components-JS Tutorial-php.cn

Detailed explanation of the three writing forms of vue components

小云云

Release： 2017-12-12 14:59:24

Original

2022 people have browsed it

This article mainly introduces the three writing forms of vue components in detail, which has certain reference value. Interested friends can refer to it, hoping to help everyone.

The first oneUse script tag

<!DOCTYPE html>
<html>
  <body>
    <p id="app">
      <my-component></my-component>
    </p>

    <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->

    <script type="text/x-template" id="myComponent">//注意 type 和id。
      <p>This is a component!</p>
    </script>
  </body>
  <script src="js/vue.js"></script>
  <script>
    //全局注册组件
    Vue.component(&#39;my-component&#39;,{
      template: &#39;#myComponent&#39;
    })

    new Vue({
      el: &#39;#app&#39;
    })

  </script>
</html>

Copy after login

The second oneUse template tag

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <p id="app">
      <my-component></my-component>
    </p>

    <template id="myComponent">
      <p>This is a component!</p>
    </template>
  </body>
  <script src="js/vue.js"></script>
  <script>

    Vue.component(&#39;my-component&#39;,{
      template: &#39;#myComponent&#39;
    })

    new Vue({
      el: &#39;#app&#39;
    })

  </script>
</html>

Copy after login

##The third typeSingle file component

This kind This method is commonly used in Vue single-page applications. For details, please see the official website: https://cn.vuejs.org/v2/guide/single-file-components.html

Create a file with the .vue suffix, component Hello.vue, and place it in the components file In the folder

<template>
 <p class="hello">
  <h1>{{ msg }}</h1>
 </p>
</template>

<script>
export default {
 name: &#39;hello&#39;,
 data () {
  return {
   msg: &#39;欢迎！&#39;
  }
 }
}
</script>

Copy after login

app.vue

<!-- 展示模板 -->
<template>
 <p id="app">
  <img src="./assets/logo.png">
  <hello></hello>
 </p>
</template>

<script>
// 导入组件
import Hello from &#39;./components/Hello&#39;

export default {
 name: &#39;app&#39;,
 components: {
  Hello
 }
}
</script>
<!-- 样式代码 -->
<style>
#app {
 font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

Copy after login

Related recommendations:

Vue component option props

How to publish vue components to npm

vue2.0 two-way data binding and form bootstrap+vue component

The above is the detailed content of Detailed explanation of the three writing forms of vue components. For more information, please follow other related articles on the PHP Chinese website!