14.01.2020 - ЖЗГ

Прогрессбар на vue.js

14.01.2020 Павел Грибов WEB

Например можно реализовать как-то так (в примере на самом деле два прогрессбара). К сожалению всёж пока выходит сложнее для чтения и понимания чем «чистый» javascript+jquery

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
    <table id="hotels_list"></table>
    <div id="hotels_pager"></div>  
    <div id="app">
        <div class="container">
            <div class="row">
                    <div class="col-6">      
                        <persent v-bind:msg="pers1"></persent>
                    </div>
                    <div class="col-6">    
                        <persent v-bind:msg="pers2"></persent>
                    </div>                
            </div>    
        </div>                
    </div>
<script>    
Vue.component('persent', {
    props: ['msg'],
    template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'
});      
var app = new Vue({
  el: '#app',
  data: {
    timing: null,
    pers1 : {
        value: 10,
        txt:'Добавление новых',
        style:'width:20%'
    },
    pers2 : {
        value: 70,
        txt:'Обновление',
        style:'width:70%'
    }
  },
  mounted(){
    console.log("-загрузились полностью..");  
    this.runTiming();
  },
  methods: {
      runTiming() {
        this.timing = setInterval(this.changeCurrentPers, 2000)          
      },
      changeCurrentPers(){
         vl=this;
        $.post('progress.txt',{}, function(data){                          
                vl.pers1.value=data;
                vl.pers1.style='width:'+data+'%';
        });       
        $.post('progress_update.txt',{}, function(data){
                vl.pers2.value=data;
                vl.pers2.style='width:'+data+'%';
        });                 
      }
  },  
});

</head>

<body>

</div>

</div>

Vue.component('persent', {

props: ['msg'],

template: '<div><div>{{ msg.txt }}</div><div class="progress"><div class="progress-bar" role="progressbar" :style="msg.style" :aria-valuenow="msg.value" aria-valuemin="0" aria-valuemax="100">{{ msg.value }}%</div></div></div>'

});

var app = new Vue({

el: '#app',

data: {

timing: null,

pers1 : {

value: 10,

txt:'Добавление новых',

style:'width:20%'

pers2 : {

value: 70,

txt:'Обновление',

style:'width:70%'

}

mounted(){

console.log("-загрузились полностью..");

this.runTiming();

methods: {

runTiming() {

this.timing = setInterval(this.changeCurrentPers, 2000)

changeCurrentPers(){

vl=this;

$.post('progress.txt',{}, function(data){

vl.pers1.value=data;

vl.pers1.style='width:'+data+'%';

});

$.post('progress_update.txt',{}, function(data){

vl.pers2.value=data;

vl.pers2.style='width:'+data+'%';

});

}

});

Всё ищу, гдеб его (VUE.js) можно применить.. Пока выходит «надумано»..

Один комментарий javascript, progressbar, vue

Ох уж эти работодатели..

14.01.2020 Павел Грибов Из жизни

— Папа, что мы сегодня будем кушать?
— Ничего сынок, ведь я работаю на интересной работе, в дружном коллективе

(с) кто-то

Оставить комментарий

Пробую Vue.js

14.01.2020 Павел Грибов WEB

Ниже писал как тестировал React.js, в итоге не привилось от слова совсем. Всё надумано и усложнено. Для реализации элементарных вещей типа вывода динамического списка загруженного из вне требуются феерические велосипеды. В итоге не смог придумать ни одного примера использования где было бы проще и удобнее чем с использованием чистого javascript + jquery. Теперь задумался в сторону фреймворка Vue.js В нём понравилась идея компонентности (кирпичиков из «своих» тегов) для создания страницы. Пока тестировал, получился вот такой скриптик, демонстрирующий базовые возможности:

<!doctype html>
<head>		
        <meta charset="UTF-8">
        <title>VUE.js test</title>		
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>        
</head>
<body>
<div id="app">
  {{ message }}
  <span v-bind:title="title">Hello</span>
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>      
  </ol>    
  <button v-on:click="addItem">Добавить элемент</button>
  <input v-model="message">
  <brick></brick>
  <brick></brick>
</div>        
<script>   
Vue.component('brick', {
    template: '<div>Это кирпичик</div>'
});    
var app = new Vue({
  el: '#app',
  data: {
    message: 'Привет'+ new Date().toLocaleString(),
    title: 'title me'+ new Date().toLocaleString(),
    msg:"DDD",
    todos:[
        {text:'Один',key:"wedwe"},
        {text:'Два'},
        {text:'Три'}
    ]
  },
  methods: {
        addItem: function () {
          this.todos.push({text: this.message});
        }
  },  
});    

</script>    
</body>
</html>

<!doctype html>

<head>

</head>

<body>

<span v-bind:title="title">Hello</span>

<ol>

</li>

</ol>

<button v-on:click="addItem">Добавить элемент</button>

</div>

Vue.component('brick', {

template: '<div>Это кирпичик</div>'

});

var app = new Vue({

el: '#app',

data: {

message: 'Привет'+ new Date().toLocaleString(),

title: 'title me'+ new Date().toLocaleString(),

msg:"DDD",

todos:[

{text:'Один',key:"wedwe"},

{text:'Два'},

{text:'Три'}

]

methods: {

addItem: function () {

this.todos.push({text: this.message});

}

});

</script>

</body>

</html>

Демо тут

Оставить комментарий javascript, vue.js, web

Пн	Вт	Ср	Чт	Пт	Сб	Вс
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31