2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

第一個vue項目

????????1.創(chuàng)建
?? ??? ??? ?vue init webpack app01
?? ??? ?2.安裝依賴
?? ??? ??? ?cd app01
?? ??? ??? ?npm install
?? ??? ?3.構(gòu)建
?? ??? ??? ?npm run dev ?啟動本機(jī)的8080端口
?? ??? ??? ?或
?? ??? ??? ?npm run start ?啟動本機(jī)的8080端口
?? ??? ?4.打包
?? ??? ??? ?npm run build

vue工程項目結(jié)構(gòu)
?? ??? ?app01
?? ??? ??? ?build ?? ?webpack配置文件
?? ??? ??? ?config?? ?當(dāng)前項目的配置文件
?? ??? ??? ?dist?? ?打包后的目標(biāo)目錄
?? ??? ??? ?node-modules?? ?第三方模塊存儲目錄
?? ??? ??? ?src?? ?源碼目錄
?? ??? ??? ?static?? ?
?? ??? ??? ?index.html?? ?首頁
?? ??? ??? ?package.json node項目核心文件
?? ??? ??? ?.babelrc?? ?babel配置文件
?? ??? ??? ?.gitignore?? ?不受git管理的文件如：dist node_modules

vue實(shí)例
?? ??? ??? ?new Vue({
?? ??? ??? ??? ?data:{
?? ??? ??? ??? ??? ?a:1,
?? ??? ??? ??? ??? ?b:2
?? ??? ??? ??? ?},
?? ??? ??? ??? ?methods:{
?? ??? ??? ??? ??? ?...?
?? ??? ??? ??? ??? ?//集成
?? ??? ??? ??? ??? ?foo(){
?? ??? ??? ??? ??? ??? ?this //this指向vue實(shí)例
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?},
?? ??? ??? ??? ?components:{}
?? ??? ??? ??? ?//生命周期鉤子函數(shù)
?? ??? ??? ??? ?beforeMount(){
?? ??? ??? ??? ??? ?this //this也是指向vue實(shí)例
?? ??? ??? ??? ??? ?$.get('',() => {
?? ??? ??? ??? ??? ??? ?this //箭頭函數(shù)中的this指向外層函數(shù)的this
?? ??? ??? ??? ??? ??? ?//可以在這個回調(diào)函數(shù)中直接訪問a
?? ??? ??? ??? ??? ??? ?this.a
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?},
?? ??? ??? ??? ?mounted(){

?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ??? ??? ?每個.vue文件中都有一個vue實(shí)例
?? ??? ??? ?//約定data為函數(shù)，返回一個對象
?? ??? ??? ?export default {
?? ??? ??? ??? ?data(){
?? ??? ??? ??? ??? ?return {

?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}

?? ??? ??? ?結(jié)論：vue中的methods里面的函數(shù)，生命周期鉤子函數(shù)中的this指向當(dāng)前vue實(shí)例
?? ??? ??? ??? ? ?vue實(shí)例可以直接訪問data中定義的變量和methods中定義的函數(shù)

轉(zhuǎn)載于:https://my.oschina.net/u/3759656/blog/2247187

總結(jié)

以上是生活随笔為你收集整理的vue学习之路.02的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。