Webフロントエンド開発のためのVueの簡単な使用

その他 2021-01-26 10:48:29 訪問数: null

1.Vueの紹介

  • jsフレームワークです
  • DOM操作を簡素化する
  • 応答性の高いデータ駆動

2.vueの使用を開始する

1.最初のvueプログラム

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    {
   
   { message }}
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"asdhello！"
        }
    })

</script>
</body>
</html>

idセレクター、メッセージ、vueインスタンスのメソッドがバインドされています。

2.elマウントポイント

elの役割：vueインスタンスのマウント管理の要素を設定するために使用されます。

一般に、idセレクターはバインディングに使用され、クラスセレクターとラベルセレクターのスクエアヒットは不明確なセマンティクスを引き起こします。

ラベルバインディングインスタンスは、閉じたラベルのみにすることができ、通常はdivタグにマウントされる閉じていない付箋ではありません。

vueインスタンスのスコープは何ですか？

Vueは、elオプション名の要素とその子孫要素を管理します。

他のセレクターを使用することは可能ですか？

他のセレクターを使用することもできますが、IDセレクターをお勧めします。

他のdom要素を設定できますか？

他のdoubleタグを使用できますが、htmlとbodyは使用できません。divをお勧めします。

3.データデータオブジェクト

  • vueで使用されるデータはデータで定義されています
  • 複雑なタイプのデータをデータに書き込むことができます
  • 複雑なデータをレンダリングするときは、js構文に従ってください。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    {
   
   { message }}
<h2>{
   
   {school.name}}{
   
   {school.mobile}}</h2>
<ul>
    <li>{
   
   {campus[0]}}</li>
    <li>{
   
   {campus[1]}}</li>
    <li>{
   
   {campus[2]}}</li>
    <li>{
   
   {campus[3]}}</li>
</ul>
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"你好，小黑！！",
            school:{
                name:"黑马程序员",
                mobile:400-618-9990
            },
            campus:["北京校区","上海校区","广州校区","深圳校区"]
        }
    })
</script>
</body>
</html>

3.ローカルアプリケーション

  • vueを通じて一般的なWebページの効果を実現します。
  • vueの説明を学び、知識ポイントをケースと統合します。
  • vue命令は、v-で始まる一連の特別な構文を参照します。

1.v-テキスト命令

ラベルのテキスト値を設定します（textContent）

  • デフォルトの文言はすべてのコンテンツを置き換え、 指定されたコンテンツは差分式{ {}}で置き換えることができます
  • 内部での式の記述をサポート
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
    <h2 v-text="message">深圳<h2>
    <h2>深圳{
   
   {message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"asdhello！"
        }
    })

</script>
</body>
</html>

2.v-htmlコマンド

  • タグのinnerHTMLを設定します。
  • コンテンツのhtml構造はタグに解析されます。
  • v-textコマンドは、その内容に関係なく、テキストとしてのみ解析されます。
  • v-textを使用してテキストを解析し、v-htmlを使用してhtml構造を解析します。

v-textコマンドとは異なり、v-htmlはhtml言語を認識できますが、v-textはhtml言語を通常のテキストとして扱います。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
   <p v-text='content'></p>
   <p v-html='content'></p>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
           content:"<a href='http:/www.itheima.com'>黑马程序员！</a>"
        }
    })
</script>
</body>
</html>

[外部リンクの画像転送に失敗しました。ソースサイトにアンチホットリンクメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-SGiANoNP-1608016665000）（C：\ Users \ jiangdada \ AppData \ Roaming \ Typora \ typora-user-images \ 1594029017433.png）]

3.v-オン命令

  • イベントを要素にバインドします。
  • イベント名を書く必要はありません
  • 命令は@と省略できます。
  • バインディングメソッドはmethods属性で定義されます
  • メソッド内では、データで定義されたデータにthisキーワードを使用してアクセスできます。
<div id="app">
<!--点击事件-->
<input type="button" value="事件绑定" v-on:click="dolt">
<!--鼠标滑过-->
<input type="button" value="事件绑定" v-on:monseenter="dolt">
<!--双击击事件-->
<input type="button" value="事件绑定" v-on:dblclick="dolt">
<!--vue中支持将v-on转换成@来表示-->
<input type="button" value="事件绑定" @click="dolt">
</div>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
          },
        methods:{
         doft:function(){
         //逻辑
         }
        }
    })
</script>

サンプルコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
  <input type="button" value="v-on指令" v-on:click="doIT">
  <input type="button" value="v-on简写" @click="doIT">
  <input type="button" value="v-on双击" @dblclick="doIT">
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
       methods:{
           doIT:function(){
               alert("做IT");
           }
       }
    })
</script>
</body>
</html>

4.カウンター

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>
<div id="app">
 <button @click="sub">-</button>
 <span>{
   
   {num}}</span>
 <button @click="add">+</button>
</div>
<script src="./js/vue.js"></script>
<script> 
    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>
</body>
</html>

5.v-showコマンド

  • 式の正誤に応じて、要素の表示と非表示を切り替えます。
  • 原則は、要素の表示を変更して、表示と非表示を実現することです。
  • 命令後のコンテンツは、最終的にブール値として解析されます。
  • 値がtrueの要素は表示され、値がfalseの要素は非表示になります。
  • データが変更されると、対応する要素の表示ステータスが同期的に更新されます。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <div v-show="isShow">saodjasoid</div>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
        },
        methods:{
            changeIsShow:function(){
            this.isShow=!this.isShow;
            }
        }
    })
</script>
</body>
</html>

6.v-if命令

  • 示された値の真偽に応じて、要素の表示と非表示を切り替えます（dom要素を操作します）
  • 本質は、dom要素を操作して表示状態を切り替えることです。
  • 式の値はtrueであり、要素はdomツリーに存在し、falseはdomツリーから削除されます。
  • v-ifを使用して、v-showを頻繁に切り替えたり、その逆を行ったりすると、前者の切り替えの消費量が少なくなります。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if指令</title>
</head>

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click=" toggleIsShow">
    <p v-if="isShow">黑马程序员</p>
    <p v-show="isShow">黑马程序员 v-show!</p>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            isShow:false,
        },
        methods:{
           toggleIsShow:function(){
               this.isShow=!this.isShow;
           }
        }
    })
</script>
</body>
</html>

注：v-showとは異なり、v-ifは操作のドームであり、v-showは操作のスタイルです。

7.v-バインド命令

  • src、titile、classなどの要素属性を設定します
  • オブジェクトの使用を提案するには、クラスを動的に追加および削除する必要があります。

書き方：

v-bind:src="imgsrc"
可以简写为:
:src=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-show指令</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
   <img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
   <br>
   <img :src="imgSrc" alt="" :class="{active:isActive}"  @click="toggleActive">

</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
         imgSrc:"http://www.itheima.com/images/logo.png",
         isActive:true,
        }, 
        methods:{
        toggleActive:function(){
             this.isActive=!this.isActive;
             console.log("点击事件被触发")
        }
        },
    })
</script>
</body>
</html>
</html>

三項式を使用できます。また、次のようなオブジェクトを使用することもできます。

<!--对三元表达式写法的时候要记得给css样式加上单引号-->
<img :src="imgSrc" alt="" :class="isActive?'active':''" @click="toggleActive">
   <br>
<!--对象的写法，css样式的显示取决于冒号后面对象的真假-->
<img :src="imgSrc" alt="" :class="{active:isActive}"  @click="toggleActive">

8.v-指示用

  • データに基づいてリスト構造を生成します。
  • 配列は、v-forと組み合わせて使用​​されることがよくあります。
  • 構文は配列itemの（item、index）であり、命名規則に準拠している限り、indexを変更できます。
  • アイテムとインデックスは、他の命令と組み合わせて使用​​できます。
  • 配列の長さの更新は、レスポンシブなページに同期されます。

itemは配列の各要素値に対応し、indexは配列の添え字値に対応します。変数は他の表現に変更できます。命名規則に従うだけです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>

<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">{
   
   {index+1}}黑马程序员校区:{
   
   {item}}</li>
    </ul>
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
   <ul>
       <li v-for="(item,index) in vegetables"  :title="item.name">
         {
   
   {index}}{
   
   {item.name}}
       </li>
   </ul>
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
          arr:["北京","上海","广州"],
          vegetables:[
              {name:"西兰花炒蛋"},
              {name:"蛋炒西兰花"}
          ],
        },
        methods:{
           add:function(){
               //push方法将元素追加到数组是尾部
               this.vegetables.push({name:"花菜炒蛋"})
           },
           remove:function(){
               //shift方法删除数组第一个元素
               this.vegetables.shift();
           }
        }
    })
</script>
</body>
</html>

9.v-サプリメント

カスタムパラメータ、イベント修飾子を渡します。

  • イベントの後には、イベントを制限するための修飾子が続きます。
  • .enterは、トリガーされたボタンの入力を制限できます
  • 多くのイベント修飾子があります。
  • キーボードダウンイベント：keydown（）は、キーボードが押されたときにトリガーされます。
    キーボードアップイベント：keyup（）は、キーボードが離されたときにトリガーされます。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on补充</title>
</head>

<body>
<div id="app">
    <input type="button" value="点击" @click="doIt(6666,'老铁')">
    <input type="text"  @keyup.enter="sayhi">
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{        
        },
        methods:{
         doIt:function(p1,p2){  
            console.log("do it!!!!")
            console.log(p1,p2)
         },
         sayhi:function(){
             alert("吃了没！")
         }
        }
    })
</script>
</body>
</html>

10.v-モデルの説明

  • フォーム要素の値を取得および設定します（双方向データバインディング）。
  • バインドされたデータは、フォーム要素の値に関連付けられます。
  • バインドされたデータは、フォーム要素の値である双方向バインディングと同等です。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个实例</title>
</head>

<body>
<div id="app">
  <input type="button" value="修改"    @click="setM">
  <input type="text" v-model="message" @keyup.enter="getM">
  <h2>{
   
   {message}}</h2>

</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            message:"黑马程序员"
        },
       methods:{
         getM:function(){
             alert(this.message);
         },
         setM:function(){
             this.message="酷丁鱼";
         }
       }
    })
</script>
</body>
</html>

11アプリケーション-メモ帳

機能：追加、削除、カウント、クリア、非表示

1.新規

  • リスト構造を生成するv-配列用
  • ユーザー入力vモデルを取得する
  • Enterキーを押して、データを追加します@ keyup.enter push
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
<div id="todoapp">
    <input type="text" v-model="inputValue"  @keyup.enter="add">
    <ul>
        <li v-for="(item,index) in list"> {
   
   {index+1}}{
   
   {item}}</li>
    </ul>
   
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#todoapp",
        data:{
           list:["写代码","吃饭饭","睡觉觉"],
           inputValue:"好好学习，天天向上！",
        },
        methods:{
        add:function(){
            this.list.push(this.inputValue);
        },
        }
    })
</script>
</body>
</html>

2.削除機能

  • 指定されたコンテンツを削除しますv-onスプライス
  • データが変更され、データバインディング要素が同期的に変更されます
  • イベントのカスタムパラメータ
  • スプライスメソッドの役割。最初のパラメーターは削除されるインデックス値であり、2番目のパラメーターは削除の数です。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
<div id="todoapp">
    <input type="text" v-model="inputValue"  
    placeholder="请输入任务...." @keyup.enter="add">
    <ul>
        <li v-for="(item,index) in list"> {
   
   {index+1}}{
   
   {item}}
            <button   @click="remove(index)">x</button>           
        </li>
    </ul>
   
</div>
<script src="./js/vue.js"></script>
<script> 
    var app=new Vue({
        el:"#todoapp",
        data:{
           list:["写代码","吃饭饭","睡觉觉"],
           inputValue:"好好学习，天天向上！",
        },
        methods:{
        add:function(){
            this.list.push(this.inputValue);
        },
        remove:function(index){
         console.log("remove",index)
         this.list.splice(index,1)
        }
        }
    })
</script>
</body>
</html>

3.統計機能

  • 統計情報の数、vテキスト、長さ
<div>统计功能:{
   
   {list.length}}</div>
  • データベースの開発方法
  • v-textコマンドの役割

4.クリア機能

  • クリックしてすべての情報をクリアしますv-on
  clear:function(){
            this.list=[];
        }

基本的に、配列を空にすることです！

5.隠された機能

  • データがない場合は、要素を非表示にします。v-show、v-if、配列が空ではない
<div V-if="list.length!=0">
     <div>统计功能:{
   
   {list.length}}</div>
     <input type="button" value="清空" @click="clear">
   <div>

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

ネットワークリクエストライブラリaxiosはvueを組み合わせたものです。

1.axios + vue

https://autumnfish.cn/api/jokeランダムなジョークインターフェース

  • axiosコールバック関数のthisが変更され、データ内のデータにアクセスできなくなりました。
  • これを保存し、保存したこれをコールバック関数で直接使用します
  • ローカルアプリケーションとの最大の違いは、データソースが変更されていることです。
<div id="app">
    <input type="button" value="获取笑话" @click="getJoke">
    <p>{
   
   {joke}}</p>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/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)
                    console.log(response.data)
                    that.joke=response.data;
                },function(err){
                    console.log(err)
                })
            }
        }
    })
</script>

2.神は知っている-アプリケーション

  • Enterキーを押しますv-Enterキーを押します
  • クエリデータaxiosインターフェイスvモデル
  • データのレンダリング
<body>
<div id="app">
  <input type="text" v-model="city" @keyup.enter="searchWeather">
  <ul>
      <li v-for="item in weatherList">{
   
   {item.date}}{
   
   {item.type}}</li>
  </ul>
</div>
<script src="./node_modules/axios/dist/axios.js"></script>
<script src="./js/vue.js"></script>  
<script> 
    var app=new Vue({
        el:"#app",
        data:{
            city:'',
            weatherList:[],
        },
        methods:{
                searchWeather:function(){
               var that=this;
                axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
                .then(function(response){
                   console.log(response.data);
                   that.weatherList=response.data.data.forecast;
                   console.log(that.weatherList);
                }).catch(function(err){})
                }
            }
    })
</script>
</body>

おすすめ

転載: blog.csdn.net/JIANGYINGH/article/details/111217244
おすすめ
ランキング
Oracleのクエリ重複フィールド
An error occurred when ssm used count to query data
【Leyes de la Naturaleza】La sabiduría de las multitudes
JavaWebの研究では、（13）を締結 - セッションの使用は、重複送信フォームを防ぎます
Firebase増加サインアップクォータ
[MyBatisフレームワーク]mybatis入門
ハートレスの世界
Djangoのインストールと使用について
[转] UiPath展開アーキテクチャ
mybatis-plusは楽観的なロック変更を使用します
アーカイブ
もっと
2024-05-14(9)
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

コードワールド

© 2018 codetd.com