Vueの最初のプログラムを書くための勉強ノート

1. HTMLを書く、最初のVueプログラム

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title> 
</head>
<本文>
<!--ビュー レイヤー テンプレート-->
<div id="アプリ">
    {{メッセージ}}
</div>
 <!--vue.js をインポート-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <スクリプト>
    var vm = 新しい Vue({
        el:"#アプリ",
        //モデル: データ:{
            メッセージ: "こんにちは、vue"
        }
    });
 </スクリプト>
 </本文>
</html>

ビューテンプレートとデータに注意してください

ビュー

モデル

ViewModel: 双方向バインディングとは、フロントエンドのデータが変更されると、データ内のデータも変更されることを意味します。

ページを更新せずにデータを変更し、フロントエンドの表示に同期することができます。

決定ループ

if
for

イベント

on

787 原則

Vueを学ぶには、7つのプロパティ、8つのメソッド、7つの命令を知っておく必要があります。

el属性

これは、Vue コンパイラーに Vue 構文の解析を開始する場所を指示するために使用され、プレースホルダーとも言えます。

データ属性

ビューから抽象化された属性を整理するために使われます。ビューのデータが抽象化されてデータに格納されていると言えます。

テンプレート属性

プレースホルダーを含むページ要素を置き換えるテンプレートを設定するために使用されます。

メソッド属性

ビジネスロジックをページ内に配置します。JS メソッドは通常、メソッド内に配置されます。

レンダリングプロパティ

本物の仮想DOMを作成する

計算されたプロパティ

計算に使用

時計のプロパティ

ウォッチ:関数(新しい関数、古い関数){}

データの変化を監視する

2つのパラメータ、1つは新しい値を返し、もう1つは古い値を返します

以上が勉強ノートvueの最初のプログラムの詳しい内容です。vueプログラムの詳細については、123WORDPRESS.COMの他の関連記事に注目してください！

以下もご興味があるかもしれません:

Vueフレームワークで習得しなければならない重要な知識を学びます
Vue nextTick の使い方と原理の詳細な研究
Vueコンポーネントの例を学ぶ
Vue.js の条件付きレンダリングを学ぶ
Vue.js の計算プロパティを学ぶ
シンプルな学習 Vue ディレクティブ

<<: Ubuntu 20.04 ダブルピンイン入力方式のインストール手順

>>: MySQLとOracleの違いのまとめ（機能性能の比較、選択、使用時のSQLなど）

JavaScript でドラッグ可能なプログレスバーを実装する

ブログ

ウェブサイトのテキストはまだデザインする必要がありますか?

ブログ

CSS継承方法

ブログ

HTML と CSS を使用して絵文字付きのコメントボックスを作成する方法のチュートリアル

ブログ

配列をフラット化する 5 つの JavaScript の方法

ブログ

カルーセル効果を作成するためのjs

ブログ

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

ブログ

HTML におけるスクリプトの配置に関する簡単な説明

ブログ

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

ブログ

ウォーターフォールフローレイアウトを実装する3つの方法

ブログ

Vueの最初のプログラムを書くための勉強ノート

目次

1. HTMLを書く、最初のVueプログラム

ビューテンプレートとデータに注意してください

決定ループ

イベント

787 原則

el属性

データ属性

テンプレート属性

メソッド属性

レンダリングプロパティ

計算されたプロパティ

時計のプロパティ

JavaScript でドラッグ可能なプログレスバーを実装する

ウェブサイトのテキストはまだデザインする必要がありますか?

CSS継承方法

HTML と CSS を使用して絵文字付きのコメントボックスを作成する方法のチュートリアル

配列をフラット化する 5 つの JavaScript の方法

カルーセル効果を作成するためのjs

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

HTML におけるスクリプトの配置に関する簡単な説明

MySQLは現在の日付と時刻を取得する関数の例の詳細な説明

ウォーターフォールフローレイアウトを実装する3つの方法

推薦する

WIN10 システムと Docker 内部コンテナ IP 間の通信方法

GobangゲームのWebバージョンを実装するためのJavaScript

Nginxでネットワーク分離を解決した実践記録を詳しく解説

MySQLの空の値とnull値の違いを知っていますか？

HTML における水平および垂直の中央揃え方法の詳細な説明 (基礎)

jQuery ステップ進行軸プラグインの実装コード

MySQL無料インストール版を解凍した後にパスワードが見つからない問題を解決する方法

HTML タグ dl dt dd 使用方法

Vue パッケージアップロードサーバー更新 404 問題に対する 2 つの解決策

MySQL におけるデータベース間関連クエリメソッド

jQueryはシンプルなポップアップウィンドウ効果を実装します

Vue の foreach 配列と js の traversal 配列の書き方の説明

ウェブサイトのAboutページの紹介コンテンツの書き方

W3C チュートリアル (7): W3C XSL アクティビティ

Windows 10 の仮想マシンに Mac システムをインストールするグラフィックチュートリアル