343  /  383

Базовые знания

Просмотров: 1608 (Статистика ведётся с 06.02.2017)
Анна Кокина
Сложность урока:
4 уровень - сложно, требуется сосредоточится, внимание деталям и точному следованию инструкции.
1
2
3
4
5
Недоступно в редакциях:
Ограничений нет

Базовые знания

Чтобы начать работать с Vue.js, необходимо понимать, как выполнить 4 несложных действия:

  1. Как вставить переменную в шаблон:

    template: `
    	<div>
    		<h1>{{headerText}}</h1>
    		<span>{{bodyText}}</span>
    	</div>
    `,
    
  2. Как использовать условный рендеринг:

    template: `
    	<div>
    		<h1>{{headerText}}</h1>
    		<span v-if="isBasicsSlide">{{basicsText}}</span>
    		<span v-else>{{otherText}}</span>
    	</div>
    `,
    
  3. Как показать коллекцию элементов:

    template: `
    	<div>
    		<h1>{{headerText}}</h1>
    		<div v-for="slide in slides">
    			{{slide.text}}
    		</div>
    	</div>
    `,
    
  4. Кaк взаимодействовать между представлением и логикой:

    new Vue({
    	el: '#app',
    	data:
    	{
    		headerText: 'Hello, TechDay!',
    		slides: [
    			'Talk about Vue Basics.',
    			'Talk about events features.',
    			'Talk about other features.'
    		]
    		slideText: ' ',
    		slideIndex: 0,
    	},
    	methods:
    	}
    		nextSlide()
    		{
    			this.slideIndex++;
    			
    			if (typeof this.slides[this.slideIndex] === 'undefined')
    			{
    				this.slideIndex = 0;
    			}
    			
    			this.slideText = this.slides[this.slideIndex];
    		}
    	},		
    	template:	`	
    		<div>
    			<h1>{{headerText}}</h1>
    			<div>{{slideText}}</div>
    			<button @click="nextSlide">Next</button>
    		</div>
    	`,					
    });		
    	
    


2
Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.
Развернуть комментарии