Vue 3に入る

25120 ワード
テキストリンク
nodejsをインストールする
https://nodejs.org/en/download/
gitをインストール
https://git-scm.com/downloads
Vue CLIをインストールする
npmをインストールします
インストール
NPMのインストール
Vueルータのインストール
NPMのインストールvueルータ
プロジェクトの作成
Vueワークショップ
ダイアログオプションの選択
  • デフォルト( Vue 2 )
  • デフォルト( Vue 3 )

    • Note: Use Vue 2 if you plan to use Vuex and/or Vue Router


    プロジェクトを実行する
    Vueワークショップ
    パッケージの編集.JSON ( 6行目)
    Vue CLIサービスサーブ--ホストlocalhost
    NPMランサーブ

    Vuejs基本


    反応性


    反応性Vue
    <template>
  <div class="pad-top">
    The time is: {{ date }}
  </div>
</template>

<script>
export default {
  name: "Reactivity",
  data() {
    return {
      date: null,
    }
  },
  mounted() {
    setInterval(() => {
      this.date = (new Date()).toLocaleString()
    }, 1000);
  },
}
</script>

<style scoped>
</style>

    結合


    InputBinding.Vue
    <template>
  <div class="pad-top">
    <span>Type your name:</span>
    <input
       class="margin-right"
       v-model="name"
    />
  </div>
  <div class="pad-top">
    Your name is {{ name }}!
  </div>
</template>

<script>
export default {
  name: "InputBinding",
  data() {
    return {
      name: ‘’,
    }
  },
}
</script>

<style scoped>
.pad-top {
  padding-top: 15px;
}
</style>

    入力結合に基づく要素可視性


    可視化.Vue
    <template>
  <div class="pad-top">
    <span>Type your name:</span>
    <input
       class="margin-right"
       v-model="name"
    />
  </div>
  <div class="pad-top" v-show="name !== ''">
    Your name is {{ name }}!
  </div>
</template>

<script>
export default {
  name: "InputBindingVisibility",
  data() {
    return {
      name: ‘’,
    }
  },
}
</script>

<style scoped>
.pad-top {
  padding-top: 15px;
}
</style>

    イベント処理


    EventhandlingVue
    <template>
  <div>
    <button @click="toggleMe">Click me!</button>
  </div>
</template>

<script>
export default {
  name: "EventHandling",
  methods: {
    toggleMe() {
      alert(‘I was clicked!’);
    }
  }
}
</script>

<style scoped>
</style>

    条件レンダリング


    条件付けレンダリング.Vue
    <template>
  <div class="pad-top">
    <button @click="toggleMe">Click me!</button>
  </div>
  <div class="pad-top" v-if="toggleDiv">
    HOLA!
  </div>
</template>

<script>
export default {
  name: "ConditionalRendering",
  data() {
    return {
      toggleDiv: false,
    }
  },
  methods: {
    toggleMe() {
      this.toggleDiv = !this.toggleDiv
    }
  }
}
</script>

<style scoped>
.pad-top {
  padding-top: 15px;
}
</style>

    リストレンダリング


    リストラディング.Vue
    <template>
  <div>
    <div>
      Things to do:
    </div>
    <div>
      <ul>
        <li v-for="listItem in sampleList" :key="listItem.text">
          {{ listItem.text }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "ListRendering",
  data() {
    return {
      sampleList: [
        { text: 'Eat' },
        { text: 'Sleep' },
        { text: 'Be awesome' }
      ]
    }
  },
}
</script>

<style scoped>
</style>

    VUEコンポーネントのライフサイクル


    Link

    Vueライフサイクルフック


    Link

    Vueライフサイクルフック


    Hooks.vue
<template>
  <div>
    <h1>Hello!</h1>
  </div>
</template>

