vue2 ファミリーバケットとは何ですか?またその使用方法は何ですか?

今回は、vue2ファミリーバケットとは何か、そしてその使い方について説明します。 , vue2ファミリーバケットとは何ですか？使用する際の注意事項は何ですか? 以下は実際のケースですので、一緒に見てみましょう。

Vue2 はシンプルで始めやすいと言われていますが、実際に試してみるとわかります。ES6 の構文や Webpack の構成に加えて、重要なのは考え方の変更です。以前は、グローバル変数を使用して DOM を変更することができましたが、ハンマーは使用できなくなったので、データ自体に注目してください。 vue の公式ドキュメントは浅いものから深いものまで非常に充実していますが、vue-cli を使用してプロジェクトを構築する場合、公式ドキュメントではまだ不十分であることがわかり、git 上のオープンソース プロジェクトを参照して学習する必要があります。エス6。また、vue のファミリー バケット (vue-cli、vue-router、vue-resource、vuex) もインストールする必要があります。

1.vue-cli

このビルド ツールは、webpack の使用の難しさを大幅に軽減し、ホット アップデートをサポートし、webpack-dev-server のサポートを備えています。これは、リクエスト サーバーの起動とテスト環境のセットアップに相当します。あなたは開発だけに集中してください。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

ホット アップデートのメカニズムは、ファイルの変更を検出し、WebSocket を使用してクライアントに対応する更新を行うように通知することです。詳細については、[webpack]--module hot replace

2.vue-router

vue のルーティングは依然として非常に便利で、ag1 よりもはるかに便利です。この便利さは 3 つの側面に反映されています:

1 はルーティングとページ (コンポーネント) の対応です:

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import Chat from '@/components/Chat'import Firends from '@/components/Firends'import Logon from '@/components/Logon'Vue.use(Router)
let router=new Router({
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
     { path: '/', redirect: '/home' },//重定向
    {
      path: '/chat',
      name: 'Chat',
      component: Chat
    },
    {
      path: '/firends',
      name: 'Firends',
      component: Firends
    },
    {
      path: '/logon',
      name: 'Logon',
      component: Logon
    }
  ]
});

普通の人の考え方は次のとおりで、ag1 も コントローラー を持ってくる必要があります (vue にはそのような概念はありません)代わりに、コンポーネントに注目するだけです)。これにより、使いやすくなります。 MVC モードでは、コントローラーの下のアクションをポイントする必要があります。ナビゲーション カテゴリが多数ある場合、対応する戦略はネストされたルーティングです。

2 は要素に固有にすることができます:

<router-link    class="footer-item"  exact  to="home">首页</router-link>

この to の後のホーム (大文字と小文字を無視) は、上で定義したルート名です。これはとても便利です。 Asp.net MVC と同様のルーティングでは、常にパスを入力しなくても、名前でパスをレンダリングできます。

3 つはイベント インターセプトです:

検証したい場合、最善の方法は、ユーザーがページに到達する前に検証することです:

router.beforeEach((to, from, next) => {  //todo 以后增加不需要验证的地址判断
  if(to.path!=="/logon"&&!store.state.userInfo.Account){
     next({ path: '/logon' })     return;
  }else{
   next();
  } 
})

たとえば、beforeEach で処理します。また、多くの機能があるため、すべてをリストすることはしません。公式ドキュメント: http://router.vuejs.org/zh-cn/

3. コンポーネントでのコンポーネントの使用

いくつかのモバイル UI ライブラリを調べました。最初はなぜフッター コンポーネントがないのか疑問に思っていましたが、今ではルーティングが非常に便利であるため、サードパーティの UI がフッターをカプセル化する必要がなく、カプセル化するのが不便であることがわかりました。ルーティングに依存します)。したがって、ナビゲーションはおそらく自分で作成する必要がある最初のコンポーネントです。

たとえば、Footer.vue

    
     
     
     
     首页
     
     
      
      
      统计
     
       
      
      
      更多

<script><br> デフォルトのエクスポート {<br> name: 'VFooter'<br>}<br></script>

を定義する場合、アプリに

import VFooter from './VFooter'
 export default {
name: 'app',
data () {return {
msg: 'this is home'}
},components:{VFooter}}

を導入するだけで済みます。 Vue を使って App.Vue で使用できます

<VFooter></VFooter>

グローバルに登録したい場合は、まず main.js に導入するだけです

import Footer from './components/VFooter'//Vue.component('VFooter', Footer)//写在构造函数之前

このステップで、楽しく独自のページを組み立てることができます。ページにスライド効果を追加する必要がある場合は、トランジション (app.vue にあります) を追加できます:

  <transition  name="slide-in" mode="out-in">
    <router-view></router-view>
   </transition>

