vue使用方法

㈠ vue如何動態調用方法

通常我們會在組件里的 template 屬性定義模板，或者是在 *.vue 文件里的 template 標簽里寫模板。但是有時候會需要動態生成模板的需求，例如讓用戶自定義組件模板，或者設置組件的布局。
例如要做一個類 select 的組件，用戶傳入 options 數據，通過 value prop 獲取選中值，最基本的原型如下。
Vue.component('XSelect', {
template: `
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
<span v-text="option.label"></span>
</div>
</div>`,

props: ['value','options']
})

如果此時需要增加一個 API 支持讓用戶自定義 option 部分的模板。此處用 slot 並不能解決問題。
通過 $options.template 修改
通過列印組件對象可以獲得一個信息，在 $options 里定義了一個 template 屬性，寫在 template 標簽里的模板，最終編譯後也會在 $options.template 里。通過文檔的生命周期 可以得知，在 created 的時候， 實例已經結束解析選項， 但是還沒有開始 DOM 編譯 也就是說，如果用戶通過 prop 的數據我們可以獲得，但是模板其實還沒有渲染成 DOM。經過測試，在 created 修改 this.$options.template 是可以改變最終生成的 DOM 的，同時也能拿到 props 的內容。
那麼我們可以修改下代碼，使其支持自定義模板
Vue.component('XSelect', {
props: [
'value',
'options',
{
name: 'template',
default:'<span v-text="option.label"></span>'
}
],

created() {
varoptionTpl =this.template

this.$options.template =`
<div class="select">
<input :value="value" readonly />
<div
class="option"
v-for="option in options"
@click="value = option.value">
${optionTpl}
</div>
</div>`
}
})

用戶使用是就可以傳入模板了
<x-select
:value.sync="value"
template="<span>標簽: {{ option.label }}, 值: {{ option.value }}</span>"
:options="[
{value: 1, label: 'a'},
{value: 2, label: 'b'},
{value: 3, label: 'c'}
]">
</x-select>

可能存在的問題
我們知道 Vue 在內部幫我們做了許多優化，但是在這里可能會由於某些優化導致動態拼接的模板無法渲染成功。例如這里我們不使用 v-for 而是手工遍歷 options 生成需要的 HTML
consttpl = options.map(opt =>`<div>${this.optionTpl}</div>`)

this.$options.template =`
<div class="select">
<input :value="value" readonly>
${tpl}
</div>`

這里會導致一個 BUG，如果一個頁面有多個 x-select 組件，並且 options 長度不一樣，會導致長的 options 的組件後面幾個選項渲染不出來。究其原因是 Vue 會幫我們緩存模板編譯結果。翻看代碼可以找到 vue/src/instance/internal/lifecycle.js 里有做優化，同時提供的 _linkerCachable 本意是給 內聯模板 使用。我們可以通過設置 this.$options._linkerCachable = false 達到我們的目的。
這樣我們就可以開發讓用戶自定義布局的組件了，用戶傳入布局參數，通過手工拼接模板，設置了 _linkerCachable = false 也不會被緩存。
通過 $options.partials 動態添加 partial
使用 partials 也能達到添加自定義模板的目的，但是通常的做法是要全局注冊 partial，這么做並不優雅。 vue-strap 就是這么做的。如果重名了會被覆蓋（初次渲染不會，但是數據更新重新渲染 DOM 時就會被覆蓋）。
通過文檔我們知道可以在組件內部通過 partials 屬性注冊局部的 partial，因此自然而然也可以在 this.$options.partials 去動態添加了。

㈡ vue中路徑中使用~與@的區別

先說@
@這是webpack設置的路徑別名。
這東西在vue標准模板裡面的build/webpack.base.conf這個文件裡面。

resolve: { // 路徑別名
alias: { '@': resolve('src'), 'vue$': 'vue/dist/vue.esm.js'
}
},

就是說@這東西代表著到src這個文件夾的路徑
然後是~

~ 是 stylus-loader 到東東，參考 https://github.com/shama/stylus-loader
~common 表示相對 common，然後我們在 webpack 配置了 common 的 alias，就能找到了它的路徑了

㈢ 如何正確使用Vue.js的組件

使用Vue.js的組件
#下載最新的vue$npminstallvue
js引用vue.js
開始代碼，感受vue強大的雙向數據綁定


<divid="app">
<p>{{message}}</p>
<inputv-model="message">
</div>

