2019獨角獸企業重金招聘Python工程師標準>>>

第一個vue項目

????????1.創建
?? ??? ??? ?vue init webpack app01
?? ??? ?2.安裝依賴
?? ??? ??? ?cd app01
?? ??? ??? ?npm install
?? ??? ?3.構建
?? ??? ??? ?npm run dev ?啟動本機的8080端口
?? ??? ??? ?或
?? ??? ??? ?npm run start ?啟動本機的8080端口
?? ??? ?4.打包
?? ??? ??? ?npm run build

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

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

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

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

?? ??? ??? ?結論：vue中的methods里面的函數，生命周期鉤子函數中的this指向當前vue實例
?? ??? ??? ??? ? ?vue實例可以直接訪問data中定義的變量和methods中定義的函數

轉載于:https://my.oschina.net/u/3759656/blog/2247187

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。