'JAVA SCRIPT'에 해당되는 글 2건

  1. 2019.02.22 Vue 기본 문법
  2. 2019.02.22 Vue.js 관련 학습 링크 모음.

Vue 기본 문법

Front-end/Vue.js 2019. 2. 22. 14:09


변수 Binding


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <h2>{{product}} is in shock</h2>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  product: 'Boots'

}

  })

</script>

  </Body>

 </html>





for loop


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <ul>

    <li v-for="product in products">

  {{product}}

</li>

  </ul>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  products: [

    'Boots',

'Jacket',

'Hiking Socks'

  ]

}

  })

</script>

  </Body>

 </html>



서비스의 JSON 데이터 처리


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <ul>

    <li v-for="product in products">

  {{product.quantity}} {{product.name}}

</li>

  </ul>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  products: [

  ]

},

created () {

  fetch('https://api.myjson.com/bins/74l63')

    .then(response => response.json())

.then(json => {

  this.products = json.products

})

}

  })

</script>

  </Body>

 </html>

 


IF 문


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <ul>

    <li v-for="product in products">

  {{product.quantity}} {{product.name}}

  <span v-if="product.quantity === 0">

    - OUT OF STOCK

  </span>

</li>

  </ul>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  products: [

  ]

},

created () {

  fetch('https://api.myjson.com/bins/74l63')

    .then(response => response.json())

.then(json => {

  this.products = json.products

})

}

  })

</script>

  </Body>

 </html>



compute (합계 구하기)


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <ul>

    <li v-for="product in products">

  {{product.quantity}} {{product.name}}

  <span v-if="product.quantity === 0">

    - OUT OF STOCK

  </span>

</li>

  </ul>

  <h2>Total Inventory: {{totalProducts}}</h2>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  products: [

  ]

},

computed: {

  totalProducts() {

    return this.products.reduce((sum, product) => {

  return sum + product.quantity

}, 0)

  }

},

created () {

  fetch('https://api.myjson.com/bins/74l63')

    .then(response => response.json())

.then(json => {

  this.products = json.products

})

}

  })

</script>

  </Body>

 </html>



Control (버튼 추가)


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <ul>

    <li v-for="product in products">

  {{product.quantity}} {{product.name}}

  <span v-if="product.quantity === 0">

    - OUT OF STOCK

  </span>

  <button @click="product.quantity += 1">

    Add

  </button>

  <button @click="product.quantity -= 1">

    Sub

  </button>

</li>

  </ul>

  <h2>Total Inventory: {{totalProducts}}</h2>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  products: [

  ]

},

computed: {

  totalProducts() {

    return this.products.reduce((sum, product) => {

  return sum + product.quantity

}, 0)

  }

},

created () {

  fetch('https://api.myjson.com/bins/74l63')

    .then(response => response.json())

.then(json => {

  this.products = json.products

})

}

  })

</script>

  </Body>

 </html>


Control (입력상자 Input)


 <html>

  <head>

  </head>

  <Body>

    <div id="app">

  <ul>

    <li v-for="product in products">

  <input type="number" v-model.number="product.quantity">

  {{product.name}}

  <span v-if="product.quantity === 0">

    - OUT OF STOCK

  </span>

  <button @click="product.quantity += 1">

    Add

  </button>

  <button @click="product.quantity -= 1">

    Sub

  </button>

</li>

  </ul>

  <h2>Total Inventory: {{totalProducts}}</h2>

</div>

<script src="https://unpkg.com/vue"></script>

<script>

  const app = new Vue({

    el: '#app',

data: {

  products: [

  ]

},

computed: {

  totalProducts() {

    return this.products.reduce((sum, product) => {

  return sum + product.quantity

}, 0)

  }

},

created () {

  fetch('https://api.myjson.com/bins/74l63')

    .then(response => response.json())

.then(json => {

  this.products = json.products

})

}

  })

</script>

  </Body>

 </html>

:

Vue.js 관련 학습 링크 모음.

카테고리 없음 2019. 2. 22. 13:22



왜 Vue.js를 배우고 싶어하나? 



: