1. component元素
Vue提供了component,來展示對應名稱的組件
component是一個占位符,:is 屬性,可以用來指定要展示的組件名稱
>實現登錄注冊切換
```
<div id="app">
//點擊改變組件調用的名稱
<a href="" @click.prevent="comName='login'">登錄</a>
<a href="" @click.prevent="comName='register'">注冊</a>
<component :is="comName"></component>
</div>
```
```
//組件名稱是字符串
Vue.component('login', {
template: '<h3>登錄組件</h3>'
})
Vue.component('register', {
template: '<h3>注冊組件</h3>'
})
var vm = new Vue({
el: '#app',
data: {
comName: 'login'
}
})
```
2. 當前學習的Vue標簽
`component` `template` `transition` `transitionGroup`
- 0. MVC和MVVM
- 1. v-model無法實時更新的解決辦法
- 1. Vue 指令
- 1. v-cloak&v-text&v-html
- 2. v-bind
- 3. v-model
- 7. v-for指令的幾種使用方式
- 8. v-if和v-show的使用
- 2. 事件修飾符
- 3. 通過屬性設置樣式
- 1. 通過屬性綁定設置元素class
- 2. 通過屬性綁定設置元素style
- 4. 自定義指令
- 11. 自定義全局指令
- 12. 自定義私有指令
- 5. 過濾器
- 6. 鍵盤指令
- 7. 生命周期
- 8. vue-resource
- 9. 動畫
- 1. 使用過渡類名實現動畫
- 2. 使用animate.css實現動畫
- 3. 鉤子函數實現小球半場動畫
- 10. 組件
- 1. 全局組件的創建方式
- 2. 私有組件的創建方式
- 3. 組件中的data和methods
- 4. component元素
- 5. 組件配合transition元素實現動畫
- 6. 父組件傳參傳方法
- 11. 路由
- 1. 什么是路由
- 2. vue-router的使用
- 3. 使用router-link&query方式傳遞參數
- 4. 使用param傳值
- 5. 使用children屬性實現路由嵌套
- 6. router-view之間獲取父級data
- 7. 實現路由跳轉的幾種方式
- 12. 設置緩存
- 13. $ref 操作DOM&獲取自定義屬性
- 14. 初始化一個項目
- 15. 使用并封裝一個axios方法
- 17. vuex
- 18. watch 監聽 data數據
- 19. keep alive 緩存路由組件
- vue效果實現
- 1. 實現頂部根據滑動漸隱漸現
- 2. 制作一個動畫包裹組件
- 20. vue 中的數據類操作
- 第三方工具&ui
- 1. vant-ui
- 1. 上拉加載更多
- 2. 使用圖片預加載
- 2. better-scroll
- 1. 實現上下滑動效果
- 2. 實現兩欄式點擊滑動跳轉
- vue3
- compositionApi
- 2. ref 和 reactive
- 4. watch
- 5. watchEffect
- 7.使用ref操作dom
- effect副作用
- 1. 新特性
- 3. 生命周期
- 6.定義props
- 實現自定義組件v-model
- vue面試題
- 1.對mvvm的理解
- 2.vue2和vue3響應式數據的理解
- 3.vue中如何檢測數組的變化
- 4.vue中如何進行依賴收集
- 5.如何理解vue中的模板編譯原理
- 6.vue生命周期以及原理
- 7.vue組件data為什么必須是個函數
- 8.vue-router原理
- 9.vue.mixin原理
- 10.$nextTick原理
- 11.computed和watch的區別
- vue SSR服務端渲染
- 1.什么是服務端渲染
- 2.快速創建服務端渲染