㈠ vue.js 官方demo怎麼編譯
在項目中，我是這樣使用組件的:
定義一個組件
// title.vue
<template>
{{title.title}}
</template>
<script>
export default {
props: {
title: {
title: ''
}
}
</script>
在另一個組件里用
// index.vue
<template>
<nav-title :title="title"></nav-title>
</template>
<script>
import navTitle form 'title.vue'
export default {
el: '#app',
data: {
title: {
title: '標題'
}
㈡ vue2.0 仿餓了么問題，出現這個問題，一直編譯報錯 ，怎麼解決啊
你們有導入star.vue這個組件
㈢ vue-cli怎麼和後台實時編譯
：請求數據的環節 Vue.js 並沒有提供，可以藉助 jQuery 或者 Vue-resource 來做。 一般是在組件的 ready 階段獲取數據，然後重寫 data。
㈣ 如何利用Vue.js庫中的v-show顯示和隱藏元素
<h1 v-show="ok">Hello!</h1>
如果ok這個變數為真，就會顯示Hello!
v-show 是簡單的切換元素的 CSS 屬性 display ，也就是會佔用瀏覽器內存空間，
另外一個類似的是 v-if
v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。
相比之下， v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。
㈤ weex最新版如何將.vue編譯成.js文件
1.在components 目錄下新建一個validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}
這就是我們的插件，定義了一個屬性
2.入口文件jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);
3.我們到user-username.vue 組件下驗證一下:
mounted(){
alert(this.$myName);
},
瀏覽器訪問登錄頁面，成功彈出：
這里寫圖片描述
4.剛剛我們已經學會插件里定義屬性，馬上來學一下如何定義方法：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
}
}
同樣可以使用該方法：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}
5.
這里寫圖片描述
我們修改user-name.vue 組件，來實現文本框驗證：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用戶不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用戶名改變的方法里判斷 用戶名是否復合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false; // 如果驗證沒有通過就顯示錯誤提示
}else{
this.showErrorLabel = true;
}
// 調用父組件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
這里寫圖片描述
自定義指令
文檔：
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果沒有填寫,默認為true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 只會調用一次
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}
2、我們自定了一個uname 指令，下面來看一下如何使用的？
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我們在組件的模板里使用了 v-uname ，並且給綁定了」username」數據。
我們打開瀏覽器的控制台：
這里寫圖片描述
說明我們定義的指令里，這個方法執行了：
bind(){
console.log("bind"); // 只會調用一次
},
3、下面我們來看一下update 里的東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}
㈥ vue: WebStorm設置快速編譯運行的方法
WebSorm是一款優秀的前端開發工具，而Vue項目可以使用Node進行編譯運行，平常我們可以通過命令行部署項目進行調試。
本文介紹設置Webstorm進行快速部署Vue項目。
第一步
點擊啟動快捷按鈕旁邊的向下小箭頭，在列表中選擇Edit選項：
第二步
打開啟動設置頁面後，點擊左上角的加號添加新的運行方式：
第三步
在彈出的選擇框中，選擇node.js啟動模式：
第四步
在新打開的設置頁面中，在紅色圈中的地方設置如圖路徑的文件：
至此設置成功，直接點啟動按鈕就可以部署項目。
以上這篇vue:
WebStorm設置快速編譯運行的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:webstorm添加*.vue文件支持webstorm添加vue.js支持的方法教程webstorm中vue語法的支持詳解webstorm和.vue中es6語法報錯的解決方法詳解Webstorm
新建.vue文件支持高亮vue語法和es6語法
㈦ Vue項目中中編譯正確 控制台出現下列錯誤是什麼情況
1.
程序里可以含有不支持靜態編譯的控制項.
如:
字體選擇框
選擇顏色對話框
等
2.
也有可能是易語言軟體的問題...可以重裝安裝下試試
㈧ vue2.0this編譯報錯，求大神指教
正常的，你使用的編輯器命令中沒有this這個用法，就像word你打一個學術英文簡寫報錯一樣的性質，我用phpstorm的時候也會報錯的，要用專門編寫js的程序就不會出這個問題了，能正常運行就代表沒錯
㈨ vue中如何編譯代碼使相同的模塊共用一樣的數據
Vue.js很簡單。正因為如此簡單，人們常常認為其適合於小項目。雖然真正的Vue.js核心知識只是一個視圖層庫，實際上有一組工具，將使您能夠使用Vue.js構建完整的大規模SPA（單頁應用程序）。 SPA應用可以在不完全重新載入網頁，產生一個更流暢的用戶體驗到的用戶交互響應。還有好的副作用，SPA還鼓勵後端專注於展示數據端點，這使得整體架構更加分離，並且對於其他類型的客戶端可能是可重用的。 從開發人員的角度來看，SPA和傳統的後端呈現應用程序之間的主要區別是，我們必須將客戶端視為具有自己架構的應用程序。通常，我們需要處理路由，數據獲取和持久性，查看渲染和必要的構建設置，以便於模塊化代碼庫。
㈩ Vue 面試中常問知識點整理
生命周期：Vue實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期，各個階段有相對應的事件鉤子。
beforeCreate（創建前），在數據觀測和初始化事件還未開始
created（創建後），完成數據觀測，屬性和方法的運算，初始化事件， $el 屬性還沒有顯示出來
beforeMount（載入前），在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data裡面的數據和模板生成html。注意此時還沒有掛載html到頁面上。
mounted（載入後），在 el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用。實例已完成以下的配置：用上面編譯好的html內容替換 el 屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate（更新前），在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。
updated（更新後），在由於數據更改導致的虛擬DOM重新渲染和打補丁之後調用。調用時，組件DOM已經更新，所以可以執行依賴於DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在伺服器端渲染期間不被調用。
beforeDestroy（銷毀前），在實例銷毀之前調用。實例仍然完全可用。
destroyed（銷毀後），在實例銷毀之後調用。調用後，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。
注意：
created 階段的ajax請求與 mounted 請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處於白屏狀態。
mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 。
初始化組件時，僅執行了 beforeCreate/Created/beforeMount/mounted 四個鉤子函數
當改變 data 中定義的變數（響應式變數）時，會執行 beforeUpdate/updated 鉤子函數
當切換組件（當前組件未緩存）時，會執行 beforeDestory/destroyed 鉤子函數
初始化和銷毀時的生命鉤子函數均只會執行一次， beforeUpdate/updated 可多次執行
僅當子組件完成掛載後，父組件才會掛載
當子組件完成掛載後，父組件會主動執行一次beforeUpdate/updated鉤子函數（僅首次）
父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的
銷毀父組件時，先將子組件銷毀後才會銷毀父組件
組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行
當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的
mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行
1、什麼是vue生命周期？
答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
2、vue生命周期的作用是什麼？
答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
3、vue生命周期總共有幾個階段？
答：它可以總共分為8個階段：創建前/後、載入前/後、更新前/後、銷毀前/銷毀後。
5、DOM 渲染在哪個周期中就已經完成？
答：DOM 渲染在 mounted 中就已經完成了。
vue實現數據雙向綁定主要是：採用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的 setter，getter ，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty() 將它們轉為 getter/setter 。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。
vue的數據雙向綁定 將MVVM作為數據綁定的入口，整合 Observer ，Compile和 Watcher 三者，通過 Observer 來監聽自己的 model 的數據變化，通過 Compile 來解析編譯模板指令（vue中是用來解析 {{}}），最終利用 watcher 搭起observer和 Compile 之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（ input ）—>數據 model 變更雙向綁定效果。
js實現簡單的雙向綁定：
1、父組件與子組件傳值
父組件傳給子組件：子組件通過 props 方法接受數據；
子組件傳給父組件： $emit 方法傳遞參數
2、非父子組件間的數據傳遞，兄弟組件傳值 eventBus ，就是創建一個事件中心，相當於中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。
hash模式：在瀏覽器中符號「#」，#以及#後面的字元稱之為hash，用 window.location.hash 讀取。特點：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重載入頁面。
history模式：history採用HTML5的新特性；且提供了兩個新方法： pushState()， replaceState()可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。
需求一：
在一個列表頁中，第一次進入的時候，請求獲取數據。
點擊某個列表項，跳到詳情頁，再從詳情頁後退回到列表頁時，不刷新。
也就是說從其他頁面進到列表頁，需要刷新獲取數據，從詳情頁返回到列表頁時不要刷新。
解決方案
在 App.vue設置：
假設列表頁為 list.vue ，詳情頁為 detail.vue ，這兩個都是子組件。
我們在 keep-alive 添加列表頁的名字，緩存列表頁。
然後在列表頁的 created 函數里添加ajax請求，這樣只有第一次進入到列表頁的時候才會請求數據，當從列表頁跳到詳情頁，再從詳情頁回來的時候，列表頁就不會刷新。
這樣就可以解決問題了。
需求二：
在需求一的基礎上，再加一個要求：可以在詳情頁中刪除對應的列表項，這時返回到列表頁時需要刷新重新獲取數據。
我們可以在路由配置文件上對 detail.vue 增加一個 meta 屬性。
這個 meta 屬性，可以在詳情頁中通過 this.$route.meta.isRefresh 來讀取和設置。
設置完這個屬性，還要在 App.vue 文件里設置 watch 一下 $route 屬性。
這樣就不需要在列表頁的 created 函數里用 ajax 來請求數據了，統一放在 App.vue 里來處理。
觸發請求數據有兩個條件：
從其他頁面（除了詳情頁）進來列表時，需要請求數據。
從詳情頁返回到列表頁時，如果詳情頁 meta 屬性中的 isRefresh 為 true ，也需求重新請求數據。
當我們在詳情頁中刪除了對應的列表項時，就可以將詳情頁 meta 屬性中的 isRefresh 設為 true 。這時再返回到列表頁，頁面會重新刷新。
1、css只在當前組件起作用
答：在 style 標簽中寫入 scoped 即可 例如： <style scoped></style>
2、v-if 和 v-show 區別
答： v-if 按照條件是否渲染， v-show 是 display 的 block 或 none ；
3、 $route 和 $router 的區別
答： $route 是「路由信息對象」，包括 path，params，hash，query，fullPath，matched，name 等路由信息參數。而 $router 是「路由實例」對象包括了路由的跳轉方法，鉤子函數等。