django에서 vue사용하기

기본적인 templates에서 vue 구조 사용하기

기본적인 vue구조
<script type="text/javascript">
new Vue({
      el: '#starting',
      delimiters: ['{{','}}'],
      props : {
            {test: ''}
        },
      data: {
        articles: [],
        loading: true,
        currentArticle: {},
        message: null,
      },
      mounted: function() {
      },
      methods; {
      },
      components: {
      }
 })
</script>

vue.js에서 el은 id를 의마한다. => react에서는 id=root를 사용해서 지정해주는 것과 같다.
따라서 제일 상단에 id로 해당 staring을 지정해줘야 한다.

<div id="staring">
	<v-app>
    </v-app>
</div>

props는 상위 컴포넌트에서 하위 컴포넌트로 state를 넘길 때 사용한다.
아래와 같이 사용하면 된다.
하위 컴포넌트에서는 props : 에 받는 인자들을 적어주면 되고,
상위에서는 해당 컴포넌트를 쓸 때 같이 적어주면 된다.

# 상위
# 사용할 컴포넌트를 지정해주고
data : { 
	'test': ''
}
components: {
	'products' : Products
}


# 코드라인 (같이 state을 넘겨준다.)
<products :test='test'> </products>




#하위 Products 컴포넌트
# props에 받은 state를 적어주면 data에 따로 test model을 지정해주지 않아도 쓸 수 있다.
# 단 해당 변경점을 상위 컴포넌트로 다시 전달하려고 하면 function을 걸어주어야 한다.

props : {
	'test' : ''
}

dlimiters는 아래의 data를 사용할 때 사용할 태그를 정의한다.
예를 들면 dlimiters를 [[ , ]] 로 지정해놓았다면

<div>
	[[ test ]]
</div>

와 같이 하면 아래 지정해놓은 data test를 화면에 쓸 수 있다.

methods 는 사용할 함수를 지정할 수 있다.

# 함수 지정

methods : {
	sayHello(){
    	alert('안녕이라고 말해')
    }
	
}



# 코드 내에서 사용
<v-btn
	@click="sayHello">

</v-btn>

 

추가적으로 지정해놓은 함수를 하위 컴포넌트로 넘길 수도 있다.

# 상위
# 사용할 컴포넌트를 지정해주고
data : { 
	'test': ''
}
components: {
	'products' : Products
}
methods : {
	sayHello(){
    	alert('안녕이라고 말해')
    }	
}



# 코드라인 (같이 state을 넘겨준다.)
<products :test='test' @say-hello="sayHello"> </products>




#하위 Products 컴포넌트
# $emit을 통해 상위 컴포넌트에서 내려준 해당 함수를 하위 컴포넌트에서 호출 할 수 있다.

props : {
	'test' : ''
}

methods : {
	TestSayHello(param){
    	this.$emit('say-hello', param)
    }
}

좋은 글이 있어서 링크 첨부 :

[NodeJs/VueJs] 상위, 하위 컴포넌트간 데이터 전달 방법

[NodeJs/VueJs] 상위, 하위 컴포넌트간 데이터 전달 ᄇ

mounted()를 활용하면 아래  methods에 지정해놓은 함수를 랜더링 이후에 1회 실행한다.

data : { 
	'test': ''
},
components: {
	'products' : Products
},
# 랜더링 이후 해당 함수 1회실행
mounted() {
	sayHello()
},
methods : {
	sayHello(){
    	alert('안녕이라고 말해')
    }	
}