[Vue] 入門とライフサイクル (フロントエンドとバックエンドの分離)

1. Vue の概要

1.Vue.jsとは何ですか?

2. ライブラリとフレームワークの違い

1. Vue の概要

1.Vue.jsとは何ですか?

Vue は、ユーザーインターフェイス (UI) を構築するための人気のある[プログレッシブ] JavaScriptフレームワークであり、ユーザーインターフェイスの構築に使用されます。Vue はシンプル、柔軟、効率的であるため、開発者は対話型で再利用可能なフロントエンドアプリケーションを簡単に構築できます。

2.ライブラリとフレームワークの違い

ソフトウェア開発において、ライブラリとフレームワークは2 つの異なる概念です。

2.1 ライブラリ

ライブラリは、開発者が特定のタスクを完了するために必要に応じて選択して使用できる関数、クラス、またはメソッドのコレクションであり、本質的には関数のコレクションです。関数が呼び出されるたびに、特定の関数が実装され、制御がユーザーに渡されます。

代表的な例:

代表的なもの：jQuery：DOM操作、つまりDOM操作のカプセル化とDOM操作の簡素化

React:ユーザーインターフェイスを構築するための JavaScript ライブラリ。

Lodash:一連の効率的で再利用可能な関数メソッドを提供する実用的な JavaScript ツールライブラリです。

Axios: HTTP リクエストが可能な Promise ベースのライブラリで、サーバーとのデータ対話に使用されます。

D3.js:データ視覚化を作成するための JavaScript ライブラリ。

2.2 フレームワーク

フレームワークはより包括的であり、ツール、仕様、規約の完全なセットを提供します。フレームワークが提供するメソッドに従ってコードを記述することで、開発者は独自のロジックを入力して完全なアプリケーションを構築できます。これは完全なソリューションであり、フレームワークを使用する場合は、コードをフレームワーク内の適切な場所に配置する必要があり、フレームワークは適切なタイミングでコードを呼び出します。

代表的な例:

Angular: Google によって開発された完全なフロントエンドフレームワーク。

Vue:ユーザーインターフェイスを構築するための人気のある JavaScript フレームワーク。

Django: Python をベースとしたフル機能の Web 開発フレームワーク。

Laravel: PHP をベースとしたエレガントでシンプルな Web 開発フレームワーク。

3. MVVM の概要

MVVMとはModel-View-ViewModelの略で、ソフトウェアの設計パターンです。フロントエンド開発では、MVVM はアプリケーションをModel、View、ViewModel の3 つの主要な部分に分割します。モデルはデータとビジネスロジックを表し、ビューはユーザーインターフェイスの表示を担当し、ビューモデルはモデルとビューを接続し、ユーザーインタラクション、データバインディング、その他のロジックを処理します。Vue は MVVM パターンに準拠したフレームワークで、双方向のデータバインディングとコンポーネント化の特性を活かし、開発者がデータの管理・運用を容易にし、開発効率を向上させます。

MVVM は、より優れた UI パターンソリューションです。MVVM を使用すると、双方向データバインディングを通じてデータを双方向で自動的に同期できます。

mvc と比較すると、より便利です。

2. Vue を始める

1. Vue のクイックスタート

BootCDNを使用する- Bootstrap 中国 Web サイトオープンソースプロジェクトの無料 CDN アクセラレーションサービス

Vue.js をネットワークインポートする
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
もちろんダウンロードも可能です

手動ダウンロード

<script src="dist/js/vue.js"></script>


<script src="dist/js/vue.min.js"></script>

中に入れる

文法：

var vm = new Vue({
     el：'#ID'         // DOM 元素，挂载视图模型，
     data：{},         // 定义属性，并设置初始值
     methods：{}       // 定义方法，用于事件交互时使用的函数  
   });

ステップ：

境界を定義する
vueインスタンスの作成

境界線にこだわって変数を定義する

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <title>Vue入门</title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
  {
       
       {msg}}
</div>
{
       
       {msg}}
<script type="text/javascript">
  // 绑定边界	ES6具体体现
  new Vue({
    el: '#app',
    data() {
      return {msg: 'Hello我是你大爷Vue'};
    }
  })
</script>


</body>
</html>

2. Vueの利点

いつでも更新できます

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
  <title>Vue入门</title>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
  <input type="text" v-model="msg"/>
</div>
<script type="text/javascript">
  // 绑定边界	ES6具体体现
  new Vue({
    el: '#app',
    data() {
      return {msg: '我是你大爷Vue'};
    }
  })
</script>


</body>
</html>

