02ビュー

その他 2019-09-29 10:41:06 訪問数: null

Vue.js - 2日目

ブランドマネジメント

新しいブランドを追加

ブランドを削除します

よる条件フィルタブランド

  1. 2.xでの1.xバージョンfilterBy命令は廃止されました：

filterBy - 指示


<tr v-for="item in list | filterBy searchName in 'name'">

  <td>{{item.id}}</td>

  <td>{{item.name}}</td>

  <td>{{item.ctime}}</td>

  <td>

    <a href="#" @click.prevent="del(item.id)">删除</a>

  </td>

</tr>
  1. バージョン2.xでは、手動スクリーニングを達成：
  • VMインスタンスにバインドされたスクリーニングボックスがsearchName属性：

<hr> 输入筛选名称：

<input type="text" v-model="searchName">
  • 使用中v-for、とき各データのラインもはや直接命令ループitem in listが、in濾過法の方法、フィルタ条件つつsearchName渡します。

<tbody>

      <tr v-for="item in search(searchName)">

        <td>{{item.id}}</td>

        <td>{{item.name}}</td>

        <td>{{item.ctime}}</td>

        <td>

          <a href="#" @click.prevent="del(item.id)">删除</a>

        </td>

      </tr>

    </tbody>
  • search濾過法、アレイfilterフィルタリングの方法：

search(name) {

  return this.list.filter(x => {

    return x.name.indexOf(name) != -1;

  });

}

Vueがデバッグツールをvue-devtoolsインストールして、手順を使用します

Vue.jsデベロッパーツール - 壁のインストールの上に - 推奨

フィルタ

コンセプト：Vue.jsあなたは、フィルタをカスタマイズすることを可能にする一般的なテキストの書式として使用することができます。：フィルタは2つの場所で使用することができ口ひげ補間とvバインド式。フィルタは、JavaScript式、示されている「パイプ」の最後に追加されるべきです。

プライベートフィルタ

  1. HTML要素：

<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. プライベートfilters-defined方法：

filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错

      var dt = new Date(input);

      // 获取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');



      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

      // 否则，就返回  年-月-日 时：分：秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 获取时分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');



        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

文字列を埋めるためにString.prototype.padStart列ES6（maxLengthの、fillString = ''）またはString.prototype.padEnd（maxLengthの、fillString = ''）の新たな方法を用いて、

グローバルフィルタ


// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');



  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

  // 否则，就返回  年-月-日 时：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 获取时分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');



    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

注：2つのローカルおよびグローバル同じ名前のフィルタ時間があるとき、すなわち、近接の原則に呼び出されます：グローバルフィルター上のローカルフィルタの優先順位が呼び出されます！

キーボード修飾子とカスタムキーボード修飾子

1.xのカスタムキーボード修飾子[理解します]


Vue.directive('on').keyCodes.f2 = 113;

2.xのカスタムキーボード修飾子

  1. Vue.config.keyCodes.名称 = 按键值エイリアスケース修飾子をカスタマイズするには：

Vue.config.keyCodes.f2 = 113;
  1. カスタムキーモディファイアを使用します：

<input type="text" v-model="name" @keyup.f2="add">

カスタムコマンド

  1. カスタムグローバルとローカルのカスタム命令：

    // 自定义全局指令 v-focus，为绑定的元素自动获取焦点：

    Vue.directive('focus', {

      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用

        el.focus();

      }

    });



    // 自定义局部指令 v-color 和 v-font-weight，为绑定的元素设置指定的字体颜色 和 字体粗细：

      directives: {

        color: { // 为元素设置指定的字体颜色

          bind(el, binding) {

            el.style.color = binding.value;

          }

        },

        'font-weight': function (el, binding2) { // 自定义指令的简写形式，等同于定义了 bind 和 update 两个钩子函数

          el.style.fontWeight = binding2.value;

        }

      }
  1. カスタム命令を使用します。

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">

Vueの1.xのカスタム命令[非推奨要素は、理解することができます]

Vue.elementDirective('red-color', {
  bind: function () {
    this.el.style.color = 'red';
  }
});

使用します。

<red-color>1232</red-color>