<script>
export default {
  name: "Hooks",
  beforeCreate() {
    // Called after the instance has been initialized
    alert(‘beforeCreate triggered.’);
  },
  created() {
    // Called after the instance is created
    alert(‘created triggered.’);
  },
  beforeMount() {
    // Called right before the mounting begins
    alert(‘beforeMount triggered.’);
  },
  mounted() {
    // Called after the instance has been mounted
    alert(‘mounted triggered.’);
  },
  beforeUpdate() {
    // Called when data changes, before the DOM is patched
    alert(‘beforeUpdate triggered.’);
  },
  updated() {
    /**
     * Called after a data change causes the virtual DOM 
     * to be re-rendered and patched.
     */
    alert(‘updated triggered.’);
  },
  beforeUnmount() {
    // Called right before a component instance is unmounted
    alert(‘beforeUnmount triggered.’);    
  },
  unmounted() {
    // Called after a component instance has been unmounted
    alert(‘unmounted triggered.’);
  }
}
</script>

<style scoped>
</style>

    計算された対メソッド：何を使用するか？


    計算のプロパティ
    それらの反応依存性に基づいてキャッシュされる
    その反応依存性のいくつかが変化したときにのみ再評価する
    メソッド:
    キャッシュは発生しません
    再レンダリングが発生するたびに常に関数を実行します
    TL : DR
    機能がDOM変更に反応するとき、計算された特性を使用してください
    ユーザーイベントによって機能がトリガーされるときにメソッドを使用する
    計算プロパティ.Vue
    <template>
  <div>
    <div>Do I have things to do? {{ thingsToDo }}</div>
    <div>Things to do:</div>
    <ul>
      <li v-for="listItem in sampleList" :key="listItem.text">
        {{ listItem.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ComputedProperties",
  computed: {
    thingsToDo() {
      /**
 * This statement’s result is cached and will only
       * re-evaluate when sampleList changes content,
       * saving computational power.
       */
      return this.sampleList.length > 0 ? 'Yes' : 'No'
    }
  },
  data() {
    return {
      sampleList: [
        { text: 'Eat' },
        { text: 'Sleep' },
        { text: 'Be awesome' }
      ]
    }
  },
}
</script>

<style scoped>
</style>

    V‐IF vs V‐Show：何を使うか？


    V - IF :
    条件付きレンダリング
    イベントリスナーと子コンポーネントは適切に破棄され、再作成されます
    DOM要素は適切に破棄され再生成される
    「怠惰」DOM要素は、最初の負荷で条件が真でない限り、レンダリングされません
    Vショー
    条件にかかわらず常にレンダリングされる
    CSSを使用して要素のオンとオフを切り替える
    イベントリスナーと子コンポーネントの状態に関係なくレンダリングされます
    DOMの要素は、オンとオフを切り替えるとレンダリングされます
    TL : DR

    Use v-show if you need to toggle something very often
    Use v-if if the condition is unlikely to change at runtime


    コンテナーサンプル.Vue
    <template>
  <div>
    <div>
      <button @click=”toggleContent”>Click Me!</button>
    </div>
    <div v-if=”showContent”>
      <span>I am v-if rendered!</span>
    </div>
    <div v-show=”showContent”>
      <span>I am v-show rendered</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "ConditionalSample",
  data() {
    return {
      showContent: false
    }
  },
  methods: {
    toggleContent() {
      this.showContent = !this.showContent
    }
  }
}
</script>

<style scoped>
</style>

    コンポーネント


    コンポーネントの使用方法
    複数のページ間の繰り返し機能
    長い,丸みを帯びたスパゲッティコードベースのデカップリング
    コンポーネントデータフロー
    親コンポーネントから子要素にデータを渡すには、小道具を使用します
    子コンポーネントから親コンポーネントにデータを渡すには、

    コンポーネントの使い方


    ParentComponentVue
    <template>
  <div>
    <div>Hi! I am a parent component.</div>
    <div>
      <ChildComponent />
    <div>
  <div>
</template>