3. Vueイベント

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>双向绑定</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
  <h3>{
   
   {msg}}</h3>
  <input type="text" v-model="msg"/>
  <button v-on:click="getMsg">获取输入框内容</button>
</div>
</body>
<script type="text/javascript">
  // 绑定边界	ES6具体体现
  new Vue({
    el: '#app',
    data() {
      return {msg: 'vue你大爷', n: 1};
    },
    methods: {
      getMsg() {
        alert(this.msg);
      }
    }

  })
</script>
</html>

v-model:データ、境界内の変数、および vue インスタンスで定義された変数の双方向バインディング。

:value/V-bind:value: vueインスタンスで定義した変数から取り出して境界で使用します。

@click/v-on:click：

4. Vueのライフサイクル

Vue のライフサイクルは、Vue インスタンスの作成、更新、破棄中にトリガーされる一連のフック関数を指します。Vue のライフサイクルは 8 つの段階に分かれています。

beforeCreate : Vue インスタンスが初期化される前に呼び出されます。この時点では、データやメソッドなどのプロパティはまだ初期化されていません。

created : Vue インスタンスが作成された直後に呼び出されます。この時点では、データオブザーバー、属性、メソッドのオペレーションインジェクションは完了していますが、まだマウントされていません (実際の DOM は生成されていません)。データのリクエストなど、一部の非同期操作を実行できます。

beforeMount : Vue インスタンスが DOM にマウントされる前に呼び出されます。この時点で、テンプレートはコンパイルされていますが、まだページ上にレンダリングされていません。

mount : Vue インスタンスが DOM にマウントされた後に呼び出されます。この時点で、Vue インスタンスは DOM 要素との接続を確立しているため、DOM 操作を実行したり、サードパーティのプラグインを使用したりできるようになります。

beforeUpdate : データ更新により再レンダリングが行われる前に呼び出されます。ステータスやデータはフック関数内で変更できます。

updated : Vue インスタンスが再レンダリングされた後に呼び出されます。この時点で、DOM は更新され、コンポーネントも更新されています。

beforeDestroy : Vue インスタンスが破棄される前に呼び出されます。この段階では、Vue インスタンスはまだ完全に利用可能です。

destroy : Vue インスタンスが破棄された後に呼び出されます。現時点では、Vue インスタンスは DOM から関連付けが解除されており、イベントリスニングと計算プロパティは削除されています。

1. 例


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="d1">
  <div>number:{
   
   {number}}</div>
  <div>{
   
   {detail()}}</div>
  <input type="text" v-model="number" />
</div>
<script>
  var data = {
    number:999,
    msg:null
  };
  var vm = new Vue({
    el:'#d1',
    data:data,
    methods:{
      detail:function(){
        return "使用方法来插值："+this.msg;
      }
    },
    beforeCreate:function(){
      console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
      console.log(this.msg)//undefined
      console.log(document.getElementsByClassName("myp")[0])//undefined
    },
    created:function(){
      console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
      this.msg+='!!!'
      console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
      console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
    },
    beforeMount:function(){
      console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
      this.msg+='@@@'
      console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
      console.log(document.getElementsByClassName("myp")[0])//undefined
      console.log('接下来开始render，渲染出真实dom')
    },
    // render:function(createElement){
    //     console.log('render')
    //     return createElement('div','hahaha')
    // },
    mounted:function(){
      console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
      console.log(document.getElementsByClassName("myp")[0])
      console.log('可以在这里操作真实dom等事情...')

      //    this.$options.timer = setInterval(function () {
      //        console.log('setInterval')
      //         this.msg+='!'
      //    }.bind(this),500)
    },
    beforeUpdate:function(){
      //这里不能更改数据，否则会陷入死循环
      console.log('beforeUpdate:重新渲染之前触发')
      console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
    },
    updated:function(){
      //这里不能更改数据，否则会陷入死循环
      console.log('updated:数据已经更改完成，dom也重新render完成')
    },
    beforeDestroy:function(){
      console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
      // clearInterval(this.$options.timer)
    },
    destroyed:function(){
      console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
    }
  });
</script>
</body>
</html>

[Vue] 入門とライフサイクル (フロントエンドとバックエンドの分離)

1. Vue の概要

1.Vue.jsとは何ですか?

2.ライブラリとフレームワークの違い

2.1 ライブラリ

2.2 フレームワーク

3. MVVM の概要

2. Vue を始める

1. Vue のクイック スタート

2. Vueの利点

3. Vueイベント

4. Vueのライフサイクル

1. 例

おすすめ

1. Vue のクイックスタート