Laavel에서 만진 Vue.지식을 총결하다.
그리고 저는 Docker 컨테이너 안에서 Laavel을 이동합니다.
Homestead 환경의 사람이라면 핫 중재를 할 수 있을 것 같다.혹시 알아볼 수 있을지도 몰라요.
구축
개발 구축npm run dev
변경 내용 자동 구성 모니터링npm run watch
제품 구축npm run prod
개발 구축은 컨트롤러에 경고와 오류를 표시합니다.
제품 구성에 대한 경고가 더 이상 콘솔에 표시되지 않습니다.
자바스크립트는 브라우저에 잘 캐시되어 있기 때문에 Shift + Control + R 등을 구축하면 캐시 삭제를 다시 불러옵니다.
실행 결과는 구축 전과 마찬가지로 슬프다
Vue가 추진하는 범위 resources/js/app.js에 기술된 이 코드에 의해 결정됩니다.
app.jsconst app = new Vue({
el: '#app'
});
초기 상태에서 HTML 태그의 id는 app에서만 Vue입니다.js가 작업을 시작했습니다.
라벨이 자동으로 생성한app.blade.php은<body>의 한가운데<div id="app">가 있는데, 처음에는 대부분의 요소와 계승된 Blade 템플릿에 작용하기 위한 것이다.
일부러 안 해도 돼.
app.js 읽기 타이밍
읽기app.js의 코드에 defer라는 수수께끼 같은 단어가 포함되어 있다. <!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
이것은 HTML을 읽는 동안 비동기적으로 자바스크립트를 읽고 HTML을 분석한 후에 이 스크립트를 실행하는 기술입니다.
따라서 실행app.js 이전app.blade.php이나 이를 계승하는 Blade 템플릿에서 별도로 설명된 JavaScript가 실행되기 때문에 Vue가 실행됩니다.js를 비롯한 도서관은 아무것도 사용할 수 없습니다.
또한 보증defer 등이 붙은 라벨의 읽기와 해석 순서가 매번 같기 때문에 다른 파일로 읽을 필요가 없고 <script>에 기술하거나 Vue Component에 자바스크립트를 써서 구축된 결과resources/js/app.js에 합쳐야 한다.
즉, Blade 템플릿에 JavaScript를 쓰는 것이 아닙니다.
데이터 바인딩
Vue.js는 변수와View의 요소를 결합한 데이터 귀속이라고 불리는 기능이 매력적인 프레임워크라고 한다.const app = new Vue({
el: '#app',
data: {
message: 'こんにちは'
}
});
<div id="app">
{{ message }}
</div>
실행 결과<div id="app">
こんにちは
</div>
JavaScript로 변수를 변경하면 HTML도 임의로 디스플레이를 전환하고 input 요소 등에 변수를 지정하면 HTML에서 입력한 JavaScript의 변수에 따라 값이 변경됩니다.<input v-model="message" placeholder="入力してください">
<p>{{ message }}</p>
텍스트 필드에 입력한 내용은 p 요소에 즉시 반영됩니다.대단하다
양식 입력 바인딩 - Vue.js
반복적으로 말하면 자바스크립트의 변수의 내용을 충분히 대입했기 때문에 자바스크립트 측면에서 폼의 내용을 가져오는 처리를 할 필요가 없다.
아무것도 귀찮아하지 않아요...!
Vue Component
스스로 HTML 태그를 만드는 마음으로 Component의 물건을 만든다.public/js/app.js 별도로 문서를 만드는 방법을 소개한다.
여러가지 방법이 있는 것 같은데 조사가 안 됐어요.
Component 쓰기
라벨이 준비한 샘플의 경우
Phptorm이라면 새로 만든 파일부터 브이 클랜트가 간단해져 길을 잃지 않는다.
ExampleComponent.vue<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
.vue 태그에는 부모 요소가 하나만 표시됩니다.
두 명 이상의 부모를 기술했다면 구축은 통과할 수 없었다.
오류 예<template>
<div>
...
</div>
<div>
...
</div>
</template>
<script>
...
</script>
<template>에는 다른 Vue Component도 포함될 수 있습니다.
매우 통용되는 Component를 제작했다면 따로 사용하면 재활용성이 높아져 점수가 작을수록 좋아요!<template> 어떤 SPA 구축을 사용했는지 페이지 자체를 Vue Component로 기술합니다.
vue-router 태그
VueComponent<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
HTML<navigation-link url="/profile">
Your Profile
</navigation-link>
렌더링 결과<a
v-bind:href="url"
class="nav-link"
>
Your Profile
</a>
정말 실망이네요...!!!
Component 등록
resources/js/app.jsVue.component('example-component', require('./components/ExampleComponent.vue').default);
<slot>에 require()의 상대 경로가 적혀 있습니다.
npm 등에 도입된 컴포넌트.vue라면Vue.use(/* なんかインポートしたときの名前 */);에 등록해야 할 것들이 있으니 유저를 확인하는 것이 좋습니다.
이렇게 되면 HTML에 Vue.component()라고 쓰면 컴포넌트가 빠르게 펼쳐진다.
모든 Component를 등록할 수 있습니다.
<example-component></example-component>의 20줄 정도에 이런 코드가 있다./**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Docs 리뷰에 기재된 대로 리뷰 출력의 마지막 두 줄을 사용하여 resource/js/app.js 산하의 resource/js/ 파일을 Component로 임의로 등록합니다.
이제 파일 이름을 PascalCase로 지정하여 HTML에서 하도급 상황에 사용합니다..vue아주 편리하군요!
촉각을 한데 모으다.
Vue.js는 자바스크립트와 jQuery의 DOM 작업에 고생한 사람들이 쉽게 만들 수 있도록 만든 프레임워크인 것 같습니다.
체크 상자의 체크 상자도 변수를 사용하여 양방향 데이터를 연결하고 CSS도 bool형 변수와 연합하여 클래스를 추가하거나 삭제합니다.
변수 변경을 인지하지 못하면 HTML에도 바로 반영돼 의식이 크게 줄어 조작이 수월해 다행이다...이렇게 생각하다.
또한 HTML과 JavaScript를 자연스럽게 조합해서 쓸 수 있기 때문에 JavaScript를 써야 합니다...이런 기분은 없어진다.
이것은 좋은 물건이다...!
일본어 Docs라는 예의 바르고 부드러운 착한 아이.
참고 자료
먼저-Vue.js
Reference
이 문제에 관하여(Laavel에서 만진 Vue.지식을 총결하다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Denpa_Ghost/items/ae1fe53d17ebe0899848
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm run dev
npm run watch
npm run prod
resources/js/app.js에 기술된 이 코드에 의해 결정됩니다.app.js
const app = new Vue({
el: '#app'
});
라벨이 자동으로 생성한
app.blade.php은<body>의 한가운데<div id="app">가 있는데, 처음에는 대부분의 요소와 계승된 Blade 템플릿에 작용하기 위한 것이다.일부러 안 해도 돼.
app.js 읽기 타이밍
읽기
app.js의 코드에 defer라는 수수께끼 같은 단어가 포함되어 있다. <!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
따라서 실행
app.js 이전app.blade.php이나 이를 계승하는 Blade 템플릿에서 별도로 설명된 JavaScript가 실행되기 때문에 Vue가 실행됩니다.js를 비롯한 도서관은 아무것도 사용할 수 없습니다.또한 보증
defer 등이 붙은 라벨의 읽기와 해석 순서가 매번 같기 때문에 다른 파일로 읽을 필요가 없고 <script>에 기술하거나 Vue Component에 자바스크립트를 써서 구축된 결과resources/js/app.js에 합쳐야 한다.즉, Blade 템플릿에 JavaScript를 쓰는 것이 아닙니다.
데이터 바인딩
Vue.js는 변수와View의 요소를 결합한 데이터 귀속이라고 불리는 기능이 매력적인 프레임워크라고 한다.const app = new Vue({
el: '#app',
data: {
message: 'こんにちは'
}
});
<div id="app">
{{ message }}
</div>
실행 결과<div id="app">
こんにちは
</div>
JavaScript로 변수를 변경하면 HTML도 임의로 디스플레이를 전환하고 input 요소 등에 변수를 지정하면 HTML에서 입력한 JavaScript의 변수에 따라 값이 변경됩니다.<input v-model="message" placeholder="入力してください">
<p>{{ message }}</p>
텍스트 필드에 입력한 내용은 p 요소에 즉시 반영됩니다.대단하다
양식 입력 바인딩 - Vue.js
반복적으로 말하면 자바스크립트의 변수의 내용을 충분히 대입했기 때문에 자바스크립트 측면에서 폼의 내용을 가져오는 처리를 할 필요가 없다.
아무것도 귀찮아하지 않아요...!
Vue Component
스스로 HTML 태그를 만드는 마음으로 Component의 물건을 만든다.public/js/app.js 별도로 문서를 만드는 방법을 소개한다.
여러가지 방법이 있는 것 같은데 조사가 안 됐어요.
Component 쓰기
라벨이 준비한 샘플의 경우
Phptorm이라면 새로 만든 파일부터 브이 클랜트가 간단해져 길을 잃지 않는다.
ExampleComponent.vue<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
.vue 태그에는 부모 요소가 하나만 표시됩니다.
두 명 이상의 부모를 기술했다면 구축은 통과할 수 없었다.
오류 예<template>
<div>
...
</div>
<div>
...
</div>
</template>
<script>
...
</script>
<template>에는 다른 Vue Component도 포함될 수 있습니다.
매우 통용되는 Component를 제작했다면 따로 사용하면 재활용성이 높아져 점수가 작을수록 좋아요!<template> 어떤 SPA 구축을 사용했는지 페이지 자체를 Vue Component로 기술합니다.
vue-router 태그
VueComponent<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
HTML<navigation-link url="/profile">
Your Profile
</navigation-link>
렌더링 결과<a
v-bind:href="url"
class="nav-link"
>
Your Profile
</a>
정말 실망이네요...!!!
Component 등록
resources/js/app.jsVue.component('example-component', require('./components/ExampleComponent.vue').default);
<slot>에 require()의 상대 경로가 적혀 있습니다.
npm 등에 도입된 컴포넌트.vue라면Vue.use(/* なんかインポートしたときの名前 */);에 등록해야 할 것들이 있으니 유저를 확인하는 것이 좋습니다.
이렇게 되면 HTML에 Vue.component()라고 쓰면 컴포넌트가 빠르게 펼쳐진다.
모든 Component를 등록할 수 있습니다.
<example-component></example-component>의 20줄 정도에 이런 코드가 있다./**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Docs 리뷰에 기재된 대로 리뷰 출력의 마지막 두 줄을 사용하여 resource/js/app.js 산하의 resource/js/ 파일을 Component로 임의로 등록합니다.
이제 파일 이름을 PascalCase로 지정하여 HTML에서 하도급 상황에 사용합니다..vue아주 편리하군요!
촉각을 한데 모으다.
Vue.js는 자바스크립트와 jQuery의 DOM 작업에 고생한 사람들이 쉽게 만들 수 있도록 만든 프레임워크인 것 같습니다.
체크 상자의 체크 상자도 변수를 사용하여 양방향 데이터를 연결하고 CSS도 bool형 변수와 연합하여 클래스를 추가하거나 삭제합니다.
변수 변경을 인지하지 못하면 HTML에도 바로 반영돼 의식이 크게 줄어 조작이 수월해 다행이다...이렇게 생각하다.
또한 HTML과 JavaScript를 자연스럽게 조합해서 쓸 수 있기 때문에 JavaScript를 써야 합니다...이런 기분은 없어진다.
이것은 좋은 물건이다...!
일본어 Docs라는 예의 바르고 부드러운 착한 아이.
참고 자료
먼저-Vue.js
Reference
이 문제에 관하여(Laavel에서 만진 Vue.지식을 총결하다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Denpa_Ghost/items/ae1fe53d17ebe0899848
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const app = new Vue({
el: '#app',
data: {
message: 'こんにちは'
}
});
<div id="app">
{{ message }}
</div>
<div id="app">
こんにちは
</div>
<input v-model="message" placeholder="入力してください">
<p>{{ message }}</p>
스스로 HTML 태그를 만드는 마음으로 Component의 물건을 만든다.
public/js/app.js 별도로 문서를 만드는 방법을 소개한다.여러가지 방법이 있는 것 같은데 조사가 안 됐어요.
Component 쓰기
라벨이 준비한 샘플의 경우
Phptorm이라면 새로 만든 파일부터 브이 클랜트가 간단해져 길을 잃지 않는다.
ExampleComponent.vue
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
.vue 태그에는 부모 요소가 하나만 표시됩니다.두 명 이상의 부모를 기술했다면 구축은 통과할 수 없었다.
오류 예
<template>
<div>
...
</div>
<div>
...
</div>
</template>
<script>
...
</script>
<template>에는 다른 Vue Component도 포함될 수 있습니다.
매우 통용되는 Component를 제작했다면 따로 사용하면 재활용성이 높아져 점수가 작을수록 좋아요!
<template> 어떤 SPA 구축을 사용했는지 페이지 자체를 Vue Component로 기술합니다.vue-router 태그
VueComponent
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
<navigation-link url="/profile">
Your Profile
</navigation-link>
<a
v-bind:href="url"
class="nav-link"
>
Your Profile
</a>
Component 등록
resources/js/app.js
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
<slot>에 require()의 상대 경로가 적혀 있습니다.npm 등에 도입된 컴포넌트
.vue라면Vue.use(/* なんかインポートしたときの名前 */);에 등록해야 할 것들이 있으니 유저를 확인하는 것이 좋습니다.이렇게 되면 HTML에
Vue.component()라고 쓰면 컴포넌트가 빠르게 펼쳐진다.모든 Component를 등록할 수 있습니다.
<example-component></example-component>의 20줄 정도에 이런 코드가 있다./**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
resource/js/app.js 산하의 resource/js/ 파일을 Component로 임의로 등록합니다.이제 파일 이름을 PascalCase로 지정하여 HTML에서 하도급 상황에 사용합니다.
.vue아주 편리하군요!촉각을 한데 모으다.
Vue.js는 자바스크립트와 jQuery의 DOM 작업에 고생한 사람들이 쉽게 만들 수 있도록 만든 프레임워크인 것 같습니다.
체크 상자의 체크 상자도 변수를 사용하여 양방향 데이터를 연결하고 CSS도 bool형 변수와 연합하여 클래스를 추가하거나 삭제합니다.
변수 변경을 인지하지 못하면 HTML에도 바로 반영돼 의식이 크게 줄어 조작이 수월해 다행이다...이렇게 생각하다.
또한 HTML과 JavaScript를 자연스럽게 조합해서 쓸 수 있기 때문에 JavaScript를 써야 합니다...이런 기분은 없어진다.
이것은 좋은 물건이다...!
일본어 Docs라는 예의 바르고 부드러운 착한 아이.
참고 자료
먼저-Vue.js
Reference
이 문제에 관하여(Laavel에서 만진 Vue.지식을 총결하다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Denpa_Ghost/items/ae1fe53d17ebe0899848
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
먼저-Vue.js
Reference
이 문제에 관하여(Laavel에서 만진 Vue.지식을 총결하다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Denpa_Ghost/items/ae1fe53d17ebe0899848텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
