初步使用VUE

2022-04-14 11:11:26 字數 1768 閱讀 7113

基於個人的理解

vue是乙個前端框架,最基本的用途就是新增在html元素中特定的指令,把dom元素的屬性和js中的資料繫結,這樣省略了很多js與介面顯示的資料互動**。

例如:

就關聯了vue中的資料hasprevpage和方法toprev

vue會檢測資料的變動,並且週期性的把變動反映在頁面上。

最簡單的使用,就是在每個頁面定義乙個vue例項var vm = new vue();,然而稍微大型的應用一般都是整體定義乙個例項,各個頁面通過子模組、路由、store等關聯起來,構成乙個應用。

定義乙個js模組(檔案),檔案中匯出的內容,也是乙個vue中的配置屬性,不同的是,匯出屬性中,有乙個template屬性定義乙個html模板,這樣乙個模組,可以被vue復用。

vue中可以全域性以用,或者在乙個頁面/子模組中引用其他模組,引用後該模組可以作為標籤,直接嵌入在html中。

例如乙個模組

在引入後,可以被嵌入在其他模組中

import helloword from 'helloworld.js'

vue.component("hello-world", helloword);

vue-router是vue的乙個擴充套件元件,用於在多個模組間進行路由。

import vue from 'vue'

import vuerouter from 'vue-router'

vue.use(vuerouter)

const routes = [

, , ]

const router = new vuerouter()

export default router

$route會被注入到每個vue例項中,可以通過他提供的各種方法進行頁面跳轉,如返回首頁:

this.$router.replace("/");
vue的乙個擴充套件元件

多頁面跳轉,傳值是普遍需求,store元件用來統籌規劃資料,按模組配置不同資料,提供了4類資料操作物件:

例如定義乙個store:

export default new vuex.store(,

mutations:

},actions: ,

//子模組

modules: ,

getters:

})

類似route,store也會註冊全域性變數$store,供其他模組引用

computed: ,

cartitem()

}

這是用於搭建vue專案腳手架的工具,通過npm安裝。

npm install -g @vue/cli
通過vue create建立專案

vue create hello-world
通過vue add新增模組

vue add element-ui
vue-cli配置基於webpack,但是進行了一層封裝,說真的封裝的不怎麼友好。

基本配置可以增加vue.config.js配置。

vue初步介紹

摘要 vue.js 讀音類似於view 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,vue 採用自底向上增量開發的設計。vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。vue.js 讀音類似於view 是一套構建使用者介面的漸進式框架。與其他重量級框架不...

vue初步介紹

vue.js 讀音類似於view 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,vue 採用自底向上增量開發的設計。vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與單檔案元件和 vue 生態系統支援的庫結合使用時,vue 也完全能夠為複雜的單...

vue 初步了解provide inject

provider inject 簡單的來說就是在父元件中通過provider來提供變數,然後在子元件中通過inject來注入變數。需要注意的是 provide inject這對選項需要一起使用,以允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。...