vue2 0 router基本語法總結

2021-08-20 06:55:47 字數 1492 閱讀 1605

vue基本腳手架

常用的方法

methods: {} => 方法處理

mounted(){} => dom 載入前之前執行

computed: {} => 計算屬性

components: {} => 元件註冊

filters:{} => 過濾器註冊

watch:{} =>資料監聽 不常用

data:{} =>vue 將會遞迴將 data 的屬性轉換為 getter/setter

props {} =>可以是陣列或物件,用於接收來自父元件的資料

指令

v-for => v-for="item in data"

}v-model

=> 資料繫結, 資料同步用

v-bind => 資料繫結用 簡寫(:sryle="")

v-on => 資料監聽,繫結方法 簡寫(@clack="")

v-if

=> 資料判斷 true/false

v-show =>樣式控制顯隱 true/false

v-html => 遍歷html 標籤的一種形式

ref => ref="dom" 獲取dom this.$refs.dom

路由

路由的註冊

import vue from 'vue';

import router from 'vue-router';

vue.use(router);

export default new router(, ]

},, ,]})

多級頁面在此中在新增一次

路由的傳慘

隱藏key連線形式傳慘

var url = "/goods/"+"引數";

this.$router.push(url);

路由註冊中心 path: '/goods/id', 按此配置

接收引數

this.$route.params.id

get形式傳慘

this.$router.push(

});接收引數

this.$route.query.paytype;

元件的傳慘

//元件傳參

:data="list"

子元件觸發父子的事件

@gat="orderlist"

list:

orderlist()

//元件引用

import vmenu from '../../common/menu'

//元件祖冊

components:

子元件//元件接收引數

props: ,

官方文件

參考文獻:

vue2 0 router和 route的區別

在vue2.0裡頁面引數是 this.route.query或者 this.route.params 接收router link傳的引數。在路由跳轉的時候除了用router link標籤以外需要在script標籤在事件裡面跳轉,所以有個方法就是在script標籤裡面寫this.router.push...

vue2 0 router和 route的區別

做專案的時候發現傳引數是通過this.route.query或者this.route.params接收 router link 傳的引數。方式1 使用 a 標籤 跳轉 或者是 router link 方式2 使用 window.location.href 的形式,叫做程式設計式導航 簡單說就是寫js...

vue路由router的基本使用

路由 路由是乙個js功能模組,用於解決spa專案元件切換顯示問題的,本身對元件切換的各個底層技術有做封裝,是更成熟元件切換解決方案,使用起來更高階 方便。路由是開發spa專案的必備技能。路由封裝的元素有 路由實現 在專案中安裝路由有兩種方式 兩種方式本質完全一樣 vuecli 腳手架 建立專案的時候...