#專案初始化
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...