有沒有遇到一種尷尬的情況?就是在已有的html專案中嵌入vue,不需要專案構建工具,純js/css/html
廢話不多說,直接上**:
index.html
包含兩個元件(main/about)
toabout1
}
+}todetail
index.html的js部分
1.匯入相關的類庫
2.vue/vuex/vuerouter在js中使用vuerouter:當引入了vue-router.min.js後,可以在js中直接 new vuerouter()的方式建立路由,然後掛載到vm物件中即可。routes中元件的建立見下文見**:
// routes包含元件內容,和vue專案的routes一樣即可
var routes = [,
}]var router = new vuerouter()
vuex:不是所有的專案都需要vuex的,況且本來就是在已存在的html中嵌入vue,可以使用自定義的全域性量代替vuex的作用。所以此處看專案需要了。
見**:
// 建立store物件
var store = new vuex.store(,
mutations: }})
// 全域性量持有store,方便再html**中使用
vuestore = store
此處使用vuex是完全參考vue文件的,詳情可移步傳送門
vue:建立vue例項,將上面建立的router/store掛載到vue例項上
見**:
var vm = new vue(
},methods: ,
created: function()
})
3.建立元件main元件,見**:
var main =
},methods: )}},
created: function() ,
template: $('#main').html() // 獲取html模板
}
about元件,見**
var about =
},methods: ,傳參時用router.push(),***為傳遞的visid引數
*/alert(this.$route.params.visid);
},increment: function()
},created: function() ,
template: $('#about').html()
}
至此,乙個index.html頁面巢狀vue的需求就基本做好了,具有router和vuex功能。2020 12 24更新關於template模板的引用方式
這裡上一張官方解釋的截圖:
使用:
var detail = ,
created: function() ,
methods: })}
},template: '#temp_detail' // 對應script中的id屬性
}
如何在VirtualBox裡為已有的硬碟修改大小?
這些天,由於課程需要,安裝wince開發環境。由於本人並不想在實體機上安裝xp,所以選擇在虛擬機器中安裝。虛擬機器選擇的是virtualbox,這是一款我很喜歡的軟體。在搭建的過程中,由於事先安排的20g大小不夠了,所以需要擴大硬碟的大小。以下是主要步驟 開啟cmd,進入到具體虛擬機器映象的存放位置...
如何在專案中做出亮點
之前在群裡參加活動的同學,有不少說在小公司,被業務需求壓著。既然大家都說在做業務,那麼,正看到這裡的你,能不能5分鐘說明白,你負責的業務是什麼?這個問題我在活動群的github issue活動中,帶有業務理解標籤的題目裡經常會問到,可是大部分同學都沒有說到位,甚至答非所問。這裡談談我個人對業務的理解...
如何在Vue Element專案中配置國際化
vue i18n 1 建立i18n資料夾 在專案根目錄,即src目錄項建立i18n目錄,此目錄下用於存放多語言的翻譯如zh.js儲存中文翻譯,en.js儲存英文翻譯,id.js 儲存印尼語等。en.js export default zh.js export default 2 建立preset資料...