
            
              <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product App</title>
</head>
<body>

    <div id="app">
        <h1>Product Name</h1>
    </div>

    <script src="main.js"></script>
</body>
</html>


            
              var product = "Socks";


            
              <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


            
              const app = Vue.createApp({
    data: () => ({
        product: "Socks"
    })
});

app.mount('#app');


            
              <div id="app">
    <h1>{{ product }}</h1>
</div>


            
              const app = Vue.createApp({ /*...опции...*/ });


            
              app.mount('#app');


            
              data: ()=>({
    product: "Socks"
})


            
              <h1>{{ product }}</h1>


            
              {{ product + '?' }}
{{ firstName + ' ' + lastName }}
{{ message.split('').reverse().join('') }}


            
              <div id="app">

  <div class="product">

    <div class="product-image">
      <img src="" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>

  </div>
</div>


            
              const app = Vue.createApp({
        data: ()=>({
            product: "Socks",
            image: "./assets/vmSocks-green.jpg"
        })
    });

    app.mount('#app');


            
              <link rel="stylesheet" type="text/css" href="style.css">


            
              <img v-bind:src="image" />


            
              <img src="./assets/vmSocks-green.jpg" />


            
              image: "./assets/vmSocks-blue.jpg"


            
              altText: "A pair of socks"


            
              <img v-bind:src="image" v-bind:alt="altText" />


            
              <img :src="image" />


            
              <div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>
</div>


            
              data: ()=>({
    product: "Socks",
    image: "./assets/vmSocks-green.jpg",
    inStock: true
})


            
              <p>In Stock</p>
<p>Out of Stock</p>


            
              inStock: true


            
              <p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>


            
              inventory: 100


            
              <p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>


            
              <p v-show="inStock">In Stock</p>


            
              <div class="product">
  <div class="product-image">
    <img :src="image" />
  </div>

  <div class="product-info">
    <h1>{{ product }}</h1>
    <p v-if="inStock">In stock</p>
    <p v-else>Out of Stock</p>
  </div>
</div>


            
              data: ()=>({
    product: "Socks",
    image: "./assets/vmSocks-green.jpg",
    inStock: true,
    details: ['80% cotton', '20% polyester', 'Gender-neutral']
})


            
              details: ['80% cotton', '20% polyester', 'Gender-neutral']


            
              <ul>
  <li v-for="detail in details">{{ detail }}</li>
</ul>


            
              variants: [
  {
    variantId: 2234,
    variantColor: 'green'
  },
  {
    variantId: 2235,
    variantColor: 'blue'
  }
]


            
              <div v-for="variant in variants">
  <p>{{ variant.variantColor }}</p>
</div>


            
              <div v-for="variant in variants" :key="variant.variantId">
  <p>{{ variant.variantColor }}</p>
</div>

sizes: ['S', 'M', 'L', 'XL', 'XXL', 'XXXL']


            
              <div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else>Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div v-for="variant in variants" :key="variant.variantId">
        <p>{{ variant.variantColor }}</p>
      </div>

    </div>
  </div>
</div>


            
              const app = Vue.createApp({
        data: () => ({
            product: "Socks",
            image: "./assets/vmSocks-green.jpg",
            inStock: true,
            details: ['80% cotton', '20% polyester', 'Gender-neutral'],
            variants: [
              {
                variantId: 2234,
                variantColor: "green"
              },
              {
                variantId: 2235,
                variantColor: "blue"
              }
            ]
        })
    });

    app.mount('#app');


            
              cart: 0


            
              <div class="cart">
  <p>Cart({{ cart }})</p>
</div>


            
              <button v-on:click="cart += 1">Add to cart</button>


            
              <button v-on:click="addToCart">Add to cart</button>


            
              methods: {
  addToCart() {
    this.cart += 1
  }
}


            
              variants: [
  {
    variantId: 2234,
    variantColor: "green",
    variantImage: "./assets/vmSocks-green.jpg"
  },
  {
    variantId: 2235,
    variantColor: "blue",
    variantImage: "./assets/vmSocks-blue.jpg"
  }
],


            
              <div v-for="variant in variants" :key="variant.variantId">
  <p @mouseover="updateProduct(variant.variantImage)">
    {{ variant.variantColor }}
  </p>
</div>


            
              updateProduct(variantImage) {
  this.image = variantImage
}


            
              <p @mouseover="updateProduct(variant.variantImage)">


            
              updateProduct(variantImage) {
  this.image = variantImage
}


            
              updateProduct: function(variantImage) {
  this.image = variantImage
}


            
              <div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else>Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div v-for="variant in variants" :key="variant.variantId">
        <p @mouseover="updateProduct(variant.variantImage)">
          {{ variant.variantColor }}
        </p>
      </div>

      <button v-on:click="addToCart">Add to cart</button>

      <div class="cart">
        <p>Cart({{ cart }})</p>
      </div>

    </div>
  </div>
