登入a>
href="
" @click.prevent
="flag=false"
>
註冊a>
v-if
="flag"
>
login
>
v-else
>
register
>
div>
>
// 建立登入的元件
vue.
component
("login",)
// 建立註冊的元件
vue.
component
("register",)
var vm =
newvue(,
methods:})
script
>
body
>
html
>
除了上面介紹的這種方式以外我們還可以通過vue元件中給我們提供的乙個component標籤來實現
vue提供了 component 來展示對應名稱的元件,component 是乙個佔位符, :is 屬性,可以用來指定要展示的元件的名稱
登入a>
href="
" @click.prevent
="comname='register'
">
註冊a>
:is=
"comname"
>
component
>
div>
>
// 建立登入的元件
vue.
component
("login",)
// 建立註冊的元件
vue.
component
("register",)
var vm =
newvue(,
methods:})
script
>
body
>
html
>
VUE 元件(二)元件通訊
元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時,就要用到自定義事件 子元件用 emit 來觸發事件,父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果,在改變元件data中的count後,通過 emit 將值傳給父元件,父元件用v o...
Vue入門(2)元件
元件是可復用的 vue 例項,且帶有乙個名字。元件是vue.js最強大的功能之一。元件可以擴充套件html元素,封裝可重用的 在較高層面上,元件是自定義的元素,vue.js的編譯器為它新增特殊功能。在有些情況下,元件也可以是原生html元素的形式,以is特性擴充套件。1.區域性元件的建立 div 區...
Vue入門3 元件
1 區域性元件 元件的定義模式可以直接在程式裡面採用html字串的方式進行定義,先進行乙個區域性元件的定義,所謂區域性元件指的是針對於某個vue物件定義的。js el msgdiv components html 執行結果 2 全域性元件 以上所定義的元件只能夠在當前vue物件使用,所以按照習慣性的...