小さなDaquanの+のVueのケースの基礎

プログラミング 2020-02-13 18:15:29 訪問数: null

VUE基礎

最初のプログラムVUE

  1. vue.jsの開発バージョンのインポート<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  2. Vueがオブジェクトのインスタンスを作成し、データプロパティには、エルを提供します
  3. ページ上のデータをレンダリングするために、単純なテンプレートの構文を使用します。

エルマウントポイント

  1. スコープVUEとは何ですか？VUEエル管理オプションは、要素の内側とその子孫要素をヒットします
  2. 私は他のセレクタを使用することはできますか？それは使用することができますが、IDセレクタを使用することをお勧めします
  3. あなたは、DOMの他の要素を設定することはできますか？あなたは他の二重標識を使用することができ、あなたはHTML体を使用することはできません
  4. エルの役割は何ですか？マウント（管理）の要素を設定するために、Vueのインスタンス

データ：データオブジェクト

  1. データで使用されるVUEデータの定義
  2. データ：データ（オブジェクトタプルなど）複合型で書くことができます。
  3. 複雑なデータ型をレンダリングする場合、あなたはJSの構文に従うことができます（例えば：オブジェクトのドット構文、文法の配列インデックス）

VUEローカルアプリケーション

V-テキストコマンド

  1. VUE命令はを参照するv-特別な構文の始まり
  2. V-テキストアクションコマンドです：コンテンツの設定]タブ（textCotent）
  3. 差分式を使用して、コンテンツ全体を交換するデフォルトの文言は、{ { } }指定されたコンテンツに置き換えることができます
  4. 内部サポート書かれた表現
  5. サンプルコード
    <div id="app">
	<h2 v-text="message+'!'"></h2>
	<h2 v-text="info"></h2>
	<h2>{{message+'!'}}</h2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"黑马程序员",
			info:"前端"
		},
	})
</script>

V-HTML命令

  1. V-htmlの動作指示は、次のとおりです。要素のinnerHTMLプロパティを設定します
  2. HTMLコンテンツがタグとして解析されます構造があります。
  3. V-テキスト命令は何のコンテンツはテキストのみに解決されるかは重要でありません
  4. サンプルコード
    <div id="app">
	<h2 v-text="content"></h2>
	<h2 v-html="content"></h2>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			content:"<a href='http://www.itheima.com'>黑马程序员</a>"
		},
	})
</script>

V-の指示

  1. V-上の命令の役割は次のとおりです。イベントを結合要素
  2. イベント名は、上の記述する必要はありません。
  3. コマンドはと略記することができます@
  4. バインディングプロパティの方法で定義された方法
  5. サンプルコード
    <div id="app">
	<input type="button" value="v-on指令" v-on:click="doIt">
	<input type="button" value="v-on简写" @click="doIt">
	<h2 @click="changeFood">{{food}}</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			food:"西蓝花"
		},
		methods:{
			doIt:function(){
				alert('doit');
			},
			changeFood:function(){
				console.log(this.food);
				this.food+="好好吃"
			}
		},
	})
</script>

カウンター

  1. 思考

    1. データは、データを定義する例：numのために
    2. そのような追加、サブのように2つのメソッドを追加する方法
    3. タグにまたがるために提供さV-テキストNUMを使用して
    4. Vオンを使用すると、+に、それぞれ、バインドをサブを追加します - ボタン
    5. 累積ロジック：10未満、またはヒントを蓄積
    6. デクリメント論理：0下降より大きい、そうでなければプロンプト
    7. サンプルコード
    <div id="app">
	<div class="input-num">
		<button type="button" @click="sub">-</button>
		<span>{ { num } }</span>
		<button type="button" @click="add">+</button>
	</div>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			num:1
		},
		methods:{
			add:function(){
				if(this.num<10){
					this.num++;
				}else{
					alert("别点了最大了")
				}
			},
			sub:function(){
				if(this.num>0){
					this.num--;
				}else{
					alert("别点了最小了")
				}
			}
		},
	})
</script>

  2. VUE例を作成する：EL（マウントポイント）、データ（データ）、メソッド（方法）

  3. V-上の命令の役割はと略記、結合事象であります@

  4. このキーワードによって、データ内のデータを取得する方法

  5. V-テキストアクション命令である：テキスト値設定要素と略します{ { } }

