Vue專案開發基礎知識

2022-09-08 07:48:08 字數 1742 閱讀 1593

#專案初始化

1.安裝vue-cli腳手架工具

npm install -g vue-cli

2.初始化專案

vue init webpack my-project

3.進入專案

cd my-project

4.安裝依賴

npm install

5.執行專案

npm run dev

#專案目錄結構

index.html專案根檢視

package.json配置檔案

.postcssrc.js postcss配置檔案

.gitignore 用git上傳時忽略的檔案

.editorconfig ide配置檔案

.babelrc

static 靜態檔案目錄

#模板語法

mustache模板(雙花括號的模板語法)

表現形式:}

例子:}}}

}注意:只能寫單行語句,並且不是作用在html的屬性上邊

#vue元件包括三個部分:

1.template: 檢視

2.script: 邏輯

3.style: 樣式

#vue的基本指令

1.v-html: 渲染文字

和雙花括號的區別:雙花括號只是變數,v-html必須依賴於標籤

2.v-text: 渲染文字

和v-html的區別: v-html可以解析html v-text不能

3.v-bind: 繫結屬性 我要888

想要變成活的屬性都可以使用v-bind繫結。

#條件渲染

1.v-if

2.v-else

3.v-show

v-if與v-show的區別

v-if只有在條件為true時才渲染,v-show不管什麼時候都渲染,只是進行簡單的cdd切換。v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在執行時條件很少改變,則使用 v-if 較好。

#列表渲染

1.v-for:是根據陣列的選項列表進行渲染

}-}}

}#事件監聽

v-on:(methods,引數,事件修飾符)

事件修飾符:stop(阻止事件冒泡),prevent(阻止預設事件),once(只生效一次)

captrue(新增事件監聽是採用事件捕獲模式,即內部元素觸發的事件先在此處理,然後才交由內部元素自身處理)

self(當事件源是當前元素自身時觸發函式)

enter

#陣列更新檢測

變異方法:引起檢視的變化push(),pop(),shift(),unshift(),splice(),sort(),reverse()

替換方法:不會引起檢視的變化,filter(), concat() 和 slice()

#計算屬性和觀察者

computed

computed和methods的區別:計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的 相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有發生改變,多次訪問 reversedmessage 計算屬性會立即返回之前的計算結果,而不必再次執行函式。

#表單輸入繫結

v-model: 實現資料雙向繫結

watch監聽資料

修飾符:lazy,number,trim

#class與style繫結

哈哈

Vue基礎知識

vue.js的基本使用 1.引入vue.js 1 cdn 3 模組化安裝 npm i vue d s cnpm i vue yarn add vue 2.初始化vue 1 必須有乙個html容器,決定vue.js的作用範圍 2 初始化 new vue options data 資料 3 資料繫結 宣...

VUE基礎知識

1 全域性定義 每個元件的命名不可重複 2 字串模板 缺乏語法高亮,可讀性較差 1 屬性 屬性書寫方式 props type name list 屬性時單向資料流,不可在子元件更改父元件傳遞的值,可通過onchange方法修改。2 事件 3 插槽 插槽是元件的一塊html模板,其顯示與否由父元件決定...

Vue基礎知識

資料雙向繫結 指令帶有v 的,表示vue特有的屬性,他們會在渲染的dom上,應用特殊的響應式行為 或者 click me v model 會忽略所有表單元素的 value checked selected attribute 的初始值 而總是將 vue 例項的資料作為資料 你應該通過 j ascri...