Скрыть шаблон vue.js перед его визуализацией

Question

Я пытаюсь скрыть содержимое шаблона vue.js до его полной визуализации. Рассмотрим следующий шаблон:

    <div class="loader"> 
        <table class="hidden"> 
         <tr v-for="log in logs"> 
          <td>{{log.timestamp}}</td> 
          <td>{{log.event}}</td> 
         </tr> 
        </table> 
        </div> 

Когда я сделать это tempate на сервере, пользователь видит содержимое из <tr> элемента перед отрисовкой. По этой причине я использую класс hidden, чтобы скрыть его, прежде чем он будет полностью отображен.

Кроме того, перед визуализацией я показываю элемент загрузчика с некоторым анимированным индикатором прогресса.

Как только он отображается, я просто вызову element.show() в jQuery и скройте панель прогресса. Мой вопрос: нормально ли смешивать jQuery и vue.js для достижения этого?

var vueLogs = new Vue({ 
     el: "#checkInLogsHolder", 
     data: {logs: []} 
    }); 
    var holder = $("#checkInLogsHolder"); 

    function response(payload) { 
     // hiding the loader animation 
     holder.find(".loader").remove(); 
     // showing the rendered table 
     holder.find("table").show(); 
     vueLogs.logs.unshift(payload); 
    } 

Есть ли лучший способ сделать это?

Answer 1

Vue уже имеет v-cloak директиву встроенная, вам просто нужно добавить класс Релевент CSS:

[v-cloak] { 
    display: none; 
} 

, а затем применить его к элементу так:

<div v-cloak> 
    {{message}} 
</div> 

Вот JSFiddle : https://jsfiddle.net/2jbe82hq/

Если вы удалите v-cloak, в этой скрипке вы увидите усачанный {{message}} до экземпляр установлен.

Если вы хотите, чтобы отобразить loader в то время как вы получить данные с сервера, то вы объедините булево флаг с v-if, чтобы показать и скрыть погрузчик:

var vm = new Vue({ 
    el: "#app", 
    created(){ 
    this.$http.get('url').then(response => { 
     // set loader to false 
     this.loading = false; 
    }); 
    }, 
    data: { 
    message: 'Hello Vue!', 
    loading: true 
    } 
}); 

Вы можете сделать:

<div v-if="loading"> 
    Loading... 
</div> 
<div v-else> 
    {{message}} 
</div> 

Вот JSFiddle для этого: https://jsfiddle.net/fa70phLz/

также можно использовать loading, а затем используйте v-bind:class для применения и удаления класса на основе флага, что полезно, если вы хотите наложить всю страницу на loader.

<div :class="{'loading': loading}"></div> 

Answer 2

Я постеснялся бы смешивать JQuery в Vue.js кода по той причине, что Vue.js предоставляет набор инструментов, которые обычно устраняет необходимость в JQuery.

Поскольку вы загружаете страницу и показываете индикатор выполнения, вы можете использовать крючки жизненного цикла Vue.js: [созданный, смонтированный, beforeUpdate, обновленный и т. Д. И т. Д.].

Что бы я сделал, это создать небольшой div, содержащий индикатор выполнения, а затем соседний элемент с фактическим содержимым, отображаемым после загрузки. Задайте данные экземпляра компонента, а затем используйте переключатели жизненного цикла для переключения отображения.

<div v-if='loading'> 
    <div class='progress-bar'> 
    <!-- Loading bar markup here --> 
    </div> 
</div> 

<div v-else class='content'> 
    <table> 
    <!-- Content --> 
    <tr v-for="log in logs"> 
     <td>{{log.timestamp}}</td> 
     <td>{{log.event}}</td> 
    </tr> 

    </table> 
</div> 

Затем в сценарной части шаблона:

export default { 
    data() { 
    return: { 
     loading: true, 
     logs: [], 
     message: '' 
    }; 
    }, 
    methods: { 
    fetchLogs() { 
     // using vue-resource/ajax library like axios 
     this.$http.get('/api/logs').then((logs) => { 
     if (logs) { 
      this.logs = logs; 
      setTimeout(() => { 
      this.loading = false; 
      }, 1000); 
     } else { 
      this.message = 'No logs to display'; 
      this.loading = false; 
     } 
     }); 
    } 
    }, 
    mounted() { 
    this.fetchLogs(); 
    } 
}; 

Используя этот метод, вы можете связать классы элементов для создания плавных переходов CSS.

Answer 3

Я просто добавляя полезные вещи клиновидного плаще добавить кок перед визуализацией полный HTML файл и спасибо Адаму за его Gist - https://gist.github.com/adamwathan/3584d1904e4f4c36096f

Если вы хотите добавить счетчик перед загрузкой страницы, вы можете прочитать это -

• Добавить v-cloak внутри #app.
• Сделайте один div v-cloak--inline, который мы хотим показать перед обработкой HTML-страницы.
• Другое поле, которое будет содержать полную страницу с v-cloak--hidden.
• Необходимо добавить здесь css.

Давайте код - В мастер-странице,

<div id="app"> 

    <div v-cloak> 

    <div class="v-cloak--inline"> <!-- Parts that will be visible before compiled your HTML --> 
     <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> 
     <span class="sr-only">Loading...</span> 
    </div> 

    <div class="v-cloak--hidden"> <!-- Parts that will be visible After compiled your HTML --> 
     <!-- Rest of the contents --> 
     @yield('content') 
    </div> 

    </div> 

</div> 

С добавлением этих дополнительных CSS для у-плащ.

[v-cloak] .v-cloak--block { 
    display: block; 
} 
[v-cloak] .v-cloak--inline { 
    display: inline; 
} 
[v-cloak] .v-cloak--inlineBlock { 
    display: inline-block; 
} 
[v-cloak] .v-cloak--hidden { 
    display: none; 
} 
[v-cloak] .v-cloak--invisible { 
    visibility: hidden; 
} 
.v-cloak--block, 
.v-cloak--inline, 
.v-cloak--inlineBlock { 
    display: none; 
} 

Затем Перед компиляцией файл HTML, прядильщик сделает. После компиляции прядильщик скроется. Вы можете использовать это на своей главной странице. Таким образом, каждый раз, когда вы загружаете новую страницу, это будет видеть эффекты.

Просмотреть Объявления - https://gist.github.com/adamwathan/3584d1904e4f4c36096f