首頁 > web前端 > js教程 > 主體

Vue.js元件的使用方法

php中世界最好的语言
發布: 2018-05-11 11:37:04
原創
2474 人瀏覽過

這次帶給大家Vue.js元件的使用方法,Vue.js元件所使用的注意事項有哪些,以下就是實戰案例,一起來看一下。

  1. 所有Vue元件同時也都是Vue實例,分為全域元件和局部元件,註冊方式如下。

<p id="app">
    <my-component></my-component>
    <child-component></child-component></p><p id="example">
    <my-component></my-component>
    <!--在#app内局部注册的组件在此无法被渲染 -->
    <child-component></child-component></p><script src="https://cdn.jsdelivr.net/npm/vue"></script><script>Vue.component('my-component', { //全局组件,建议使用短横线分隔式命名组件  template: '<p>A custom component!</p>'})var Child = {
    template: '<p>A child component!</p>'}var app = new Vue({
    el: '#app',    
    components: { //局部组件,仅可在父作用域#app中使用
    'child-component':Child
    }  
})var example = new Vue({
    el:'#example'})</script>
登入後複製

  注意:

  a. 如

    、和
  • 等父子元素有限制的元素,不能直接使用元件模板,可由is屬性來指定,如。若使用來自下列來源之一的字串範本(允許嵌入表達式的字串字面量),則沒有這些限制:

      1) 

    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板