node vueプロジェクトの開発の前後に実戦記録を分離します。

前言
この文章は主にnode vueの前後の分離に関する資料を紹介しています。皆さんの参考にして勉強してください。
node vueプロジェクトの開発
最近一週間近くのvue開発を見ましたが、いろいろな感想があります。以前にreact、anglarと接触したことがありますので、特にお名前のvueを学びたいです。半日勉強した後で発見しました。接触するものが多くなりました。勉強しやすいです。Vueの命令はアングラーの命令を連想できます。Vueのコンポーネント化の設計はreactのコンポーネント化の設計と似ています。一部のrouterの設定もreactのルートやnodejsのルートと同じです。vuexはもっとredux、fluxの書き換えによっています。まだよく分かりませんが、vueのテンプレートレンダリングについては、expresレンダリングejsとあまり違いがありません。vueを使って完全にjqから離れることができます。jqを使わないということはまだ実感していませんが、このような双方向のデータバインディングはやはり便利だと思います。
コマンド

v-bindは、主に、動的結合DOM要素属性、すなわち、要素属性の実際の値がvmのインスタンスにおけるdata属性によって提供される。

v−modelは、テーブル単一要素に対して双方向データバインディングを行い、フォーム要素の値を変更すると、インスタンスvmに対応するvmの属性も同時に更新される。

v-if、v-show、v-elseのこれらの命令は、テンプレートとデータ間の論理関係を説明する。
v-iとv-elseの役割は、そのdom要素が数値に基づいて出力されるかどうか、および含まれるサブ要素があるかどうかを判断することである。
eg:<div v-if="yes">yes</div> vmの例におけるdata.yes=trueの場合、テンプレートエンジンは、このdomノードをコンパイルし、出力<div>yes</div>は、v-elseがv-infに続く場合は、機能しないことに留意されたい。
v-showとv-ifの効果はほとんど同じですが、真偽を判断して内容を表示します。唯一の違いは、v-showが表示されない時はdisplay:noneで、つまりdomノードを残しましたが、v-ifはできません。

v-forはリストレンダリングに使用され、行列とオブジェクトを巡回することができます。v-for="b in 10"は現在、1-10の反復

を意味しています。

v-onイベントバインディング、略記@：

は、v-text <p v-text="msg"><p>はinnerTextに相当し、{{msg}}と比較して、フラッシュの問題を回避した。

v-HTMLはinners HTMLと類似しており、フラッシュを避けることもできます。

v-elというコマンドは、dom要素にインデックスを追加したものに相当します。例えば、<div v-el="demo">this is a test </div>は、現在のdomの値を取得したいなら、vm.$els.demo.innerText は、大文字と小文字を区別しないでください。

v-refはv-elと同様にvim.$refsを通じて

にアクセスする。

v-preはコンパイルをスキップします。この要素は

です。

v-cloakはあまり役に立たないと思います。

v-onceは、要素またはコンポーネントを明示するために、一度だけレンダリングするための内蔵命令を追加しました。

テンプレートレンダリング
1、v-forは主にリストレンダリングに用いられ、受け入れられた配列に従ってv-forバインディングされたdom要素と内部サブ要素を繰り返しレンダリングし、別名を設定することによって、配列内のデータを取得してノードにレンダリングすることができる。
eg:

 <ul v-for="item in items">
 <li>{{item.title}}</li>
 <li>{{item.description}}</li>
 </ul>

2、v-forは$index変数を内蔵しています。v-forを呼び出したときに呼び出すことができます。例えば、<li v-for="(index,item) in items">{{index}}-{{$index}}</li>です。
3、データの修正
直接配列を変更すると、データを変更できます。
配列を直接変更できない場合
     1.vm.items[0]={} 、この場合は修正できません。解決：vm.item.$set(0,{})またはvm.$set('item[0]',{})     2.vm.item.length=04、v-forは対象を巡回して、key、valueの形式でkey変数をカスタマイズできます。

<li v-for="(key,value)" in objectDemo>
 {{key}}---{{$key}}:{{vue}}
</li>