</div>


            
              const app = createApp({
    data() {
        return {
            product: "Socks",
            image: "./assets/vmSocks-green.jpg",
            inStock: true,
            details: ['80% cotton', '20% polyester', 'Gender-neutral'],
            variants: [
                {
                    variantId: 2234,
                    variantColor: "green",
                    variantImage: "./assets/vmSocks-green.jpg"
                },
                {
                    variantId: 2235,
                    variantColor: "blue",
                    variantImage: "./assets/vmSocks-blue.jpg"
                }
            ],
            cart: 0
        };
    },
    methods: {
        addToCart() {
            this.cart += 1;
        },
        updateProduct(variantImage) {
            this.image = variantImage;
        }
    }
});

app.mount('#app');


            
              <div
  class="color-box"
  v-for="variant in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
>
  <p @mouseover="updateProduct(variant.variantImage)">
    {{ variant.variantColor }}
  </p>
</div>


            
              <div
  class="color-box"
  v-for="variant in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
  @mouseover="updateProduct(variant.variantImage)"
>
</div>


            
              inStock: true,


            
              <button
  v-on:click="addToCart"
  :disabled="!inStock"
>
  Add to cart
</button>


            
              <button
  v-on:click="addToCart"
  :disabled="!inStock"
  :class="{ disabledButton: !inStock }"
>
  Add to cart
</button>


            
              <div :class="classObject"></div>
<div :class="[activeClass, errorClass]"></div>


            
              <div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else :class="{ outOfStock: !inStock }">Out of Stock</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div
        class="color-box"
        v-for="variant in variants"
        :key="variant.variantId"
        :style="{ backgroundColor:variant.variantColor }"
        @mouseover="updateProduct(variant.variantImage)"
      ></div>

      <button
        v-on:click="addToCart"
        :disabled="!inStock"
        :class="{ disabledButton: !inStock }"
      >
        Add to cart
      </button>

      <div class="cart">
        <p>Cart({{ cart }})</p>
      </div>
    </div>
  </div>
</div>


            
              const app = createApp({
    data() {
        return {
            product: 'Socks',
            brand: 'Vue Mastery',
            image: './assets/vmSocks-green.jpg',
            inStock: true,
            details: ['80% cotton', '20% polyester', 'Gender-neutral'],
            variants: [
                {
                    variantId: 2234,
                    variantColor: 'green',
                    variantImage: './assets/vmSocks-green.jpg'
                },
                {
                    variantId: 2235,
                    variantColor: 'blue',
                    variantImage: './assets/vmSocks-blue.jpg'
                }
            ],
            cart: 0
        };
    },

    methods: {
        addToCart() {
            this.cart += 1;
        },
        updateProduct(variantImage) {
            this.image = variantImage;
        }
    }
});

app.mount('#app');


            
              computed: {
  title() {
    return this.brand + ' ' + this.product;
  }
}


            
              <h1>{{ product }}</h1>


            
              <h1>{{ title }}</h1>


            
              updateProduct(variantImage) {
  this.image = variantImage;
}


            
              selectedVariant: 0,


            
              <div
  class="color-box"
  v-for="(variant, index) in variants"
  :key="variant.variantId"
  :style="{ backgroundColor:variant.variantColor }"
  @mouseover="updateProduct(variant.variantImage)"
></div>


            
              @mouseover="updateProduct(index)"


            
              updateProduct(index) {
  this.selectedVariant = index;
  console.log(index);
}


            
              image() {
  return this.variants[this.selectedVariant].variantImage;
}


            
              variants: [
  {
    variantId: 2234,
    variantColor: 'green',
    variantImage: './assets/vmSocks-green.jpg',
    variantQuantity: 10
  },
  {
    variantId: 2235,
    variantColor: 'blue',
    variantImage: './assets/vmSocks-blue.jpg',
    variantQuantity: 0
  }
],


            
              inStock(){
  return this.variants[this.selectedVariant].variantQuantity
}


            
              <div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ title }}</h1>
      <p v-if="inStock">In stock</p>
      <p v-else>Out of Stock</p>
      <p>Shipping: {{ shipping }}</p>

      <ul>
        <li v-for="detail in details">{{ detail }}</li>
      </ul>
      <div
        class="color-box"
        v-for="(variant, index) in variants"
        :key="variant.variantId"
        :style="{ backgroundColor: variant.variantColor }"
        @mouseover="updateProduct(index)"
      ></div>

      <button
        v-on:click="addToCart"
        :disabled="!inStock"
        :class="{ disabledButton: !inStock }"
      >
        Add to cart
      </button>

      <div class="cart">
        <p>Cart({{ cart }})</p>
      </div>
    </div>
  </div>
