1. Vue プログラムの初体験
Vue フレームワークの開発履歴、Vue フレームワークの特徴、Vue の開発者などを理解する必要はありません。これらは、Vue プログラムを作成する際に大きな役割を果たすことはありません。これを完全に理解する方法があるので、まず使い方を学び、一定期間使用した後、Vue フレームワークとその機能に慣れることができます。Vue は JavaScript (JS) に基づいて実装されたフレームワークであることを知っておく必要があります。これを使用するには、まず Vue js ファイルを取得する必要があります。
1.1 vue.jsをダウンロードしてインストールする
ステップ 1: 以下の図に示すように、Vue2 公式 Web サイトを開き、「開始」をクリックします。
ステップ 2: 以下の図に示すように、「インストール」をクリックし続けます。
ステップ 3: 以下の画像に示されている場所が表示されるまで、「インストール」ページを下にスクロールします。
ステップ 4: 以下の図に示すように、開発バージョンをクリックしてダウンロードします。
ステップ 5: Vue をインストールします。
script タグを使用して vue.js ファイルをインポートします。このように: <script src=”xx/vue.js”></script>
1.2 最初の Vue プログラム
統合開発環境は VSCode を使用します。お持ちでない場合はインストールできます。
最初の Vue プログラムは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个Vue程序</title>
<!-- 安装vue.js -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
// 第一步：创建Vue实例
const vm = new Vue({
template : '<h1>Hello Vue!</h1>'
})
// 第二步：将Vue实例挂载到指定位置
vm.$mount('#app')
</script>
</body>
</html>
実行結果:
最初のプログラムを説明します。
- スクリプトを使用して vue.js をインポートすると、Vue がグローバル変数として登録されます。jQuery導入後と同様に、jQueryもグローバル変数として登録されます。
- Vue インスタンスの存在はソース コードを通じて確認できるため、Vue インスタンスを新規作成する必要があります。
-
- Vue のコンストラクター パラメーターはオプション設定オブジェクトです。構成オブジェクトには、Vue の事前定義された構成が多数あります。各設定項目はキー:値の構造です。key:value は Vue 設定項目です。
- テンプレート構成項目: 値はテンプレート文字列です。ここに Vue の文法規則に準拠したコードを記述します (Vue には独自の文法規則セットがあります)。ここに書かれた文字列は Vue コンパイラによってコンパイルされ、ブラウザが認識できる HTML コードに変換されます。テンプレートをテンプレートといいます。
- Vue インスタンスの $mount メソッド: このメソッドはマウント アクションを完了し、Vue インスタンスを指定された場所にマウントします。つまり、Vue によってコンパイルされた HTML コードがページの指定された位置にレンダリングされます。注: 指定された位置の要素が置き換えられます。
- 「#app」の構文は、CSS の ID セレクター構文に似ています。Vue インスタンスを id='app' の要素位置にマウントすることを示します。もちろん、ネイティブ JS を記述することも可能です: vm.$mount(document.getElementById('app'))
- 「#app」は ID セレクターであり、クラス セレクター「.app」などの他のセレクターも使用できます。クラス セレクターは複数の要素 (位置) を照合できますが、この時点では、Vue はマウントする最初の位置 (上から下へ) のみを選択します。
1.3 Vueのデータ構成項目
最初の Vue プログラムを観察すると、この機能を完了するには Vue をまったく使用する必要がなく、次のコードを body タグに直接記述するだけであることがわかります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>没必要使用Vue呀</title>
</head>
<body>
<h1>Hello Vue!</h1>
</body>
</html>
Vue にはデータ構成項目があり、次のようにページ コードを動的にレンダリングするのに役立ちます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue选项data</title>
<!-- 安装vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue代码 -->
<script>
new Vue({
data : {
message : 'Hello Vue!'
},
template : '<h1>{
{message}}</h1>'
}).$mount('#app')
</script>
</body>
</html>
操作の結果は次のようになります。
上記の手順を説明します。
- data は Vue インスタンスのデータ オブジェクトです。また、このオブジェクトは純粋なオブジェクト (0 個以上のキーと値のペアを含む) である必要があります。
- { {message}} は、補間構文 (または beard 構文) と呼ばれる、Vue フレームワーク自体によって作成された構文で、キーに従ってデータから値を取得し、その値を対応する位置に挿入できます。
- データは次の状況にある可能性がありますが、これらの状況に限定されません。
data : { name : '老杜', age : 18 } //取值： { {name}} { {age}} data : { user : { name : '老杜', age : 18 } } //取值： { {user.name}} { {user.age}} data : { colors : ['红色', '黄色', '蓝色'] } //取值： { {colors[0]}} { {colors[1]}} { {colors[2]}} -
上記のプログラム実行原理: Vue コンパイラーはテンプレートをコンパイルし、 mustache { {}} に遭遇するとデータからデータをフェッチし、フェッチしたデータを対応する位置に挿入します。HTML コードを生成し、最後に HTML をマウント場所にレンダリングして表示します。
-
データが変更されると、テンプレート テンプレートが再コンパイルされ、再レンダリングされます。
1.4 Vueのテンプレート設定項目
テンプレートにはルート要素を 1 つだけ含めることができます。次のコードを参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue选项template</title>
<!-- 安装vue -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- 指定挂载位置 -->
<div id="app"></div>
<!-- vue程序 -->
<script>
new Vue({
template : '<h1>{
{message}}</h1><h1>{
{name}}</h1>',
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
</script>
</body>
</html>
の結果
コンソール エラー メッセージ: コンポーネント テンプレートにはルート要素を 1 つだけ含める必要があります。したがって、テンプレートを使用する場合、存在できるルート要素は 1 つだけです。コードは次のように変更されます。
new Vue({
template : '<div><h1>{
{message}}</h1><h1>{
{name}}</h1></div>',
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
演算結果
テンプレートがコンパイルされてレンダリングされると、マウント場所の要素が置き換えられます。
テンプレートの背後にあるコードを変更する必要がある場合は、「 」記号内にコードを記述することをお勧めします。また、文字列を連結するために + を使用することは推奨されません。コードは次のように変更されます。
new Vue({
template : `
<div>
<h1>{
{message}}</h1>
<h1>{
{name}}</h1>
</div>
`,
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')演算結果
テンプレート設定項目は省略して、HTML コードに直接記述することができます。コードは以下のように表示されます。
<!-- 指定挂载位置 -->
<div id="app">
<div>
<h1>{
{message}}</h1>
<h1>{
{name}}</h1>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
}
}).$mount('#app')
</script>
演算結果
2 つの点に注意する必要があります。
第一に、このメソッドはテンプレートのような要素の置換を生成しません。
2 番目: HTML コードに直接書き込まれていますが、上記のプログラムの 3 行目から 6 行目は HTML コードではなく、Vue 構文機能を備えたテンプレート ステートメントになっています。このコンテンツは、データ変更後に再コンパイルされます。
Vue インスタンスをマウントする場合、$mount メソッドの代わりに Vue の el 構成アイテムを使用することもできます。コードは以下のように表示されます。
<!-- 指定挂载位置 -->
<div id="app">
<div>
<h1>{
{message}}</h1>
<h1>{
{name}}</h1>
</div>
</div>
<!-- vue程序 -->
<script>
new Vue({
data : {
message : 'Hello Vue!',
name : '动力节点老杜'
},
el : '#app'
})
</script>
の結果
el は、Element という単語の略語で、「要素」と訳されます。el 構成アイテムは主に、Vue インスタンスに関連付けられたコンテナーを指定するために使用されます。つまり、どのコンテナが Vue によって管理されるかということです。