<script>
import ChildComponent from “./ChildComponent”;

export default {
  name: “ParentComponent”,
  components: {
    ChildComponent
  }
}
</script>

<style scoped>
</style>
    子コンポーネント.Vue
    <template>
  <div>
    <div>Hi! I am a child component. {{ message }}</div>
  <div>
</template>

<script>
export default {
  name: “ChildComponent”,
  data() {
    return {
      message: ‘yay!’
    }
  }
}
</script>

<style scoped>
</style>

    データを子要素に渡す方法


    ParentComponentVue
    <template>
  <div>
    <div>Hi! I am a parent component.</div>
    <div>
      <ChildComponent :message=”message”/>
    <div>
  <div>
</template>

<script>
import ChildComponent from “./ChildComponent”;

export default {
  name: “ParentComponent”,
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ‘yay!’
    }
  }
}
</script>

<style scoped>
</style>
    子コンポーネント.Vue
    <template>
  <div>
    <div>Hi! I am a child component. {{ message }}</div>
  <div>
</template>

<script>
export default {
  name: “ChildComponent”,
  props: [
    'message'
  ],
}
</script>

<style scoped>
</style>

    データを親コンポーネントに渡す方法


    ParentComponentVue
    <template>
  <div>
    <div>Hi! I am a parent component.</div>
    <div>
      <ChildComponent
        :message=”message”
        @pass-message=”parseChildMessage”
      />
    <div>
  <div>
</template>

<script>
import ChildComponent from “./ChildComponent”;

export default {
  name: “ParentComponent”,
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ‘yay!’
    }
  },
  methods: {
    parseChildMessage(message) {
      alert(‘Yay! Child component says ’ + message);
    }
  }
}
</script>

<style scoped>
</style>
    子コンポーネント.Vue
    <template>
  <div>
    <div>Hi! I am a child component. {{ message }}</div>
    <div>
      <button @click=”sendBack”>Click Me!</button>
    </div>
  <div>
</template>

<script>
export default {
  name: “ChildComponent”,
  props: [
    'message'
  ],
  methods: {
    sendBack() {
      this.$emit(‘passMessage’, ‘Hello!’);
    }
  }
}
</script>

<style scoped>
</style>

    ブエックス


    何か
    状態管理パターン+ライブラリ
    すべての部品の集中的な店
    状態が予測可能なファッションで変異することができるだけであることを保証している規則を持ちます
    大規模単一ページアプリケーションの構築に使用

    VUEXコア概念


    州
    VEEXは単一状態ツリーを使用する
    単一のオブジェクトには、すべてのアプリケーションレベルの状態が含まれます
    「真実の単一の源」として用いられます
    VEEXはVueインスタンスのデータと同じ規則に従います
    反応
    ゲッター
    店舗の計算されたプロパティと見なされます
    結果は依存関係に基づいてキャッシュされる
    依存関係が変更された場合にのみ再評価されます
    突然変異
    唯一の方法は、実際にVUEXの店で状態を変更する
    突然変異は事象に非常に似ている
    各突然変異は文字列型とハンドラを持ちます.
    ハンドラ関数は、実際の状態修正を実行する場所です
    ハンドラ関数は、最初の引数として状態を受け取ります
    アクション
    突然変異と似ている
    行動は状態を変異するのではなく突然変異を行う
    アクションは任意の非同期操作を含むことができます
    突然変異は同期する必要がありますが、アクションは
    モジュール
    VUEXにストアをモジュールに分割する
    各モジュールは、独自の状態、突然変異、アクション、getters
    参考文献
    https://vuex.vuejs.org/guide/state.html
    https://vuex.vuejs.org/guide/getters.html
    https://vuex.vuejs.org/guide/mutations.html
    https://vuex.vuejs.org/guide/actions.html
    https://vuex.vuejs.org/guide/modules.html
    プロジェクトでVuexを準備する方法
    src/store/indexjs
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({})

