Was ist der vue2 Family Bucket und wie wird er verwendet?

Dieses Mal werde ich Ihnen vorstellen, was der Vue2 Family Bucket ist und wie man ihn verwendet. Was ist der Vue2 Family Bucket? Was sind die Vorsichtsmaßnahmen bei der Verwendung? Hier sind konkrete Fälle, schauen wir sie uns gemeinsam an.

Es wird gesagt, dass Vue2 einfach und leicht zu starten ist, aber Sie werden es wissen, nachdem Sie es selbst ausprobiert haben. Neben der ES6-Syntax und der Webpack-Konfiguration, die Ihnen das Gefühl geben, nicht vertraut zu sein, ist die Änderung wichtig Früher konnte man nur globale Variablen verwenden, um das DOM zu ändern, also müssen wir uns auf die Daten selbst konzentrieren. Die offizielle Dokumentation von Vue ist ziemlich gut und reicht von flach bis tief, aber wenn Sie Vue-Cli zum Erstellen eines Projekts verwenden, stellen Sie fest, dass die offizielle Dokumentation immer noch nicht ausreicht. Sie müssen auf Open-Source-Projekte auf Git verweisen und lernen es6. Und die Familien-Buckets von vue (vue-cli, vue-router, vue-resource, vuex) müssen noch installiert werden.

1.vue-cli

Dieses Build-Tool reduziert die Schwierigkeit bei der Verwendung von Webpack erheblich, unterstützt Hot-Updates und unterstützt den Webpack-Dev-Server, was dem Starten einer Anfrage entspricht Server, sodass Sie eine Testumgebung einrichten und sich nur auf die Entwicklung konzentrieren können.

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

Der Mechanismus des Hot-Updates besteht darin, Dateiänderungen zu erkennen und Websocket zu verwenden, um den Client zu benachrichtigen, entsprechende Aktualisierungen vorzunehmen. Weitere Informationen finden Sie unter: [Webpack] – Modul-Hot-Replacement

2.vue-router

Vue-Routing ist immer noch sehr praktisch, viel praktischer als ag1. Diese Bequemlichkeit spiegelt sich in drei Aspekten wider:

1 ist die Entsprechung zwischen Routing und Seiten (Komponenten):

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
    }
  ]
});

So denken normale Menschen, und ag1 muss auch Controller (ein solches Konzept gibt es in Vue nicht, sondern konzentriert sich nur auf die Komponente), was die Verwendung erleichtert. Im MVC-Modus müssen Sie auf die Aktion unter dem Controller verweisen. Wenn viele Navigationskategorien vorhanden sind, ist die entsprechende Strategie verschachteltes Routing.

2 kann spezifisch für Elemente sein:

<router-link>首页</router-link>

Das Zuhause (ohne Berücksichtigung der Groß-/Kleinschreibung) danach ist der oben definierte Routenname. Das ist sehr praktisch. Routing ähnlich wie Asp.net MVC kann den Pfad nach Namen rendern, ohne dass der Pfad ständig eingegeben werden muss.

3 sind Event-Interceptions:

Wenn wir überprüfen möchten, ist es am besten, dies zu überprüfen, bevor der Benutzer die Seite erreicht:

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

Zum Beispiel in beforeEach zur Bearbeitung. Es hat auch viele Funktionen, daher werde ich sie nicht alle auflisten: http://router.vuejs.org/zh-cn/

3. Verwenden Sie Komponenten in Komponenten

Um zu sehen, dass ich mehrere mobile UI-Bibliotheken verwendet habe, war ich zunächst überrascht, dass es keine Fußzeilenkomponente gab. Jetzt verstehe ich, dass die Benutzeroberfläche eines Drittanbieters nicht erforderlich ist, um die Fußzeile zu kapseln um es zu kapseln (weil es auf Routing basiert). Daher ist die Navigation wahrscheinlich die erste Komponente, die Sie selbst schreiben müssen.

Zum Beispiel ist eine Footer.vue definiert

    
     
     
     
     首页
     
     
      
      
      统计
     
       
      
      
      更多

