vue腳手架vue-cli的使用
根元件給子元件傳資料，利用propers
通過v-bind(:)動態屬性傳值
id=「son」
>
>
我是兒子元件,},
}>
template
>
id>
>
我是父元件,}h1
>
:msg
=「msg」
>
>
div>
var vm=
newvue(,
components:}}
);
兒子元件通過emi
t方法觸
發自定義
事件，該
方法的第
乙個引數
是自定義
事件的名
字。第二
個引數是
給父元件
傳遞的數
據。子組
件的標籤
上用@自
定義事件
名字，加
上父元件
提供的函
數即可。
父元件：
show
子元件:
gift
,@gi
ft=「
show
(emit方法觸發自定義事件，該方法的第乙個引數是自定義事件的名字。第二個引數是給父元件傳遞的資料。 子元件的標籤上用@自定義事件名字，加上父元件提供的函式即可。父元件：show 子元件:gift, @gift=「show(
emit方法
觸發自定
義事件，
該方法的
第乙個參
數是自定
義事件的
名字。第
二個引數
是給父組
件傳遞的
資料。子
元件的標
簽上用@
自定義事
件名字，
加上父組
件提供的
函式即可
。父元件
：sho
w子元件
:gif
t,@g
ift=
「sho
w(event)」
id=「son2」
>
>
我是兒子元件
@click:send($event)
>
單擊給父元件傳值button
>
>
template
>
id>
>
我是父元件,}h1
>
//gift 為自定義事件。
:msg
=「msg」
@gift
=「show($event)」
>
>
div>
var vm=
newvue(,
methods:
}components:},
methods:}}
}});
id=「son1」
>
>
我是兒子元件1,}
>
template
>
id=「son2」
>
>
我是兒子元件2,}
@click
=「send」
>
單擊我給子元件1送資料button
>
>
template
>
id>
>
我是父元件h1
>
>
son1
>
>
son2
>
div>
//前端工程師，**管道
//將vue的例項作為原型物件的數值
vue.prototype.$gift=
newvue
;var vm=
newvue(,
methods:
}components:)}
,data()
}}son2:},
methods:}}
}});
任意的建構函式都有乙個prototype 的屬性。指向乙個空的物件。
任意乙個示例都有乙個—proto屬性可以找原型物件要方法。
將vue的乙個例項作為原型物件的屬性值。
這樣不管是根元件還是子元件都可以利用原型物件的屬性。
這樣這個原型物件就類似於管道；
可以快速生成vue專案，很多常用的vue專案的依賴自動安裝；
vue官網-工具-cli工具
1.安裝vue腳手架工具（全域性安裝）
用node安裝，npm install -g -vue-cli
可以在任意目錄下使用。
-g:代表這個工具可以在cmd命令列任意的目錄下使用
2.檢測vue -v
3.使用腳手架建立vue專案
新建目錄
進入目錄
vue init webpack myproject
4.npm run dev
有問題的話刪掉重安裝
npm -install
5.npm run dev程式就可以直接跑在8080埠上。
伺服器自帶。
6.127.0.0.1:8080
come視窗不能關。
分為三部分，
書寫css的地方
記得在vscode裡安裝vue的外掛程式；
書寫html的地方
書寫js的地方
模版自動繫結 不用寫template;
寫data()
}methods:
}
Vue的高階語法
一。元件 把頁面中通用的部分做成元件，減低開發成本 先定義組 再註冊元件 再元件通訊 定義元件 語法 注意元件中data是乙個函式 定義元件 const 元件物件 元件屬性 props 計算屬性 computed 方法 methods 監控屬性 watch 生命週期鉤子 created 使用 擴充套...
如何優雅的使用vue？不可不知的vue高階實戰技巧
結構清晰整潔，可讀性高。便於維護。將高頻元件放在同乙個目錄下，在該目錄下增加乙個global.js檔案，在main.js中引入 import vue from vue 獲取指定目錄下的指定格式的檔案 let requirecomps require.context false,vue 迴圈檔案列表，...
Vue高階4 route基本使用
路由 vue router 就是vue框架裡只有乙個html，但是乙個 不可能只有乙個頁面，或者好多個視窗，所以就用vue router來實現用於整合頁面。官網 vue router的基本使用 main.js中 import vuerouter from vue router vue.use vue...