5、templateラベル
テンプレートとしてレンダリングするためのノードですが、レンダリングはこのノードが存在しません。
イベントバインドと傍受
v−onは、インスタンス属性methods内の方法を、イベントのプロセッサとして結びつけることができ、v−on：後にすべてのオリジナルイベント名を受け入れることができる。

略字@：

は、methods関数とインラインjsを結合することができますが、ステートメントに限ります。

バインドされたmethods関数とインラインjsは、元のdom要素、eventを取得することができます。

は、複数のイベントを結合する際に、順次実行する。

uiコンポーネントお腹空きましたか
使用マニュアル
インストール

npm install cnpm install element-ui --save-dev

ファイルを紹介します

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })

使用
componentsフォルダの下に新しいページを作って、お腹空きましたかから自分の好きなコンポーネントを見つけます。例えば、走馬灯Carousel.vue はコードをこのページにコピーします。
必要なこのコンポーネントのファイルの下で、たとえばAPP.vueの中で

import Carousel from './components/Carousel'
export default {
 name: 'app',
 components: { //components s
 Carousel: Carousel
 }
}

モジュールをテンプレートに読み込む

<template>
<div id="app">
 <Carousel></Carousel>
 <img src="./assets/logo.png">
 <router-view/>
</div>
</template>

これで運行できます。
前後端分離
nodeでフルスタックの開発に慣れましたが、今はvue-webpackでフロントエンドの開発をしています。nodeでバックエンドの開発もとても快適で、前後に分離が実現しました。
バックエンドインターフェースを起動

cd back
cnpm install
npm run dev

フロントエンドサーバを起動

cd front
cnpm install
npm start

ログインページに入り、ログインをクリックして、コンソールからアクセス成功の情報を印刷し、ハロルドページに移動しました。
前後に文通する
vue-resource
vue-resourceをインストールして、main.jsで引用します。

import VueResource from 'vue-resource'
Vue.use(VueResource)

config/index.jsにproxyTableプロキシを配置する

proxyTable: {
 '/api/**': {
 target: 'http://localhost:3000',
 pathRewrite: {
 '^/api': '/api'
 }
 }
}

使用

this.$http.get('api/apptest')
 .then((response) => {
  //       
  console.log(response)
 }).catch(e => {
  //       
  console.log(e)
 })
 }

短所：開発環境では問題ないですが、生産環境でバックエンドインターフェースを要求するのは成功しません。
axios
まずaxiosを配置し、srcの下にhttp.jsを新設する。

import axios from ‘axios'
axios.defaults.timeout = 5000
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
export default axios

main.jsに導入されます

import axios from './http'
Vue.prototype.axios = axios
new Vue({
 el: '#app',
 router,
 axios,
 template: '<App/>',
 components: { App }
})

使用
ゲット方法

login () {
 //         
 this.axios.get('/apptest')
 .then((response) => {
 //       
 console.log(response)
 // this.$router.go({name: 'main'})//    
 this.$router.push({name: 'HelloWorld'})
 }).catch(e => {
 //       
 console.log(e)
 })
}

ベストメソッド

register () {
 console.log(this)
 //         
 let params = {
 user: this.userinfo.account,
 password: this.userinfo.password,
 directionId: this.userinfo.directionId
 }
 this.axios.post('/signup', params)
 .then((response) => {
 //       
 console.log(response)
 }).catch(e => {
 //       
 console.log(e)
 })
}

生産環境経路問題
生産環境で包装後の経路が間違っていることが分かりました。config下のindex.jsを修正しました。

build: {
 // Template for index.html
 index: path.resolve(__dirname, '../dist/index.html'),

 // Paths
 assetsRoot: path.resolve(__dirname, '../dist'),
 assetsSubDirectory: 'static',
 assetsPublicPath: './', //    assetsPublicPath: '/'

ソースの位置：https://gitee.com/react-module/node-vue
締め括りをつける
以上はこの文章の全部の内容です。本文の内容は皆さんの学習や仕事に対して一定の参考となる学習価値を持っています。質問があれば、メッセージを書いて交流してください。ありがとうございます。