<script><p style="text-align: left;">export default {<br/>name: 'VFooter'<br/>}<br/>&lt ;/ script><br/>Nur ​​in App.Vue müssen Sie importieren <p style="text-align: left;"><pre class="brush:php;toolbar:false">import VFooter from &#39;./VFooter&#39; export default { name: &#39;app&#39;, data () {return { msg: &#39;this is home&#39;} },components:{VFooter}} und dann können Sie es in App.Vue verwenden <p style="text-align: left;"><pre class="brush:php;toolbar:false"><VFooter>Wenn Sie möchten Um sich für die globale Situation zu registrieren, führen Sie zunächst <p style="text-align: left;"><pre class="brush:php;toolbar:false">import Footer from &#39;./components/VFooter&#39;//Vue.component(&#39;VFooter&#39;, Footer)//写在构造函数之前 in main.js ein. In diesem Schritt können Sie problemlos Ihre eigene Seite zusammenstellen. Wenn Sie der Seite einen Gleiteffekt hinzufügen müssen, können Sie einen Übergang hinzufügen (in app.vue): <p style="text-align: left;"><pre class="brush:php;toolbar:false"> <transition name="slide-in" mode="out-in"> <router-view> <pre class="brush:php;toolbar:false">.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%);Wie wechselt man nach links und rechts?<p style="text-align: left;"> 4.vue-resource <h2 style="text-align: left;">Die Seite ist fertig und Sie müssen in der Lage sein, Anfragen zu senden. <p style="text-align: left;">https://<a href="http://www.php.cn/wiki/373.html" target="_blank">github.com/pagekit/vue-resource Wenn das Frontend die Schnittstelle nicht selbst schreibt, besteht das erste Problem darin, wie der Proxy eingerichtet wird, der sich in der ProxyTable unten befindet config/index.js. <pre class="brush:php;toolbar:false"> proxyTable: { &#39;/api&#39;: { target: &#39;http://11.111.249.12:11&#39;, changeOrigin: true, pathRewrite: { &#39;^/api&#39;: &#39;&#39; } },Domänenübergreifende Einstellungen können nicht ohne Änderung von Origin erfolgen. Beachten Sie auch das letzte '^/api': ''. Achten Sie darauf, ob das von Ihnen gewählte „/api“ Teil des ursprünglichen Pfades ist, sonst kann es leicht zu Fehlern kommen. <p style="text-align: left;">Dann gibt es noch einen weiteren Teil, der den Anforderungsheader (main.js) festlegt: <p style="text-align: left;"><pre class="brush:php;toolbar:false">import VueResource from &#39;vue-resource&#39;Vue.use(VueResource); Vue.http.interceptors.push(function(request, next) {// modify method //request.method = &#39;POST&#39;; // modify headers request.headers.set(&#39;token&#39;,“token”);// continue to next interceptor next(); });5.vuex<h2 style="text-align: left;">Das, was mich am meisten verwirrt hat Der Anfang in Family Bucket war This vuex. Was zum Teufel ist das, warum brauchen Sie das? Ich habe React noch nie gespielt und weiß nicht, was State Management ist. Wenn Sie eine globale Variable verwenden möchten, stellen Sie fest, dass alle vorherigen Methoden nicht funktionieren. Legen Sie beispielsweise einen Anmeldestatus <p style="text-align: left;"><pre class="brush:php;toolbar:false">let login=(name,pwd,success,fail)=>}).then(res=> fest und zeigen Sie ihn dann auf der Startseite an: <p style="text-align: left;"><pre class="brush:php;toolbar:false"><p @click="toggle">{{hasLogin}}<pre class="brush:php;toolbar:false">data () { return { hasLogin:window.hasLogin } }, methods:{ toggle(){ window.hasLogin=!window.hasLogin; console.log("clicked",window.hasLogin) } }, Sie stellen fest, dass nach der Anmeldung zwar „true“ angezeigt wird, dies jedoch nicht der Fall ist wechselt nicht zu „falsch“, egal wie Sie darauf klicken. <p style="text-align: left;"><p style="text-align: left;"><img src="/static/imghwm/default1.png" data-src="https://images2015.cnblogs.com/blog/417688/201705/417688-20170516150745635-607123129.png?x-oss-process=image/resize,p_40" class="lazy" alt="" style="max-width:90%" style="max-width:90%"/><p style="text-align: left;">需要再赋值一次：<pre class="brush:php;toolbar:false">this.hasLogin=window.hasLogin;<p style="text-align: left;">为什么呢？因为你自己定义的变量，根本不属于vue的model。也就是没有处理过geter和seter,虽然变量的值是变化了，但仍然无法改变界面上的状态。所以你需要一个状态管理，按照一定的机制把你的变量变换成vue内部的模型。这个东西就是vuex。因为约定比较多，略显复杂点，但是耐心看一下还是很容易接受的。它主要分四个部分，state,getters,mutations,actions。先定义一个user.js如下：<p style="text-align: left;">state就是我们放共享变量的地方。比如下面的userInfo.<pre class="brush:php;toolbar:false">import Vue from &#39;vue&#39;; import Vuex from &#39;vuex&#39;; 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(&#39;setUserInfo&#39;); } } }) export default userStore;<p style="text-align: left;">而getters顾名思义就是获取接口，mutations(突变)这个词有点唬人，其实就是setters嘛。里面的方法自带state参数。而actions就是mutations的异步方法。然后再main.js中引用一下：<pre class="brush:php;toolbar:false">import store from &#39;./store/user&#39;;//... new Vue({ el: &#39;#app&#39;, router, store, template: &#39;<App/>&#39;, components: { App } })<p style="text-align: left;">然后我们在设置或获取的时候就可以使用指定的方法：<pre class="brush:php;toolbar:false">import store from &#39;@/store/user&#39;; //... store.commit(&#39;setUserInfo&#39;,user)<p style="text-align: left;"> 可以直接通过store.state获取变量，也可以通过getters接口：<pre class="brush:php;toolbar:false"> computed:{ ...mapGetters({username:&#39;getUserName&#39;}) },<p style="text-align: left;">这三个点是es6中的扩展<a href="http://www.php.cn/wiki/119.html" target="_blank">运算符。将一个数组转为用逗号分隔的参数序列。<p style="text-align: left;">当然这些状态刷新之后就没有了，如果想要暂存下来，可以放到sessionStorage中：<pre class="brush:php;toolbar:false">if (window.sessionStorage.user) { var json=JSON.parse(window.sessionStorage.user); store.commit(&#39;setSessionUser&#39;,json)}<p style="text-align: left;">当然要在muations中放进去<pre class="brush:php;toolbar:false"> ==<p style="text-align: left;">官方文档： https://vuex.vuejs.org/zh-cn/<p>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！<p>推荐阅读：<p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388790.html" target="_blank">vue的自定义动态组件使用详解<br/><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388788.html" target="_blank">protobuf.js 与 Long.js的使用详解<br/><p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-388784.html" target="_blank">让JS自动匹配出proto Js的方法<br/></script>

Das obige ist der detaillierte Inhalt vonWas ist der vue2 Family Bucket und wie wird er verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!