입문

제가 Laravel과 Vuejs를 찾아봤어요.

총결산

new app Vue에서 데이터: bind 설정

bind에서 설정한 데이터는 HTML에서 {{}}}로 표시됩니다

bind에서 설정한 데이터를 JavaScript에서 다시 작성한 후 변경 사항을 즉시 반영

Vue 파일 구조

index.html

웹 페이지의 디자인.vueid=app을 적용한다고 쓰여 있기 때문에 여기서 App.vue 구성 요소를 적용합니다

main.js app.js 등

우선 집행

new Vue(el:'#app',template:),index.html의 id=app의 루트 구성 요소 App.vue를 표시합니다.template에서 지정한 내용을 표시합니다

new Vue({
  el: '#app',
  router, // ルーティングの定義を読み込む
  components: { App }, // ルートコンポーネントの使用を宣言する
  template: '<App />' // ルートコンポーネントを描画する
})

App.vue 읽기 및 내용 보기

App.vue

화면에 여기에 표시됩니다

루트 구성 요소

여기에서 여러 가지 구성 요소를 층별로 호출한다

템플릿 구문

실제 표시 섹션

{{}}

message로 설정된 html 라벨은 p 라벨에 편입됩니다

cssclass를 설정할 수 있습니다

라벨 표시를 숨길 수 있습니다

각 라벨에 v-if를 추가하는 것은 번거롭기 때문에template 라벨로 구분합니다

구성 요소

{{{{}}에 구성 요소 표시 쓰기

<hello name="aaa"/>

vue 대상에 기록된bind 설정은 구성 요소에 함수로 기록됩니다

Vue.component("hello",
{
    props:["name"]
   //コンポーネントでは関数として定義
    // vueオブジェクトのbindの設定
    data:function(){
        return{
            message: ""
        };
    },
    template: '<p>{{message}}</p>'
});

props로 값 받아들이기

속성

vmodel

<input type="text" v-model="name">

입력 값을 데이터 속성 값에 연결하는 기능입니다.바인딩해야 하기 때문에 입력 후 바로 반영
v-on
computed는 산술 속성입니다.값이 변경된 호출

Vue.component('hello',
 computed:{
     calc:function(event){

     }
 }
 methods:{
   doaction: function(event)

   }
template: '<p v-on:click="docation"></p>'
)}

로컬 구성 요소

new Vue에 적힌 말은 로컬 구성 요소입니다

Vue.component를 쓰면 전역 구성 요소입니다

가상 구성 요소

<template> と<scripts>と<style>に分かれる

참고 자료

Vue.js&Nuxt.입문

Vuejs 개발 소프트웨어 설치

Vuejs에서 개발한 명령 도구입니다

Vuejs 응용 프로그램 개발에 도움이 되는 기능이 많이 준비되어 있습니다

npm install -g @vue/cli
npm install -g @vue/cli-service-global

원형 기능

.vue라는 확장자 파일을 쓰면 간단한 응용 프로그램 디스플레이를 만들 수 있습니다

vue seve // vueファイルを読み込んでサーバー起動

프로젝트 방식

웹 서버의 기능.테스트나 간단하게 해보고 싶은 상황이 이 방식이다

일반 웹 서버가 공개된 상황에서 구축되고 생성된 파일을 설정합니다

vue create プロジェクト名

프로젝트에 영향을 미치는 프로그램에 Y/N으로 응답하기
프로젝트를 수행합니다.웹 브라우저에서 가속 가능

npm run serve

만든 항목을 웹 서버에 업로드하고 게시할 때 프로젝트를 구축하고 게시 파일을 만듭니다.

npm run build

dist에서 파일을 만들고 업로드하면 공개할 수 있습니다

vuex

https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3
↑

작업 - 커밋 중 호출 해제 - 상태 업데이트

구성 요소에서 공동으로 처리할 수 있는 상점을 제공합니다

stores 폴더/indes를 설정합니다.js new Vuex로Store

$store에서 스토리지 값을 체크 아웃합니다

store의 값은 직접 변경하지 않고 $store를 사용합니다.commit

사용 동작, 예를 들어commit 옷의 얇은 음소거 등

API 동작

동작은 비동기 처리이다

정음은 동기화 처리다

저장

예를 들어 사용자의 인증 상태도 어셈블리 참조를 뛰어넘고 싶은 데이터에 해당합니다.앞에서 본 바와 같이 내비게이션 표시줄과 꼬리표는 인증 상태를 참조하여 표시 요소를 전환해야 한다.

const state = {}

const getters = {}

const mutations = {}

const actions = {}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

import Vue from 'vue'
import Vuex from 'vuex'

import auth from './auth'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth
  }
})

export default store

상점의 내용을 모듈로 잘라내다
app.js

import Vue from 'vue'
import router from './router'
import store from './store' // ★　追加
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  store, // ★　追加
  components: { App },
  template: '<App />'
})

웹api의 csrf 대책

XSRF-TOKEN이라는 프로젝트로 유명해야 합니다.이것이 바로 암호화된 CSRF 토큰입니다.
이번에는 표가 아니라 쿠키와 HTTP 제목을 활용하는 방법을 채택했다.쿠키에서 영패를 검색하여 HTTP 헤더에 포함된 요청을 HTTP 헤더로 보낼 때 CSRF 검사가 필요합니다.
bootstrap.js는 Ajax 통신에 사용되는 Axios 라이브러리의 설정을 기술했다.
Ajax가 요청한 X-Requested-With 제목을 부여함으로써 영패를 X-XSRF-TOKEN 제목에 포함하고, Laravel은 표를 보는 것이 아니라 제목을 보고 CSRF 영패 검사를 합니다.

Lavavel

Laravel은 처음부터 JavaScript, Vue 구성 요소, SCSS 등을 컴파일하는 구조를 가지고 있다.따라서 Gulp나 Webpack 등 번거로운 설정 작업을 할 필요가 없다.
구체적으로 말하면 웹 팩에 전단을 구축하지만 설정이 편리하도록 Laravel Mix라는 라이브러리를 사용합니다.
Javascript 설정 컴파일

mix.js('resources/js/app.js', 'public/js')

httpd.conf

laravel에서 라우팅할 때 AllowOverride All 필요