VUEのライフサイクルの例

  • ライフサイクルどのようなものです：作成Vueのインスタンスから、常に総称ライフサイクルと呼ばれ、様々なイベントを伴う、期間を破壊するために、実行するように！
  • ライフサイクルフック：だけのライフサイクルイベントの別名があります。
  • ライフサイクルフック関数= =ライフサイクルライフサイクルイベント
  • ライフサイクル部門の主な機能：
  • 作成関数のライフサイクルの間に：
    • beforeCreate：ちょうどインスタンスがメモリ内に作成され、この時点では、プロパティとメソッドを初期化する良いデータがありません
    • 作成：OKインスタンスがメモリ内に作成された、データとメソッドがOKに作成されているこの時間は、この時点ではまだテンプレートをコンパイルするために開始されていません
    • beforeMount：この時点では、テンプレートをコンパイルされているが、ページに装着されていません
    • マウント：この時点で、ページ指定されたコンテナのディスプレイに取り付けられた、テンプレートをコンパイルしています
  • run関数のライフサイクルの間に：
    • BeforeUpdate：この時点ではまだDOMノードを再描画するために開始されていないので、この関数はステータス更新前に実行され、状態値のデータでは、この時点では最新ですが、データは画面や古い上に表示します
    • 更新：更新がインスタンスを完了した後にこの関数が呼び出され、データが状態およびインターフェースのデータ値に表示され、アップデートを完了している、インターフェイスは良い再レンダリングされています！
  • 破壊機能のライフサイクルの間に：
    • beforeDestroy：前のインスタンスを破棄呼ばれます。このステップでは、インスタンスは、まだ完全に利用可能です。
    • 破壊：破壊の後に呼び出さVueのインスタンス。呼び出しの後、すべてが非結合ます表示Vueのインスタンスを、すべてのイベントリスナーが削除される、すべての子インスタンスが破棄されます。

VUE-リソース達成GET、POST、JSONPリクエスト

加算VUE-リソースでは、あなたが使用することができるaxiosデータの要求を満たすために3番目のパケットに

  1. データ要求を開始する方法を学習する前に？
  2. 要求の一般的なデータ型？ポストJSONPを取得
  3. 要求されたリソースのテストURLアドレス：
  • http://vue.studyit.io/api/getlunbo：リクエストアドレスを取得します
  • ポスト要求住所：のhttp：//vue.studyit.io/api/post
  • JSONPリクエスト住所：のhttp：//vue.studyit.io/api/jsonp
  1. JSONPの原則
  • セキュリティーの制約のブラウザに、AJAXは異なるプロトコル、異なるデータ・インタフェースの異なるドメイン名とポート番号、今回の訪問は、安全でないブラウザへのアクセスを許可していません。
  • 動的に制限クロスドメインスクリプトタグがないため、JSONPと呼ばれるデータ収集、（のこのよう注意スクリプトタグの形式、スクリプトタグのsrc属性、インタフェースのアドレスのデータを、作成することができます：JSONPの実装の原則を、その、JSONPのサポートのみ）の要求を取得します。
  • 具体的な実施プロセス：
    • データ上のクライアントコールバックメソッド、事前に定義されたオペレーションを定義します。
    • そして、URLのパラメータを渡す形式でコールバックメソッドの名前は、サーバーへのデータ・インタフェースを提出します。
    • クライアントにデータを送信するために、サーバーのデータ・インタフェースを整理し、次にクライアントは、実行解析するクライアントに送信され、このメソッドの呼び出しをスプライシングの文字列を、渡されたコールバックメソッドの名前を取りました。
    • それはJSONPデータを得ることができるので、スクリプトのスクリプトとして、クライアントを取得するために、サーバによって返された文字列の後、実行解析するために、
  • それとのNode.jsを介して、JSONP例を要求する手動で行います。
   const http = require('http');
   // 导入解析 URL 地址的核心模块
   const urlModule = require('url');

   const server = http.createServer();
   // 监听 服务器的 request 请求事件，处理每个请求
   server.on('request', (req, res) => {
     const url = req.url;

     // 解析客户端请求的URL地址
     var info = urlModule.parse(url, true);

     // 如果请求的 URL 地址是 /getjsonp ，则表示要获取JSONP类型的数据
     if (info.pathname === '/getjsonp') {
       // 获取客户端指定的回调函数的名称
       var cbName = info.query.callback;
       // 手动拼接要返回给客户端的数据对象
       var data = {
         name: 'zs',
         age: 22,
         gender: '男',
         hobby: ['吃饭', '睡觉', '运动']
       }
       // 拼接出一个方法的调用，在调用这个方法的时候，把要发送给客户端的数据，序列化为字符串，作为参数传递给这个调用的方法：
       var result = `${cbName}(${JSON.stringify(data)})`;
       // 将拼接好的方法的调用，返回给客户端去解析执行
       res.end(result);
     } else {
       res.end('404');
     }
   });

   server.listen(3000, () => {
     console.log('server running at http://127.0.0.1:3000');
   });
  1. VUEリソースの設定手順：
  • 直接ページでは、によってscriptラベルの導入vue-resourceスクリプトファイル。
  • 注意：注文が引用されている：から引用Vueスクリプトファイル、およびその後、参照vue-resourceスクリプトファイル。
  1. GETリクエストを送信します。
getInfo() { // get 方式获取数据
  this.$http.get('http://127.0.0.1:8899/api/getlunbo').then(res => {
    console.log(res.body);
  })
}
  1. POSTリクエストを送信します。
postInfo() {
  var url = 'http://127.0.0.1:8899/api/post';
  // post 方法接收三个参数：
  // 参数1： 要请求的URL地址
  // 参数2： 要发送的数据对象
  // 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
  this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => {
    console.log(res.body);
  });
}
  1. JSONPは、データ送信を要求します。
