vue2新人入門

2021-08-20 20:36:11 字數 1094 閱讀 4253

預設對webpack,sass,npm有一定的了解。

一些vue指令不會說,反正官方文件有,我也懶得抄。

一、超級基礎部分

1.全域性安裝: npm install –globall vue-cli(已全域性安裝了的不必安裝)

2.建立乙個基於webpack的模板專案:vue init webpack 《你的專案名稱》

3.希望樣式表僅僅只作用於當前元件,使用< style scoped >

4.vue的屬性繫結語法是v-bind:class實現(省略語法:class)

5.路由導航:vue-router。

>

//渲染路徑匹配的元件,可以內嵌自己的

>

//支援使用者在具有路由功能的應用中導航

在路由中傳參,一般是在引數名之前加上:,然後將引數寫在路由的path內 ]

這樣之後,就能夠用< router-link >中加入乙個params的屬性來指定具體的引數值

="}"

>

>

若是有詳情頁面,那怎麼把:id在讀取出來呢?即使用$router.params,他是獲取指定引數值的屬性

export default

}

(在路由中,從name/1到name/2跳轉,原來的元件例項會被復用。也意味著元件的生命週期鉤子不會再被呼叫,比如created,在頁面的第二次呼叫時將失效,所以想要復用元件時,就必須對引數的變化進行響應,達到此目的需要用watch物件,在watch物件中新增對$router的追蹤函式:

export default

}}

路由巢狀,子路由如下:

routes: [

]}]

6.dom元素繫結,ref=「…」,通過this.$refs來獲取。

7.vue2中約定引入元件名採用大駝峰命名,所以引入的元件在< template >內採用小寫

如:fristname=>tmpelate中引用時:< first-name>

Vue2入門路線及資源

前言 最近在學習vue,感覺對vue vuex vue router算是小小地入門了。想起前期最苦惱也是最費時的事,就是在每個階段找到合適當前水平的資源或者demo,所以本文我根據我自己的體驗,整理了一些資源,每個階段跨度都較平緩,應該能比較順暢地入門。以下鏈結後標明vue1的,表示博文及其demo...

通俗易懂 快速入門Vue 2

vm為乙個例項,當執行vm.destory 就會銷毀這個例項。這樣通過修改資料vm.data.message 123 頁面不會有相應的變化 或 或 var vm new vue var vm new vue computed methods watch lastname function compu...

Vue2學習筆記

v cloak v text v html v bind v on click.stop click.prevent click.capture click.self click.once v model.lazy trim number 或者通過vue的watch監聽來處理watch b func...