比如大型頁面中十分局部的變數/方法不想寫到data/methods中：

new Vue({
template:`
&


&
&clear&
& `,
methods:{
the:function(_){return {"":_};}
}
});


（有種閉包的高潮感！臨時變數→局部變數→靜態變數！）

或者變相縮短大量使用的深對象變數長度：

new Vue({
template:"&

{{xxx.title}}&{{xxx.inner}}&",
data:{x:{x:{x:{title:"title",inner:"inner"}}},
methods:{
the:function(_){return {"":_};}
}
});


又比如，利用持存變數實現跨組件通信與組件非數據狀態持存：

每次組件重新生成時使用的不是全新的對象字面量，而是對同一個對象的引用。

這個對象引用，可以用閉包變數_$v（或全局變數$v）來持存。

&
&&
&
&

plus&
& &
(function(){
var _$v={v:"v"};
Vue.component("v-v",{
template:"{{v}}&",
data:function(){return _$v;}
});
new Vue({
el:"div",
data:{
v:_$v,
s:2
}
});
})();
&


---

Vue 這麼簡單的東西為啥要奇技淫巧啊喂！

---

1. 可以通過el.__vfrag__.scope 獲取到當前節點上綁定的Vue對象。

例如：

const clipboard = new Clipboard(".anticons-list li")
clipboard.on("success", (e) =&> {
const item = e.trigger.__vfrag__.scope.item
item.justCopied = true
setTimeout(() =&> {
item.justCopied = false
}, 1000)
})


2. 通過vm.$compile 動態編譯模板

例如：

const template = `
&
&(*^__^*)& &
`


compiled () {
const div = document.createElement("div")
div.innerHTML = template
this.$compile(div)
document.body.appendChild(div)
},


我覺得可以給我點個贊 (*^__^*)

---

如果一個廣泛使用的框架需要奇技淫巧，那只有兩個可能：

要麼框架的設計有問題，要麼你的設計有問題。

當然，確實有的時候這種問題無法避免。

因為你做技術選型的時候用戶還沒提這麼噁心的需求。

但是如果上來就用奇技淫巧，那都是設計不當或者懶於設計。

---

現在看來，這種技巧是當時沒有充分利用好組件的表現。

但學習組件而不涉獵vue-router的話，是很難領會組件的真正工程化用法的。

而vue-router其實適合的是spa。因此入手傳統網站，建議自己在外麵包一層從可見路徑到邏輯路徑的driver。

——

另外，這個奇技淫巧在別處倒是派上了大用場。

長遠來看，這或許又是一種折衷的做法。

但另一個角度看，未嘗不是改弦更張中融會貫通的學習過程本身。

---

最近使用vue2.0寫了一個餓了么點餐系統的Demo，關於vue的一些基本用法都有用到，並且引入了vuex、vue-router、axios、webpack、eslint、better-scroll等，感興趣可以來看看

SimonZhangITer/VueDemo_Sell_Eleme

---

vue-loader Introduction

想用什麼的話, 至少引用這個吧.

---

&
&

{{name}}& &
&

var v = new Vue({
el:"#v",
data:{
name:"123"
}
});
var myName = document.getElementById("myName");
setTimeout(function(){
console.log(myName.value);
myName.value = 789;
console.log(v.name);
},2000);


---

推薦閱讀：