V-ショー命令

  1. V-showアクション命令である：本物に基づいてスイッチング素子の表示状態
  2. 原理は、ディスプレイの要素を変更することで、隠しを実現
  3. 命令の内容の後ろに、最終的にはブール値に解決されます
  4. Display要素は、真である偽の要素に隠れています
  5. データが変更された後、対応する要素の表示状態が更新されます
  6. サンプルコード
    <div id="app">
	<input type="button" value="切换显示状态" @click="changeIsShow"/>
	<input type="button" value="累加年龄" @click="addAge"/>
	<img src="img/logo.png" v-show="isShow">
	<img src="img/logo.png" v-show="age>=18">
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			isShow:false,
			age:17
		},
		methods:{
			changeIsShow:function(){
				this.isShow = !this.isShow
			},
			addAge:function(){
				this.age++;
			}
		},
	})
</script>

V-IF命令

  1. アクションコマンドは、V-場合：表示状態のスイッチング素子真実の式に従って
  2. 基本的にDOM要素を操作することで表示を切り替えます
  3. 式が真である、DOM要素がツリーに存在している、偽で、ツリーは、DOMから削除されます
  4. かつてのハンドオーバの消費量が少なく、頻繁に切り替え、V-showが、逆は-場合Vを使用するには
  5. サンプルコード
    <div id="app">
	<input type="button" value="切换显示" @click="toggleIsShow"/>
	<p v-if="isShow">黑马程序员</p>
	<p v-show="isShow">黑马程序员show</p>
	<h2 v-if="temperature>=35">热死了</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			isShow:false,
			temperature:40
		},
		methods:{
			toggleIsShow:function(){
				this.isShow = !this.isShow;
			}
		},
	})
</script>

V-bindコマンド

  1. V-バインドアクション命令である：結合特性要素
  2. 完全な文言は、v-bind:属性名
  3. 直接の略語だけ残して、V-バインド場合には省略することができます:属性名
  4. 必要性の動的な追加および削除は、オブジェクトクラスを使用する方法をお勧めします
  5. サンプルコード
    <style type="text/css">
	.active{
		border: 1px solid red;
	}
</style>
<div id="app">
	<img v-bind:src="imgSrc">
	<br>
	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
	<br>
	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			imgSrc:"http://www.itheima.com/images/logo.png",
			imgTitle:"黑马程序员",
			isActive:false
		},
		methods:{
			toggleActive:function(){
				this.isActive=!this.isActive;
			}
		},
	})
</script>

ピクチャースイッチ

  1. カスタムピクチャーのアレイ
  2. 画像の追加インデックスを
  3. V-バインドバインドsrc属性
  4. V-上の画像スイッチ・ロジック
  5. V-ショーの表示状態

V-のための指示

  1. V-効果命令である：データ構造のリストを生成します
  2. 多くの場合、V-用と併せて使用配列
  3. 構文は次のとおりです。(item,index) in 数据
  4. インデックス項目は、他の命令と組み合わせて使用​​してもよいです
  5. 同期ページを更新するために、配列の長さはに応答します
  6. サンプルコード
    <div id="app">
	<input type="button" value="添加数据" @click="add"/>
	<input type="button" value="移除数据" @click="remove"/>
	<ul>
		<li v-for="(item,index) in arr">{ { index+1 } }黑马:{ { item } }</li>
	</ul>
	<h2 v-for="item in vegetabes" v-bind:title="item.name">
		{ { item.name } }
	</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			arr:['北京','上海','广州','深圳'],
			vegetabes:[
				{name:"西蓝花"},
				{name:"炒蛋"}
			]
		},
		methods:{
			add:function(){
				this.vegetabes.push({name:"花菜"});
			},
			remove:function(){
				this.vegetabes.shift();
			}
		},
	})
</script>

V-のサプリメント

  1. 関数呼び出しの形式で記述されたイベントを結合させる方法は、カスタムパラメータを渡すことができます
  2. 私たちは、メソッドを定義し、着信引数を受け取るためのパラメータを定義する必要があります
  3. イベントに戻って追いつくために.修饰符イベントに限定することができます
  4. .enterあなたは、入力するトリガーボタンを制限することができます
  5. イベント改質剤の様々なものがあります
  6. サンプルコード
    <div id="app">
	<input type="button" value="点击" @click="doIt(666,'老铁')"/>
	<input type="text" @keyup.enter="sayHi"/>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		methods:{
			doIt:function(p1,p2){
				console.log("doit");
				console.log(p1);
				console.log(p2);
			},
			sayHi:function(){
				alert("吃了吗");
			}
		},
	})
