有關vue組件的書寫方式有哪些？-js教程-PHP中文網

首頁

web前端

js教程

有關vue組件的書寫方式有哪些？

亚连

Jun 23, 2018 pm 03:43 PM

vue組件

這篇文章主要為大家詳細介紹了3種vue組件的書寫形式，具有一定的參考價值，感興趣的小伙伴們可以參考一下

#本文實例為大家分享了vue組件的書寫形式，供大家參考，具體內容如下

第一種使用script標籤

<!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>

#第二種使用template標籤

<!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>

第三種單一檔案元件

這種方法常用在vue單頁應用程式中。詳情請見官網：https://cn.vuejs.org/v2/guide/single-file-components.html

建立.vue後綴的檔案,元件Hello.vue，放到components資料夾中

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

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

app.vue

<!-- 展示模板 -->
<template>
 <p id="app">
  <img  src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"   alt="有關vue組件的書寫方式有哪些？" >
  <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>

上面是我整理給大家的，希望未來會對大家有幫助。

在JavaScript中如何實現全選取消效果

#使用JavaScript如何實現左側選單效果

使用vue如何實作token驗證

使用Javascript如何實作自訂事件機制

以上是有關vue組件的書寫方式有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn