目次
開始例
1. まずHTMLページにvueの本番環境を導入し、bodyタグ内に以下のコードを貼り付けます。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2. 次のような導入例をやってみましょう。
エルマウントポイント
中括弧で囲まれた部分がデータ内の同名のデータに置き換えられます。
クラスセレクターを使用することもできますが、実際の開発では ID は一意であるため、ID セレクターを使用することをお勧めします。
Vue が EL オプションを管理しますヒット要素そしてその内部子孫要素
実はdivタグを使わずにマッチングするだけでなく、pタグも使うことができます。idとelが一致することが前提となります。ただし、サポートできるのは p、h1、head などの二重タグのみです (html タグと body タグはサポートされていません)。
データ データ オブジェクト
データに記述されるオブジェクトは以下のとおりです。
オブジェクト型のデータを表示するには、定義したオブジェクト名と属性を直接使用できます。
たとえば
{
{ student.name }} {
{ student.age }}
、この方法で、オブジェクトのプロパティを直接呼び出して表示できます。
data で宣言された配列の使用法は次のとおりです。
使用方法:
{
{ 数组名[0] }}配列の最初の要素を直接表示します。
vueの基本タグ
v-テキスト
ラベルのテキスト値を設定します (textContent)
<h2 v-text="message">hello, world!</h2>
h2 の内容がテキスト メッセージの内容に置き換えられます。
例は次のとおりです。
補間式を使用して文字列の結合を実現することもできます。
結果は次のとおりです
補間式には次の方法も使用できます。
<body>
<div id="app">
<h2 v-text="'hello ' + message"></h2>
<h2>{
{
"hello " + message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Chain"
}
})
</script>
結果は次のとおりです
- v-text ディレクティブの機能は、ラベルの内容 (textContent) を設定することです。
- デフォルトの書き込み方法では、すべてのコンテンツが置き換えられます。指定されたコンテンツを置き換えるには、差分式 {copies} を使用してください。
v-html
その主な機能は、プレーン テキストの代わりにタグ内の HTML コードをレンダリングすることです。
<body>
<div id="app">
<p v-html="content"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content:"<a href='https://www.baidu.com/'>屌毛是你</a>"
}
})
</script>
</body>
結果は次のようになります。リンクがレンダリングされ、クリックしてジャンプできます。
v-html ディレクティブの機能は次のとおりです: set 要素の innerHTML コンテンツに html 構造がある場合、それはタグとして解析されます。v-
text ディレクティブは、コンテンツが何であってもそれをテキストに解析するだけです。 。
ヴオン
イベントを要素にバインドする
サンプルコードは次のようになります。
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="doIt">
<input type="button" value="单击事件" @click="doIt">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
methods:{
doIt:function(){
alert("are you 叼毛");
}
}
})
</script>
</body>
実証結果は以下の通りです。
ただし、一般的な使い方はそれほど単純ではなく、以下のような様々な機能や様々なキーワードが必要となります。
<body>
<div id="app">
<input type="button" value="单击事件" v-on:click="doIt">
<input type="button" value="单击事件" @click="doIt">
<input type="button" value="双击事件" @dblclick="doIt">
<h2 @click="changeFood">{
{
food }}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Chain",
content:"<a href='https://www.baidu.com/'>屌毛是你</a>",
food:"石头拌稀饭"
},
methods:{
doIt:function(){
alert("are you 叼毛");
},
changeFood:function(){
this.food += "炒鸡好吃！"
}
}
})
</script>
</body>
- v-on ディレクティブの機能は、イベントを要素にバインドすることです。
- イベント名は記入不要です
- コマンドは @ と省略できます。
- バインドされたメソッドはmethods属性で定義されます。
反例の実装
おそらくこの効果が得られるでしょう
ステップロジックを実装します。
1. data でデータを定義します: num など
2. メソッドに 2 つのメソッドを追加します: add (インクリメント)、sub (デクリメント) など
3. v-text を使用して num を spam タグに設定します
4. v-on を使用して追加します、サブ +
バインドします
ボタン
<body>
<div id="app">
<button @click="sub">-</button>
<span>{
{
num }}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
num:1
},
methods:{
add:function(){
if(this.num < 10){
this.num++;
}else{
alert("最大为10，叼毛别点了");
}
},
sub:function(){
if(this.num > 0){
this.num--;
}else{
alert("不能为负");
}
}
}
})
</script>
</body>
結果は次のとおりです。
注意事項は以下の通りです
- Vue作成例：el（マウントポイント）、data（データ）、method（メソッド）
- v-on 命令の機能は、@ と省略されるイベントをバインドすることです。
- このメソッドでは、data 内のデータは this とキーワードによって取得されます。
- v-text ディレクティブの機能は、要素のテキスト値を設定することです ({ {}}と省略されます)。
Vショー
実装コードは次のとおりです (誰もが知っていますが、年齢に基づいて何かを表示または非表示にすることができます)。
<body>
<div id="app">
<input type="button" value="切换限制级别" @click="man">
<input type="button" value="切换青少年级别" @click="boy">
<img v-show="age >= 18" src="https://img1.mydrivers.com/img/20230305/e103b86e-b368-45bb-93aa-8e4d51964fe2.png">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
age:16
},
methods:{
man:function(){
this.age = 18;
},
boy:function(){
this.age = 16;
}
}
})
</script>
</body>
効果は以下の通りです
トピックに戻りますが、v-show タグは基本的に style の表示属性を none に切り替えます。
予防
- v-show 命令の機能は、true と false に基づいて要素の表示状態を切り替えることです。
- 原理は、要素の表示を変更して表示と非表示を実現することです。
- 命令に続くコンテンツは最終的にブール値に解析されます。
- 値が true の要素は表示され、値が false の要素は非表示になります。
- データ変更後、対応する要素の表示ステータスが同期して更新されます
v-if
v-if と v-show は実際には似ており、どちらも要素の表示または非表示を制御するために使用されます。構文は次のとおりです
デモコード
<body>
<div id="app">
<p v-if="isShow">叼毛</p>
<input type="button" value="切换显示" @click="change">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
isShow:false
},
methods:{
change:function(){
this.isShow = !this.isShow;
}
}
})
</script>
</body>
実証結果
v-show と v-if の違いは、切り替えの際、v-if は変更されて表示されないときにタグを直接削除しますが、v-show はスタイル タグのステータスのみを変更することです。
次の図は、切り替え時の 2 つのラベル変更の変化を明確に示しています。
頻繁に切り替えられる要素には v-show を使用します。v-if は dom ツリーを変更し、v-show はスタイルのみを操作するため、v-show の方がパフォーマンスが優れていますが、v-show の非表示の要素は引き続き表示されます。安全ではないのですが質問です。
- v-if命令の役割は、式の真偽に従って要素の表示状態を切り替えることです。
- 要はdom要素を操作して表示状態を切り替えることです
- 式の値が true の場合、要素は dom ツリーに存在し、false の場合、要素は dom ツリーから削除されます。
- v-show を頻繁に切り替えます。それ以外の場合は v-if を使用します。前者の方が切り替えの消費が少なくなります。
vバインド
構文: v-bind: 属性名 = 式
この v-bind は省略することもできます。以下に示すように、両方の方法が可能です
<body>
<div id="app">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" alt="" :title="imgtitle+'!!!'">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"https://img0.baidu.com/it/u=340747937,2651100772&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
imgtitle:"可可奈奈"
}
})
</script>
</body>
このタイトル タグは、マウスをホバーしたときにテキストを表示します。設定後、2 番目の画像にホバーしたときにタイトル テキストが表示されますが、最初の画像には表示されません。上記のコードから、このタイトルも文字列に結合できることがわかります。
:title="imgtitle+'!!!'"
<img :src="imgSrc" alt="" :title="imgtitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
このタグのクラス、つまり active が有効かどうかは、isActive が true か false かによって決まります。
画像切り替え例
この例は、これまでに学んだことを組み合わせたものです。これは良いデモです。効果を実現するには、左側の矢印をクリックして前の画像に切り替え、右側の矢印をクリックして次の画像に切り替えます。左側の画像を非表示にします最初の画像の矢印、最後の画像の右矢印を非表示にします。
その実装手順は次のとおりです
説明: JavaScript: void (任意の数値) を記述すると、ハイパーリンクのジャンプを防ぐことができます
<body>
<div id="mask">
<div class="center">
<h2 class="title">
<img src="./images/logo.png" alt="">
</h2>
<!-- 图片 -->
<img :src="imgArr[index]" alt="" />
<!-- 左箭头 -->
<a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
<img src="./images/prev.png" alt="" />
</a>
<!-- 右箭头 -->
<a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
<img src="./images/next.png" alt="" />
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#mask",
data: {
imgArr: [
/* 添加图片路径 */
"./images/00.jpg",
"./images/01.jpg",
"./images/02.jpg",
"./images/03.jpg",
"./images/04.jpg",
"./images/05.jpg",
"./images/06.jpg",
"./images/07.jpg",
"./images/08.jpg",
"./images/09.jpg",
"./images/10.jpg",
],
/* 数组索引 */
index: 0
},
methods: {
prev:function(){
this.index--;
},
next:function(){
this.index++;
}
},
})
</script>
</body>
v-for
配列を走査してリスト構造を自動的に生成するために使用されます。これはコピーアンドペーストとして理解でき、配列を自動的に走査し、要素データを順番にバインドして表示します。
以下に示すような分析
注: 上記は
:titlev-bind を使用し、それに tiele 属性を設定していますが、次のように省略できます: title; then { { index}} は配列の添え字を取ることを意味します。
実際の使用例:
コードファースト
<body>
<div id="app">
<ul>
<li v-for="item in arr">
人称：{
{
item}}
</li>
</ul>
<h2 v-for="i in food">
{
{
i.name}}
</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
arr:["你","我","他"],
food:[
{
name:"石头拌稀饭"},
{
name:"黄沙炒米饭"}
]
}
})
</script>
</body>
実証結果は以下の通りです。
実際、上記の例を通して、v-for の使用はデータ要素を走査し、それらを同じ形式で表示することを意味することを理解する必要があります。
2 つのクリック メソッドを追加しています。v-on コマンドを使用してバインドします
効果は次のとおりです。
原理は非常に単純です: 食品を追加する方法は、配列に新しい要素を追加することです。その後、v-for タグがあるため、それらはすべて走査されます。食品を減算する方法は同じです。シフト メソッドを使用すると、
それぞれ配列の左端の要素が削除されると、その要素を横断することはできなくなり、この要素に到達しても、当然表示されなくなります。
v-for を使用すると、リストを非常に簡単に生成できます。
v-onサプリメント
カスタムパラメータ、イベント修飾子を渡す
使用例：
検証結果は以下の通りです。
別の例では、キーボードの Enter キーに基づいてポップアップ ウィンドウをトリガーします。
v モデル
フォーム要素の値を取得および設定します (双方向データ バインディング)
デモ例
axiosネットワークリクエスト
axiosの基本的な使い方
axios を使用する場合は、インターネットに接続し、公式 Web サイトで提供されている axios オンライン アドレス要求ライブラリの基本的な構文を導入する必要があります。
これは実際には Ajax のカプセル化です。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
以下に示すように、実行成功時のコールバック関数と実行失敗時のコールバック関数の 2 つに分かれます。
post请求中，第一个参数是url的地址，第二个参数是post的数据
これら 2 つのインターフェイス ドキュメントをデモンストレーションとして使用してみましょう。
サンプルコード（vueを使用せず、ネイティブjsを使用）
<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:随机笑话
请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话
*/
document.querySelector(".get").onclick = function () {
axios.get("https://autumnfish.cn/api/joke/list?num=6")
// axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
.then(function (response) {
console.log(response);
},function(err){
console.log(err);
})
}
/*
接口2:用户注册
请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败
*/
document.querySelector(".post").onclick = function () {
axios.post("https://autumnfish.cn/api/user/reg",{
username:"盐焗西兰花"})
.then(function(response){
console.log(response);
console.log(this.skill);
},function (err) {
console.log(err);
})
}
</script>
</body>
Vue での axios の使用
ネットワークデータの核心は、データ内のデータの一部がネットワーク経由で取得されることです。したがって、ネットワーク要求はメソッド内で送信され、応答が成功すると、サーバーから返されたデータは対応するデータ値にバインドされます。
トラップ、ajax は非同期です。ajax 関数の this は vue インスタンスを指していません。これを通じて vue のインスタンスを取得することはできないため、axios 関数ではこれを使用しません。
これは変更されるため、解決策は最初にそれを保存し、that、var that = this; を定義することです。
<body>
<div id="app">
<input type="button" value="获取笑话" @>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
joke:"很好笑的笑话"
},
methods:{
getJoke:function(){
var that = this;
axios.get("https://autumnfish.cn/api/joke").then
(function(response){
console.log(response.data);
that.joke = response.data;
},function(err){
})
}
}
})
</script>
</body>