.slide-out-enter-active,
.slide-out-leave-active,
.slide-in-enter-active,
.slide-in-leave-active {
  will-change: transform;
  transition: all 400ms;
  position: absolute;
}.slide-out-enter {
  opacity: 0;
   transform: translateX(-100%);
  
}.slide-out-leave-active {
  opacity: 0;
   transform: translateX(100%);
  
}.slide-in-enter {
  opacity: 0;
   transform: translateX(100%);
}.slide-in-leave-active {
  opacity: 0;
   transform: translateX(-100%);

左右を切り替えるには?

4.vue-resource

ページが完了したら、リクエストを送信できる必要があります。 https://github.com/pagekit/vue-resource フロントエンドが独自にインターフェイスを作成しない場合、最初に注意すべきことは、プロキシを設定する方法です。これは、config の下の proxyTable にあります。 /index.js.

    proxyTable: {    '/api':
     {
           target: 'http://11.111.249.12:11',           changeOrigin: true,
           pathRewrite:
           {              '^/api': ''
            }
    },

クロスドメイン設定は、changeOrigin なしでは行えません。最後の '^/api': '' にも注意してください。 選択した「/api」が元のパスの一部であるかどうかに注意してください。そうでない場合は、間違いが発生しやすくなります。

次に、リクエスト ヘッダー (main.js) を設定する別の部分があります:

import VueResource from 'vue-resource'Vue.use(VueResource);
Vue.http.interceptors.push(function(request, next) {// modify method
  //request.method = 'POST';
  // modify headers      
  request.headers.set('token',“token”);// continue to next interceptor  next();
});

5.vuex

Family Bucket の最初に私を最も混乱させたのは、この vuex でした。これは一体何ですか、なぜこれが必要ですか。私は React をプレイしたことがなく、状態管理が何なのか知りません。グローバル変数を使用したい場合、これまでの方法はすべて機能しないことがわかります。たとえば、ログイン ステータス

let login=(name,pwd,success,fail)=>}).then(res=>

を設定し、それをホームページに表示します:

<p @click="toggle">{{hasLogin}}</p>

data () {    return {
      hasLogin:window.hasLogin
    }
  },
   methods:{
     toggle(){
       window.hasLogin=!window.hasLogin;
       console.log("clicked",window.hasLogin)
     }
   },

ログインすると確かに true が表示されますが、どのクリックしても false または true に切り替わりません。

需要再赋值一次：

this.hasLogin=window.hasLogin;

为什么呢？因为你自己定义的变量，根本不属于vue的model。也就是没有处理过geter和seter,虽然变量的值是变化了，但仍然无法改变界面上的状态。所以你需要一个状态管理，按照一定的机制把你的变量变换成vue内部的模型。这个东西就是vuex。因为约定比较多，略显复杂点，但是耐心看一下还是很容易接受的。它主要分四个部分，state,getters,mutations,actions。先定义一个user.js如下：

state就是我们放共享变量的地方。比如下面的userInfo.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const userStore=new Vuex.Store({
   state:{
       userInfo:{
           userName:""
       }
   },
   getters:{
       getUserInfo(state){           return state.userInfo;
       }
   },
   mutations:{
       setUserInfo(state,userInfo){
           state.userInfo=userInfo;
       }
   },
   actions:{
       setUserInfo({commit}){
           commit('setUserInfo');
       }
   }
})
export default userStore;

而getters顾名思义就是获取接口，mutations(突变)这个词有点唬人，其实就是setters嘛。里面的方法自带state参数。而actions就是mutations的异步方法。然后再main.js中引用一下：

import store from './store/user';//...
 new Vue({
  el: '#app',
  router,  store,
  template: '<App/>',
  components: { App }
})

然后我们在设置或获取的时候就可以使用指定的方法：

import store from '@/store/user';
//...
store.commit('setUserInfo',user)

 可以直接通过store.state获取变量，也可以通过getters接口：

 computed:{   ...mapGetters({username:'getUserName'})
  },

这三个点是es6中的扩展运算符。将一个数组转为用逗号分隔的参数序列。

当然这些状态刷新之后就没有了，如果想要暂存下来，可以放到sessionStorage中：

if (window.sessionStorage.user) {    var json=JSON.parse(window.sessionStorage.user);
    store.commit('setSessionUser',json)}

当然要在muations中放进去

  ==

官方文档： https://vuex.vuejs.org/zh-cn/

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue的自定义动态组件使用详解

protobuf.js 与 Long.js的使用详解

让JS自动匹配出proto Js的方法

以上がvue2 ファミリーバケットとは何ですか?またその使用方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。