vue.js 問題


#1

最近開始玩 VUE.JS

但是某個地方卡關了

一般情況 各種明細列表 會有各個獨立的index

然後 藉由 ajax 撈出來 vue 渲染完成

但是在新增部分視圖的時候就很尷尬了

通常主頁
會有自己的的進入點

例如 訂單明細首頁

<script>
    var vm_obj = {
        el: '#country-detail',
        data: {
            DetailValue: ''
        },
        created: function () {
            this.loadQuote();
        },
        methods: {
               loadQuote: function () {
                          alert('hihi我是訂單明細首頁');
          }
        }
    }
    new Vue(vm_obj);
</script>

但是在主頁中塞入部份視圖來配合查詢的時候就卡住了

因為 new Vue(vm_obj); 只有一個進入點

如果是在 部分視圖的頁面中

在弄一個 script 區塊

 <script>

</script>

使用邏輯上也不可行 要問一下部分視圖 Partial View or Partial Page 該如何另外加載VUE功能?

還是VUE功能都寫在首頁 部分視圖只加載頁面內容而已

但是這樣子首頁的VUE就不能權責分明 越來越肥 因此感覺不適這種作法

還是說要再弄更完整的框架才行 VUEX?


#2

我單純的提示你後續的東西唄 …

var super_vue = new Vue(vm_obj); // 把 vue 的 obj 提成 global var
  //或是找 singleton pattern 之類的管理器來管理
super_vue.$data.DetailValue = "yooooo";
super_vue.loadQuote();

之後你應該就會去接類似 jQuery 的東西和弄 callback 有的沒的

然後記得把 vue 的範圍打大一點,類似打在 wapper / content 層去(以前的人都綁在 body X"DD 但現在不允許了),你想做啥就可以做啥(因為你的內容都在裡面了),但其實如果要弄完全 template 化的話就盡量分同屬性功能之類的,但你可以先從這邊練起


#3

所以 簡單的意思就是說 單純解法就是把東西都訂在 global 區域(或者不是 global 而是整個專案工具的全域區塊)

只是 global 要自己分類管理清楚

然後個別頁面或是局部頁面則是使用 命令句 直接使用即可

例如

<script>
    var vm_obj = {
        el: '#country-detail',
        data: {
            DetailValue: ''
        },
        created: function () {
            this.loadQuote();
        },
        methods: {
               loadQuote: function () {
                          alert('hihi我是訂單明細首頁');
          },
             loadData()  function () {
                          alert('hihi我是子功能');
          }
        }
    }
    new Vue(vm_obj);
</script>

以及其他可以call的功能都寫好放在 global 區域

而個別的頁面就只是單獨的使用命令即可 也可以個別頁面單獨去使用

<script>

 super_vue..loadQuote(); //載入頁面

 super_vue..loadData();  //載入子功能

</script>