vue基礎內容{通信,註冊,路由,組件}
ES6常用語法
-- 變量
-- var 變量提升
-- let {}
-- const 常量
-- 模板字符串
-- ``
-- ${}
-- 函數
-- 箭頭函數
-- this
-- 普通函數取決於函數最近的調用者
-- 箭頭函數取決於當前上下文環境
-- 數據的解構
-- 註意語法
-- 類
-- class 定義類
-- extends 繼承
-- constructor 構造方法
-- 子類是沒有this的 用super()
-- export import
-- export {} ---》 import {} from .....
-- export default 一個文件只能有一個 import xxxx from xx
Vue的常用指令
-- v-text innerText
-- v-html innerHtml
-- v-if appendChlid
-- v-for 循環
-- v-show display
-- v-bind 綁定屬性 : <div :class="{"類名"： is_show}"></div>
-- v-on 綁定事件的 所有的js的事件
-- v-model 數據雙向綁定
-- input
-- select
-- textarea
-- 指令修飾符
-- .lazy 不要實時綁定 懶
-- .trim 去空格
-- .number 轉換成數字
-- 自定義的指令
-- Vue.directive("指令名稱"，function(el, binding){
el: 綁定指令的標簽
binding: 指令的所有信息
})
-- 計算屬性 {{num}}
-- computed: {
num: function(){
return xxxx
}
}
-- 放入緩存 只有數據發生改變的時候才會重新計算
-- 獲取DOM
-- 給標簽添加ref屬性
<div ref="my_box"></div>
-- this.$refs.my_box
-- 數據監聽
-- watch: {
my_data: {
handler: function(val, oldVal){
val 新的值
oldVal 舊的值
註意 數組跟對象新舊值是一樣的
}
deep: true
}
}
-- 數組
-- 長度改變的時候才會被監聽到
-- 改變數組的值的時候深度監聽監聽不到
-- app.$set(array, index, value)
-- 對象
-- 深度監聽是可以監聽到的
Vue的組件
-- 組件的註冊
-- 全局註冊
Vue.component("組件名稱"，{
template只能識別一個作用域塊
template: `<div></div>`,
data(){
return {
xxx: xxx
}
},
methods: {},
.....
})
<組件名稱></組件名稱>
-- 局部註冊
-- let my_com = {
template只能識別一個作用域塊
template: `<div></div>`,
data(){
return {
xxx: xxx
}
},
methods: {},
.....
}
-- 註冊在Vue的實例化對象裏
const app = new Vue({
el: "#app",
components: {
my_com: my_com
}
})
-- <my_com></my_com>
-- 子組件的註冊
-- 在父組件裏寫compontents: {
類比局部組件註冊
}
-- 在父組件的template裏顯示子組件對應的標簽
<clild></child>
-- 組件之間的通信
-- 父子通信
-- 給父組件裏的子組件綁定屬性
<child :屬性名稱="父親向兒子說的話"></child>
-- 子組件通過props拿到數據
props:[屬性名稱]
-- 子父通信
-- 子組件要提交事件
this.$emit("事件名稱", 兒子向父親說的話)
-- 給父組件裏的子組件綁定事件
<child @事件名稱="自己處理的事件名稱"></child>
methods: {
自己處理的事件名稱: function(){}
}
-- 非父子通信
-- 定義一個中間調度器
const Event = new Vue()
-- 其中一個組件向中間調度器提交事件
Event.$emit("事件名稱", data)
-- 另一個組件監聽調度器的事件
mounted(){
Event.$on("事件名稱", function(data){
do something
註意this
})
}
-- 混合
-- 作用代碼的復用
-- let base = {
可復用的代碼塊
}
-- mixins: [base]
-- 可以重寫base裏的內容
-- 插槽
-- <my_com></my_com>不支持標簽裏寫內容
-- slot
-- 命名的插槽
<slot name="xxx"></slot>
<div slot="xxx"></div>
Vue的路由
-- 路由的註冊
-- let url = [
{
path: "/",
component: {
template: ``
},
},
{
path: "/course",
component: {
template: ``
},
}
]
-- let router = new VueRouter({
routes: url
})
-- const app = new Vue({
el: "#app",
router: router
})
-- <router-link to="/">首頁</router-link>
<router-link to="/course">課程頁面</router-link>
<router-view></router-view>
-- 子路由
-- let url = [
{
path: "/",
component: {
template: `寫子路由的router-link以及router-view
<router-link to=""></router-link>
`
},
children: [
{
path: "/user",
component: {
template: ``
}
}
]
}
]
-- 命名的路由
-- let url = [
{
path: "/",
name: "home",
component: {
template: ``
},
},
{
path: "/course",
component: {
template: ``
},
}
]
-- let router = new VueRouter({
routes: url,
去掉路由上的#
mode: "history"
})
-- const app = new Vue({
el: "#app",
router: router
})
-- <router-link :to="{name: ‘home‘}">首頁</router-link>
<router-link to="/course">課程頁面</router-link>
<router-view></router-view>
-- 路由的參數
-- -- let url = [
{
path: "/",
component: {
template: ``
},
},
{
path: "/course/:course_name",
component: {
template: ``
},
}
]
-- this.$route
路由的所有信息
fullpath
path
query ？後的數據
params 是路由裏的變量
meta
-- this.$router
VueRouter實例化對象
-- 手動路由
-- this.$router.push("/")
-- this.$router.push({name: "xxx", params: {key:value}, query: {key:value}})
-- 路由的鉤子
-- router.beforeEach(function(to, from, next){
to 你要去哪
from 哪裏來的
next 下一步幹嘛
})
-- router.afterEach(function(to, from){})
-- 命名的路由視圖
-- 當一個路由對應多個組件的時候
-- <router-view name="對應組件的名稱"></router-view>
vue基礎內容{通信,註冊,路由,組件}