</script>

Vモデル命令

  1. V-モデルアクション命令がセットに簡単で、フォーム要素の値を取得します
  2. 関連データは、結合および要素値を形成します
  3. データバインディング - フォーム要素の値を
  4. サンプルコード
    <div id="app">
	<input type="button" value="修改message" @click="setM" />
	<input type="text" v-model="message" @keyup.enter="getM"/>
	<h2>{ { message } }</h2>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"黑马"
		},
		methods:{
			getM:function(){
				alert(this.message);
			},
			setM:function(){
				this.message="酷丁鱼"
			}
		},
	})
</script>

使用axios

使用条件

  1. 導入され<script src="https://unpkg.com/axios/dist/axios.min.js"></script>、要求を送信することができます

方法要求の二種類

  1. getメソッド

    • 構文：axios.get("地址?key=value&key2=value2").then(function(response){},function(err){})
    • 2つのコールバック関数は、次いで、後にサーバへの最初の要求は、第2のトリガ時にコールバック要求の失敗の完了をトリガした後、それらはエラーメッセージに応答して、パラメータ・コンテンツ・サーバを得ることができ、または
    • クエリ文字列のフォーマットをされkey=value&key2=value2、キーインタフェースドキュメントが提供され、値は、データ転送に特異的です

  2. POSTメソッド

    • 構文：axios.post("地址",{key:"value",key2:"value2"}).then(function(response){},function(err){})
    • 除い：二番目のパラメータを投稿データは、オブジェクトの形で書かれ、フォーマット{key:value,key2:value2}

  3. サンプルコード

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<input type="button" value="get请求" class="get">
		<input type="button" value="post请求" class="post">
		
		<script type="text/javascript">
			document.querySelector(".get").onclick = function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=3")
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err)
				})
			}
			document.querySelector(".post").onclick = function(){
				axios.post("https://autumnfish.cn/api/user/reg111",{username:"曹哈哈"})
				.then(function(response){
					console.log(response);
				},function(err){
					console.log(err)
				})
			}
		</script>
	</body>
</html>

コアネットワークアプリケーション

  1. コンテンツデータのデータ部は、ネットワークによって取得されます

  2. 方法でネットワーク要求、サーバに応答バックデータは、対応するデータ値を返すために提供された後

    var app = new Vue({
	el:"#app",
	data:{
		joke:"笑话"
	},
	methods:{
		getJokes:function(){
			//this.joke
			axios.get("地址").then(function(response){
				//this.joke?
			},function(err){});
		}
	}
})

  3. サンプルコード

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="获取笑话" @click="getJoke" />
			<p>{{ joke }}</p>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					joke:"很好笑的笑话"
				},
				methods:{
					getJoke:function(){
						// console.log(this.joke);
						var that = this;
						axios.get("https://autumnfish.cn/api/joke").then
						(function(response){
							// console.log(response)
							// console.log(response.data)
							// console.log(this.joke);
							that.joke = response.data;
						},function(err){})
					}
				},
			})
		</script>
	</body>
</html>
Yの植樹
公開された13元の記事 ・ ウォンの賞賛3 ・ ビュー266
プライベートの手紙の 懸念

おすすめ

転載: blog.csdn.net/weixin_45158297/article/details/104299730
おすすめ
ライナスは「ドッグフードを食べる」ことに最も積極的！
Open Source Daily | Winamp プレーヤーがオープンソースになりつつある; 生成 AI の戦いは第 2 ラウンドにエスカレート; AI はバブルの初期段階に入った; Yongming を Alibaba Cloud に導入しますか?
ランキング
C言語プログラミングの最新の方法（第2回）第12章回答（自分で書いた回答、継続的に更新）
フレームワークの蜂のアップロードファイルに移動します
タイトルバーシリーズ：タイトルバーで遭遇したピットを非表示にする
Unityはゲームオブジェクトの様々な状況を取得します
N個の異なるボールは、Mどのように多くの種類のプログラムのと同じ袋に入れられますか？
オブジェクト指向のクラス、オブジェクト21
C ++オブジェクト指向プログラミングの研究ノート（8）
P3954 [NOIP2017 普及组] 成绩
分業のプロセス間通信 - ロック
ハッカーは通常、DOSコマンドウィンドウを使用します
アーカイブ
もっと
2024-05-20(5)
2024-05-19(0)
2024-05-18(30)
2024-05-17(6)
2024-05-16(24)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)

コードワールド

© 2018 codetd.com