export default store


src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')
    ストア状態を加える方法
    src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
})

export default store
    サンプラコンポーネント.Vue
    <template>
  <div>
    <tr v-for="(item, index) in todoList" :key="index">
      <td>{{ item.value }}</td>
    </tr>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.state.todoList
    }
  }
}
</script>

<style scoped>
</style>

    ストアゲッターを加える方法


    src/store/indexjs
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
})

export default store
    サンプラコンポーネント.Vue
    <template>
  <div>
    <tr v-for="(item, index) in todoList" :key="index">
      <td>{{ item.value }}</td>
    </tr>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  }
}
</script>

<style scoped>
</style>

    ストア突然変異を加える方法


    src/store/indexjs
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
  mutations: {
    addTodoItem(state, value) {
      state.todoList.push({value: value})
    },
    removeTodoItem(state, value) {
      state.todoList.splice(value, 1)
    }
  }
})

export default store
    サンプラコンポーネント.Vue
    <template>
  <div>
    <div>
      <span>Add Item: </span>
      <input v-model="todoInput" />
      <button @click="addItem">Add Item</button>
    </div>
    <div>
      <tr v-for="(item, index) in todoList" :key="index">
        <td>
          <button @click="removeItem(index)">X</button>
        </td>
        <td>{{ item.value }}</td>
      </tr>
    <div>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  },
  data() {
    return {
      todoInput: ‘’
    }
  },
  methods: {
    addItem() {
      this.$store.commit('addTodoItem', this.todoInput)
    },
    removeItem(index) {
      this.$store.commit(‘removeTodoItem’, index)
    }
  }
}
</script>

<style scoped>
</style>

    ストア行動を加える方法


    src/store/indexjs
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todoList: [
      { value: ‘Code’ }
    ]
  },
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
  mutations: {
    addTodoItem(state, value) {
      state.todoList.push({value: value})
    },
    removeTodoItem(state, value) {
      state.todoList.splice(value, 1)
    }
  },
  actions: {
    addItem (context, item) {
      context.commit('addTodoItem', item)
    },
    removeItem(context, itemIndex) {
      context.commit('removeTodoItem', itemIndex)
    }
  }
})

export default store
    サンプラコンポーネント.Vue
    <template>
  <div>
    <div>
      <span>Add Item: </span>
      <input v-model="todoInput" />
      <button @click="addItem">Add Item</button>
    </div>
    <div>
      <tr v-for="(item, index) in todoList" :key="index">
        <td>
          <button @click="removeItem(index)">X</button>
        </td>
        <td>{{ item.value }}</td>
      </tr>
    <div>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  },
  data() {
    return {
      todoInput: ‘’
    }
  },
  methods: {
    addItem() {
      this.$store.dispatch('addItem', this.todoInput)
    },
    removeItem(index) {
      this.$store.dispatch(‘removeItem’, index)
    }
  }
}
</script>

<style scoped>
</style>

    モジュールをモジュールに設定する方法


    src/store/indexjs
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {
  state: () => ({
    todoList: [
      { value: ‘Code’ }
    ]
  }),
  getters: {
    todoList: state => {
      return state.todoList
    }
  },
  mutations: {
    addTodoItem(state, value) {
      state.todoList.push({value: value})
    },
    removeTodoItem(state, value) {
      state.todoList.splice(value, 1)
    }
  },
  actions: {
    addItem (context, item) {
      context.commit('addTodoItem', item)
    },
    removeItem(context, itemIndex) {
      context.commit('removeTodoItem', itemIndex)
    }
  }
}

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

export default store
    サンプラコンポーネント.Vue
    <template>
  <div>
    <div>
      <span>Add Item: </span>
      <input v-model="todoInput" />
      <button @click="addItem">Add Item</button>
    </div>
    <div>
      <tr v-for="(item, index) in todoList" :key="index">
        <td>
          <button @click="removeItem(index)">X</button>
        </td>
        <td>{{ item.value }}</td>
      </tr>
    <div>
  </div>
