Vue_1

리액트와 비슷하게 

작업 디렉토리에서 

npm run serve

 하면 실행된다. 

 

 

사진 사이즈는 뻔하게

<template>
  <img alt="Vue logo" src="./assets/test.jpg" class="test">
  <HelloWorld msg="하나 둘 셋! "/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.test {
  width: 50%;
  height: auto;
}
</style>

처럼 css로 줄일 수 있고

 

또 

<template>
  <img alt="Vue logo" src="./assets/test.jpg" :style="test">
  <HelloWorld msg="하나 둘 셋! "/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      test: {
        width: '70%',
        height: 'auto'
      }
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.test {
  width: 50%;
  height: auto;
}
</style>

v-bind를 사용해 적용할 수도 있다.

 

여기에 동적 스타일을 적용하면 

<template>
  <img alt="Vue logo" src="./assets/test.jpg" :style="test">
  <HelloWorld msg="하나 둘 셋! "/>
  <button @click="toggleWidth">짜잔</button>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return {
      test: {
        width: '70%',
        height: 'auto'
      }
    }
  },
  methods:{
    toggleWidth(){
      this.test.width = this.test.width === '70%'? '30%' : '70%'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.test {
  width: 50%;
  height: auto;
}
</style>

 

로 버튼을 클릭할 때 이미지 사이즈가 변경된다.