jsonpInfo() { // JSONP形式从服务器获取数据
  var url = 'http://127.0.0.1:8899/api/jsonp';
  this.$http.jsonp(url).then(res => {
    console.log(res.body);
  });
}

ローカルデータベースとデータインタフェース（API）の設定

  1. まず解凍型インストールPHPStudy。
  2. インストーラの抽出Navicatデータベースの可視化ツール、および活性化を。
  3. 開いてNavicatツールを、という名前の新しい空のデータベースを作成しますdtcmsdb4。
  4. 新しいデータベース、新しいデータベースで、このギャップにデータベース接続をダブルクリック右键- > 运行SQL文件選択をして実行dtcmsdb4.sqlするデータベース・スクリプト・ファイルを、実行エラーでない場合は、データベースのインポートは完了です。
  5. フォルダにvuecms3_nodejsapi内側に、実行するnpm iすべての依存関係をインストールします。
  6. マシンが設置されていることを確認しnodemon、実行し、インストールされていないnpm i nodemon -g、インストール後に、入力し、インストールがグローバルvuecms3_nodejsapi> -ディレクトリsrcの内容は- >ダブルクリックで実行するようにしstart.bat
  7. APIの起動に失敗した場合確認しながら、PHPStudyが正常に開いているかどうかを確認app.jsの上での14行データベースの接続文字列が正しく設定されている。PHPStudyデフォルトのユーザー名はroot、デフォルトのパスワードは、ルートであります

ブランド経営改革

ブランドのリストをショーケース

ブランドのデータを追加します。

ブランドデータを削除します

Vueのアニメ

なぜアニメーションする必要がありますアニメーションは、ユーザーがより良いページの機能を理解するために、ユーザーエクスペリエンスを向上させることができます。

トランジションクラス名を使用します

  1. HTMLの構造：
<div id="app">
    <input type="button" value="动起来" @click="myAnimate">
    <!-- 使用 transition 将需要过渡的元素包裹起来 -->
    <transition name="fade">
      <div v-show="isshow">动画哦</div>
    </transition>
  </div>
  1. VMインスタンス：
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    isshow: false
  },
  methods: {
    myAnimate() {
      this.isshow = !this.isshow;
    }
  }
});
  1. クラススタイルの2セットを定義します。
/* 定义进入和离开时候的过渡状态 */
    .fade-enter-active,
    .fade-leave-active {
      transition: all 0.2s ease;
      position: absolute;
    }

    /* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
    .fade-enter,
    .fade-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }

サードパーティのライブラリを使用してCSSアニメーション

  1. インポートアニメーションライブラリ：
<link rel="stylesheet" type="text/css" href="./lib/animate.css">
  1. トランジションと属性を定義します。
<transition
    enter-active-class="fadeInRight"
    leave-active-class="fadeOutRight"
    :duration="{ enter: 500, leave: 800 }">
    <div class="animated" v-show="isshow">动画哦</div>
</transition>

アニメーションのフック関数

  1. そして、遷移アセンブリは、3つのフック関数を定義します。
<div id="app">
    <input type="button" value="切换动画" @click="isshow = !isshow">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>
  1. メソッドのフックは、3つのメソッドを定義しています。
methods: {
        beforeEnter(el) { // 动画进入之前的回调
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调
          this.isshow = !this.isshow;
        }
      }
  1. 長さとスタイルが遷移アニメーションを定義しました。
.show{
      transition: all 0.4s ease;
    }

V-のための遷移リスト

  1. トランジションのスタイルを定義するには：
<style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
</style>
  1. DOM構造は、V-ための循環リストをラップする遷移族成分の使用を必要とする、定義されます。
  <div id="app">
    <input type="text" v-model="txt" @keyup.enter="add">

    <transition-group tag="ul" name="list">
      <li v-for="(item, i) in list" :key="i">{{item}}</li>
    </transition-group>
  </div>
  1. VM構造体の定義：
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        txt: '',
        list: [1, 2, 3, 4]
      },
      methods: {
        add() {
          this.list.push(this.txt);
          this.txt = '';
        }
      }
    });

トランジションのリストをソート

<transition-group>コンポーネントの特別なもあります。アニメーションを入力して残すことができるだけでなく、あなたはまた、向きを変更することができます。新しい知っているこの新機能の必要性を使用するにはv-move機能を、それが要素の配置を変更するプロセスに適用されます。

  • v-moveそして、v-leave-active遷移の組み合わせは、リストはもっと穏やかで柔らかい作ることができます。
.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}

関連記事

  1. vue.js 1.xのドキュメント
  2. vue.js 2.xのドキュメント
  3. String.prototype.padStart（maxLengthの、fillString）
  4. キーボードイベントに対応するキーコードの内部のjs
  5. pagekit / VUE-リソース
  6. ファイルにSQLのSQLファイルをインポートおよびエクスポートする方法Navicatは
  7. ベッセルオンラインジェネレータ

おすすめ

転載: www.cnblogs.com/huameixiao/p/11606085.html
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com