目次
3 ルーティングを使用してマルチビューの単一ページ アプリケーションを構築する
3.5 RouterLink および RouterView コンポーネントを使用したナビゲーションと表示
1 vue でのファイルとフォルダーの命名規則
命名法
CamelCase (camelCase)
ダッシュ命名 (kebab-case) すべて小文字
PascalCase (PascalCase)フォルダ名
kebab-case
名詞を使ってみよう、単語を使ってみよう*.js ファイルの命名規則
3.1 すべてのモジュールのメイン ファイル index.js はすべて小文字
です 3.2 コンポーネントに属する .js ファイルは、PascalBase スタイルを使用します
3.3 その他のタイプの .js ファイルは、kebab-case スタイルを使用します*.vue ファイルの命名規則
index.vue に加えて、他の .vue ファイルは PascalBase スタイルを一様に使用します。*.less ファイル命名規則
ケバブケースの命名スタイルを統一
最初の 3 つのポイントはより重要であり、覚えておく必要があります。! !
付録 1: .lessでサフィックスされたファイルと
は 1. レスとは: Web 開発者に朗報をもたらす LESS は、CSS 構文に基づいて、変数、ミックスイン、
操作、関数などの関数を導入し、CSS の記述を大幅に簡素化します。その名前が示すように、CSS メンテナンスのコストを削減します。LESS を使用すると、より少ないコードでより多くのことを実行できます。
2. 少ない理由: CSS はプログラムされていない言語. CSS は一見非論理的なコードをたくさん書く必要があり、メンテナンスや拡張に不便であり、
変数を定義するためのシンボルの再利用を助長しない.
2スパ
2.1 SPA の紹介
シングル ページ アプリケーション (SPA) は、Web ページが 1 つしかないアプリケーションであり、単一の HTML ページをロードし、ユーザーがアプリケーションを操作するときにページを動的に更新する Web アプリケーションです。
シングルページ アプリケーション:
ページは初回のみ読み込まれ、その後のすべてのリクエストは必要なデータを取得するだけで、その後、ページ内の js パーシングによって取得されたデータがページに表示されます。従来のマルチページ アプリケーション:
従来のマルチページ アプリケーションの場合、サーバーが返す各要求は完全なページです。利点
リクエストの量を減らし、ページの応答速度を高速化し、サーバーへの負荷を軽減します.
より良いユーザー エクスペリエンス, ユーザーは Web アプリでネイティブ アプリの滑らかさを感じることができます.
2.2 SPAの技術ポイント
- アヤックス
- アンカー (window.location.hash #) の使用 (ページ内ポジショニング技術)
- hashchange イベント window.addEventListener("hashchange",function () {})
hashchange イベントは、html5 の新しい API で、ブラウザ リンクのハッシュ値の変更を監視するために使用されます。URL のフラグメント識別子が変更されると、hashchange イベントが発生します。
3 ルーティングを使用してマルチビューの単一ページ アプリケーションを構築する
3.1 依存ライブラリの紹介
基本的な html プロジェクトを作成し、デモ ページを作成して js ライブラリ ファイルを導入する
<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>3.2 カスタム コンポーネントの作成
vue コンポーネントを作成するには、次の 2 つの方法があります。
var MyComonent = Vue.component("button-counter", {...});
创建一个vue组件并赋给MyComponent变量
const Home = Vue.extend({});
extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用関連する知識ポイント:
jsのconst、var、letの違いは何ですか? 例を書く
Home コンポーネントと About コンポーネントを作成する
//组件名用PPascalCase风格
const Home = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: '<div><h1>Home组件</h1><div>Home组件内容区</div></div>'
});
const About = Vue.extend({
//必须定义一个根元素作为容器,包裹模板中的内容元素
template: '<div><h1>About组件</h1><div>About组件内容区</div></div>'
});
3.3 ルートを作成する
3.3.1 ルーティングとは
Vue の単一ページ アプリケーションは、ルーティングとコンポーネントに基づいています. ルーティングは、アクセス パスを設定し、パスとコンポーネントをマップするために使用されます.
従来のページ アプリケーションでは、ページの切り替えやジャンプを実現するために、いくつかのハイパーリンクが使用されていました。vue-router シングルページ アプリケーションでは、実際にはコンポーネントの切り替えであるパス間の切り替えです。
ルーティングは、SPA (Single Page Application) のパス マネージャーです。簡単に言えば、vue-router は WebApp のリンク パス管理システムです。
ルートとルーターの違い
- ルート: ルート
- ルーター: ルーター
- ルーターには複数のルートが含まれています
3.3.2 ルートの定義
//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
{path: '/home',component: Home},
{path: '/about',component: About}
];
//创建路由器实例
const router = new VueRouter({
routes: routes
});
3.4 ルート インスタンスの作成とマウント
ルーティングを使用した後の Vue インスタンスの作成は以前とは異なります. 本来は el 属性を使用して境界を指定していました. ルーティングを使用した後は、Vue インスタンスの $mount メソッドを使用してルート インスタンスをマウントする必要があります.
//创建和挂载根实例
var vm = new Vue({
//el: '#app',
//将路由放入vue实例
router: router,
data: {
ts: new Date().getTime()
}
}).$mount("#app");
3.5 RouterLink および RouterView コンポーネントを使用したナビゲーションと表示
<div>
<router-link to="/home">go to Home</router-link>
<router-link to="/about">go to aboue</router-link>
</div>
<div>
<router-view></router-view>
</div>
<router-view></router-view> ルーティング内容表示エリア。
結果を示す：
4 ルーターリンク関連のプロパティ
4.1～
目的地ルートを表すリンク
<router-link to="/home">Home</router-link><!-- 字符串--> <router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->
上記の例は、文字列または js 式のいずれかを使用できるように使用されています。
4.2 交換
replace プロパティが設定されている場合、クリック時に router.push() の代わりに router.replace() が呼び出され、ナビゲーション後に履歴レコードが残りません。
例：
<router-link :to="{ path: '/home'}" replace></router-link>
置換が構成されている場合、リンクをクリックすると、履歴レコードがクリアされ、ロールバックを実行できなくなります。
vue のナビゲーションでのプログラムによるバックフォワード ナビゲーション
- this.$router.go(-1) : 戻ることを表します
- this.$router.go(1): 前進を表します
- パス /home のルートに切り替えます
this.$router.push({
path:'/home'
});
//或者使用path，推荐path
this.$router.push({
path:'/home'
});
例 1: プログラムによる進むボタンと戻るボタン
1) ページに進むボタンと戻るボタンを追加します。
<p>
<button @click="previous">前进</button>
<button @click="next">后退</button>
</p
2) イベントハンドラを追加
methods: {
//前进
previous: function() {
this.$router.go(1);
},
//后退
next: function() {
this.$router.go(-1);
}
}
Vueの $
データ プロパティに加えて、Vue インスタンスはいくつかの便利なインスタンス プロパティとメソッドも公開します。ユーザー定義のプロパティと区別するために、すべて $ の接頭辞が付けられています。
結果を示す：
例 2: 指定したルートに切り替える:
「帰宅」ボタンを追加します。
<button @click="gotohome">回家</button>
gotohome: function() {
console.log("go to home");
this.$router.push({
path: '/home'
});
}
結果を示す：
例 3、デフォルトの表示コンポーネントを設定する
これは非常に簡単です。デフォルトで表示する必要があるコンポーネントに対応するルートのパスを「/」に設定するだけです。
//定义路由表
var routes = [
//默认显示home
{path:'/', component:Home},
{path:'/home', component:Home},
{path:'/about', component:About}
];
例 4:
置換が構成されている場合、リンクをクリックすると、履歴レコードがクリアされ、ロールバックを実行できなくなります。
例:
<router-link to="/home">Home</router-link>
replace 属性を追加し、次のように変更します。
<router-link to="/home" replace>Home</router-link>
ホームをクリックすると、履歴レコードがクリアされることがテストからわかります。したがって、一般的には使用されません。
4.3 追記
append プロパティが設定されている場合、現在の (相対) パスの前にベース パスが追加されます。たとえば、/a から相対パス b に移動します。追加が構成されていない場合、パスは /b であり、構成されている場合は /a/b (パスの追加) です。
<router-link :to="{ path: 'relative/path'}" append></router-link>
4.4 タグ
<router-link> はデフォルトで <a> タグとしてレンダリングされますが、<router-link> を <li> などの何らかのタグとしてレンダリングしたい場合があります。そのため、tag prop クラスを使用してどの種類のタグを指定しても、クリックをリッスンしてナビゲーションをトリガーします。(タグが指定されていない場合、デフォルトでタグとしてレンダリングされます)
<router-link to="/foo" tag="li">foo</router-link>
<!-- レンダリング結果-->
<li>foo</li>
4.5アクティブクラス
リンクがアクティブ化されたときに使用する CSS クラス名を設定します
<style>
.activeClass{
color: #FF0000;
}
</style>
4.6正確なアクティブクラス
リンクが正確に一致した場合にアクティブ化する必要があるクラスを構成します
4.7 イベント
ナビゲーションのトリガーに使用できるイベントを宣言します。文字列または文字列を含む配列にすることができます。
<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>結果を示す：