</template>

<script>
export default {
  name: ‘SampleComponent’,
  computed: {
    todoList() {
      return this.$store.getters.todoList
    }
  },
  data() {
    return {
      todoInput: ‘’
    }
  },
  methods: {
    addItem() {
      this.$store.dispatch('addItem', this.todoInput)
    },
    removeItem(index) {
      this.$store.dispatch(‘removeItem’, index)
    }
  }
}
</script>

<style scoped>
</style>

    Vueルータ


    何か
    コンポーネントを切り替えるためのルーティング機構
    シングルページアプリケーションの構築に使用されます
    URLパスを使用したコンポーネントの変更に便利です
    参考文献https://router.vuejs.org/guide/#html
    プロジェクトでVueルータをセットアップする方法
    src/route/indexjs
    import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', 
    component: HelloWorld,
  },
]

const router = new VueRouter({
  routes
})

export default router
    src/mainjs
    import Vue from 'vue'
import App from './App.vue'
import router from './routes/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
    src/appVue
    <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <router-link :to="{ path: '/'}">Home</router-link>
    </div>
    <router-view />
  </div>
</template>

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

<style scoped>
</style>

    ルートの追加方法


    src/route/indexjs
    import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld.vue'
import TodoComponent from './../components/TodoComponent.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', 
    component: HelloWorld,
  },
  {
    path: '/todolist', 
    component: TodoComponent
  },
]

const router = new VueRouter({
  routes
})

export default router
    src/コンポーネント/ToDoComponent.Vue
    <template>
  <div>
    Todo Component
  </div>
</template>

<script>
export default {
    name: 'TodoComponent'
}
</script>

<style scoped>
</style>
    src/appVue
    <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div>
      <router-link :to="{ path: '/'}">Home</router-link>
      <router-link 
        :to="{ path: '/todolist'}"
      >
        TodoComponent
      </router-link>
    </div>
    <router-view />
  </div>
</template>

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

<style scoped>
</style>
    ダイナミックルート
    何か
    レンダリング前に特定のパラメータに依存するコンポーネントに便利です
    ルート間の値を渡す

    ダイナミックルートを加える方法


    To see it in action, type the following URL:
    http://localhost:8080/#/person/1


    src/route/indexjs
    import Vue from 'vue'
import VueRouter from 'vue-router'
import HelloWorld from './../components/HelloWorld.vue'
import TodoComponent from './../components/TodoComponent.vue'
import PersonComponent from './../components/PersonComponent.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/', 
    component: HelloWorld,
  },
  {
    path: '/todolist', 
    component: TodoComponent
  },
  {
    path: ‘/person/:id’,
    component: PersonComponent
  }
]

const router = new VueRouter({
  routes
})

export default router
    src/コンポーネント/personComponent.Vue
    <template>
  <div>
    Person Component
    {{ $route.params.id }}
  </div>
</template>

<script>
export default {
    name: 'PersonComponent'
}
</script>

<style scoped>
</style>

    プログラムナビゲーション


    使用するとき:
    ルートを関数を使用してナビゲートする必要があります
    経路は動的パラメータを必要とする
    特定のプロセスが発生した後、ルートをナビゲーションする必要があります
    **参考文献* https://router.vuejs.org/guide/essentials/navigation.html

    ルートをプログラムする方法


    プログラムルーティング.Vue
    <template>
  <div>
    <button @click=”navigate”>Navigate to somewhere</button>
  </div>
</template>

<script>
export default {
  name: 'ProgrammaticRouting',
  methods: {
    navigate() {
      // The path must be the same as the path declared in routes
      this.$router.push({path: ‘somewhere’})
    }
  }
}
</script>

<style scoped>
</style>
    J 2 EE面接問題集錦
    別の日付でコミットを作成することは可能ですか?