Vueの最初のプログラムを書くための勉強ノート
|
ここでは公式ドキュメントCDNを使用します <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 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: 双方向バインディングとは、フロントエンドのデータが変更されると、データ内のデータも変更されることを意味します。
ページを更新せずにデータを変更し、フロントエンドの表示に同期することができます。
決定ループ
イベント
787 原則Vueを学ぶには、7つのプロパティ、8つのメソッド、7つの命令を知っておく必要があります。 el属性これは、Vue コンパイラーに Vue 構文の解析を開始する場所を指示するために使用され、プレースホルダーとも言えます。 データ属性ビューから抽象化された属性を整理するために使われます。ビューのデータが抽象化されてデータに格納されていると言えます。 テンプレート属性プレースホルダーを含むページ要素を置き換えるテンプレートを設定するために使用されます。 メソッド属性ビジネス ロジックをページ内に配置します。JS メソッドは通常、メソッド内に配置されます。 レンダリングプロパティ本物の仮想DOMを作成する 計算されたプロパティ計算に使用 時計のプロパティ
ウォッチ:関数(新しい関数、古い関数){}
データの変化を監視する 2つのパラメータ、1つは新しい値を返し、もう1つは古い値を返します 以上が勉強ノートvueの最初のプログラムの詳しい内容です。vueプログラムの詳細については、123WORDPRESS.COMの他の関連記事に注目してください！ 以下もご興味があるかもしれません:
|
<<: Ubuntu 20.04 ダブルピンイン入力方式のインストール手順
>>: MySQLとOracleの違いのまとめ（機能性能の比較、選択、使用時のSQLなど）
推薦する
HTML テーブル マークアップ チュートリアル (14): テーブル ヘッダー
<br />HTML 言語では、タグを使用してテーブルにタイトルを自動的に追加できます。...
FlashFXP FTP クライアント ソフトウェア登録クラッキング方法
FlashFXPのダウンロードアドレスは、https://www.jb51.net/softs/95...
202 無料の高品質 XHTML テンプレート (1)
ここで 123WORDPRESS.COM はこれらのテンプレートの最初の部分を紹介します。各テンプレ...
NexusはHTTPSプロトコルをサポートするためにnginxプロキシを使用します
背景すべての会社の Web サイトは HTTPS プロトコルをサポートする必要があります。Aliba...
nginx 設定場所方法の概要
位置一致順序1. 「=」プレフィックス命令マッチング、マッチングが成功したら他のマッチングを停止2....
MySQL データベース 8 - データベース内の関数の適用の詳細な説明
データベースの組み込み関数の使用この記事では、主に日付関数、文字列関数、数学関数など、データベースの...
非ルートユーザーを使用してDockerコンテナでスクリプト操作を実行する
アプリケーションをコンテナ化した後、Docker コンテナを起動すると、デフォルトで root ユー...
Win10 構成 Tomcat 環境変数チュートリアル図
設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...
resizeを使用して画像切り替えプレビュー機能を実装する方法
要点CSS resize プロパティを使用すると、要素のサイズ変更可能性を制御できます。サイズ変更を...
CSSでプロセスナビゲーション効果を実現する（3つの方法）
CSS によりプロセスナビゲーション効果を実現します。具体的な内容は以下のとおりです。 ::tip...
WeChatアプレットが計算機機能を実装
WeChatミニプログラムはますます人気が高まっています。多くの大学生が独学で学んでいるのも見てきま...
CSS 位置固定左と右の二重配置実装コード
CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...
きちんとしたHTMLマークアップを使用してページを構築します
インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...
MySQLクエリ最適化分析チュートリアルをステップバイステップで教えます
序文MySQL は、強力なクエリ機能、高いデータ一貫性、高いデータ セキュリティ、およびセカンダリ ...
表のセルの内容が超過した場合に省略記号効果を表示する（実装コード）
例示するフロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必...