newVue({
el:'#app',
data:{
message:'HelloVue.js!'
}
})

實戰代碼：

<divid="app">
<inputv-model="newTodo"v-on:keyup.enter="addTodo">
<ul>
<liv-for="todointodos">
<span>{{todo.text}}</span>
<buttonv-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>

newVue({
el:'#app',
data:{
newTodo:'',
todos:[
{text:'Addsometodos'}
]
},
methods:{
addTodo:function(){
vartext=this.newTodo.trim()
if(text){
this.todos.push({text:text})
this.newTodo=''
}
},
removeTodo:function(index){
this.todos.splice(index,1)
}
}
})

㈣ vue.js中怎樣用onload事件

1、創建一個Vue.js文件，在template標簽中插入div，div包裹無序列表和fusioncharts組件，其中無序列表子項元素綁定點擊事件，如下圖所示。

㈤ 使用vuejs時一個方法怎麼訪問另一個方法返回的數據

具體代碼如下：

㈥ vue.js watch怎麼用

和方法寫法一樣。位置和methods平行，obj為監聽的數據，
watch： {
obj：function（）{這里磁軛操作} ，
obj（）{這樣也行}，
obj.name(){這樣監聽對象的屬性}
}，

㈦ vue.js中怎麼使用類似blur的功能

首先，我們先了解什麼是MVX框架模式？MVX框架模式：MVC+MVP+MVVM1.MVC：Model(模型)+View(視圖)+controller(控制器)，主要是基於分層的目的，讓彼此的職責分開。View通過Controller來和Model聯系，Controller是View和Model的協調者，View和Model不直接聯系，基本聯系都是單向的。用戶User通過控制器Controller來操作模板Model從而達到視圖View的變化。2.MVP：是從MVC模式演變而來的，都是通過Controller/Presenter負責邏輯的處理+Model提供數據+View負責顯示。在MVP中，Presenter完全把View和Model進行了分離，主要的程序邏輯在Presenter里實現。並且，Presenter和View是沒有直接關聯的，是通過定義好的介面進行交互，從而使得在變更View的時候可以保持Presenter不變。MVP模式的框架：Riot,js。3.MVVM：MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。View的變化會自動更新到ViewModel,ViewModel的變化也會自動同步到View上顯示。這種自動同步是因為ViewModel中的屬性實現了Observer，當屬性變更時都能觸發對應的操作。MVVM模式的框架有：AngularJS+Vue.js和Knockout+Ember.js後兩種知名度較低以及是早起的框架模式。Vue.js是什麼？看到了上面的框架模式介紹，我們可以知道它是屬於MVVM模式的框架。那它有哪些特性呢？其實Vue.js不是一個框架，因為它只聚焦視圖層，是一個構建數據驅動的Web界面的庫。Vue.js通過簡單的API（應用程序編程介面）提供高效的數據綁定和靈活的組件系統。Vue.js的特性如下：1.輕量級的框架2.雙向數據綁定3.指令4.插件化Vue.js與其他框架的區別？1.與AngularJS的區別相同點：都支持指令：內置指令和自定義指令。都支持過濾器：內置過濾器和自定義過濾器。都支持雙向數據綁定。都不支持低端瀏覽器。不同點：1.AngularJS的學習成本高，比如增加了DependencyInjection特性，而Vue.js本身提供的API都比較簡單、直觀。2.在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢。Vue.js使用基於依賴追蹤的觀察並且使用非同步隊列更新。所有的數據都是獨立觸發的。對於龐大的應用來說，這個優化差異還是比較明顯的。2.與React的區別相同點：React採用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯後使用。中心思想相同：一切都是組件，組件實例之間可以嵌套。都提供合理的鉤子函數，可以讓開發者定製化地去處理需求。都不內置列數AJAX，Route等功能到核心包，而是以插件的方式載入。在組件開發中都支持mixins的特性。不同點：React依賴VirtualDOM,而Vue.js使用的是DOM模板。React採用的VirtualDOM會對渲染出來的結果做臟檢查。Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作DOM。如何使用Vue.js?1.安裝（1）script如果項目直接通過script載入CDN文件，代碼示例如下：(2)npm如果項目給予npm管理依賴，則可以使用npm來安裝Vue,執行如下命令：$npmivue--save-dev(3)bower如果項目基於bower管理依賴，則可以使用bower來安裝Vue，執行如下命令：$bowerivue--save-dev