</div>


            
              const app = Vue.createApp({
  data() {
    return {
      product: 'Socks',
      brand: 'Vue Mastery',
      selectedVariant: 0,
      details: ['80% cotton', '20% polyester', 'Gender-neutral'],
      variants: [
        {
          variantId: 2234,
          variantColor: 'green',
          variantImage: './assets/vmSocks-green.jpg',
          variantQuantity: 10
        },
        {
          variantId: 2235,
          variantColor: 'blue',
          variantImage: './assets/vmSocks-blue.jpg',
          variantQuantity: 0
        }
      ],
      cart: 0,
    };
  },
  methods: {
    addToCart() {
      this.cart += 1;
    },
    updateProduct(index) {
      this.selectedVariant = index;
      console.log(index);
    }
  },
  computed: {
    title() {
      return this.brand + ' ' + this.product;
    },
    image() {
      return this.variants[this.selectedVariant].variantImage;
    },
    inStock() {
      return this.variants[this.selectedVariant].variantQuantity;
    }
  }
});

app.mount('#app');


            
              app.component('product', {})


            
              app.component('product', {
  template: `
    <div class="product">
… // Здесь будет весь HTML-код, который раньше был в элементе с классом product
    </div>
  `
})


            
              app.component('product', {
  template: `
  <div class="product">
…
  </div>
  `,
  data() {
    return {
      // тут будут данные
    }
  },
    methods: {
      // тут будут методы
    },
    computed: {
      // тут будут вычисляемые свойства
    }
})


            
              const app = Vue.createApp({});

app.component('product', { ... код продукта переехал сюда ... });

app.mount('#app');


            
              <div id="app">
  <product></product>
</div>


            
              <div id="app">
  <product></product>
  <product></product>
  <product></product>
</div>


            
              <div id="app">
  <product></product>
</div>


            
              const app = Vue.createApp({
  data() {
    return {
      premium: true
    };
  }
});

app.mount('#app');


            
              app.component('product', {
  props: {
    premium: {
      type: Boolean,
      required: true
    }
  },
  // Тут будут описания данных, методов, вычисляемых свойств
})


            
              <p>User is premium: {{ premium }}</p>


            
              <div id="app">
  <product :premium="premium"></product>
</div>


            
              shipping() {
  if (this.premium) {
    return "Free";
  } else {
    return 2.99
  }
}


            
              <ul>
  <li v-for="detail in details">{{ detail }}</li>
</ul>

Vue.js для начинающих¶

Предварительные требования¶

Урок 1: экземпляр Vue¶

Начальный вариант кода¶

Задача¶

Экземпляр Vue¶

Подключение экземпляра Vue к элементу веб-страницы¶

Размещение данных в экземпляре Vue¶

Использование JavaScript-выражений в HTML-коде¶

Важный термин: выражение¶

Примеры выражений¶

Знакомство с реактивностью¶

Практикум¶

Итоги¶

Урок 2: привязка атрибутов¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Важный термин: привязка данных¶

Решение задачи¶

Дополнительные варианты использования v-bind¶

Практикум¶

Итоги¶

Урок 3: условный рендеринг¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Решение задачи¶

Директива v-else-if¶

Директива v-show¶

Практикум¶

Итоги¶

Урок 4: рендеринг списков¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Решение задачи¶

Перебор массива объектов¶

Практикум¶

Итоги¶

Урок 5: обработка событий¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Решение¶

Задача¶

Решение¶

Синтаксис ES6¶

Практикум¶

Итоги¶

Урок 6: привязка классов и стилей¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Решение¶

Задача¶

Решение¶

Дополнительные сведения¶

Практикум¶

Итоги¶

Урок 7: вычисляемые свойства¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Решение задачи¶

Более сложный пример¶

Дополнительные сведения о вычисляемых свойствах¶

Практикум¶

Итоги¶

Урок 8: компоненты¶

Цель урока¶

Начальный вариант кода¶

Задача¶

Решение задачи¶

Задача¶

Решение задачи¶

Практикум¶

Итоги¶

PS¶

Контрольные задания для самостоятельного решения¶

Дополнительные варианты использования `v-bind`¶