Vue 命令の入門: よく使用される 6 つの組み込み命令について話しましょう

この記事では、Vue 命令について説明し、Vue でよく使用される 6 つの組み込み命令を紹介します。皆さんのお役に立てれば幸いです。

命令の分類

ディレクティブは、vue が開発者向けに提供する テンプレート構文です。開発者によるページのレンダリングを支援します。 (学習ビデオ共有: vuejs ビデオ チュートリアル )

使用されるデータはインスタンスの data で定義され、イベントは methods で定義されます。インスタンス Mediumの

• コンテンツ レンダリング手順: 開発者による DOM 要素のテキスト コンテンツのレンダリングを支援します
• 属性バインディング手順: 開発者が要素の属性を属性値に動的にバインドできるように支援します。
• イベント バインディング手順: 開発者がイベントを要素にバインドできるように支援します
• 双方向バインド手順: 開発者が DOM を操作せずにフォーム データを迅速に取得できるようにします (データ ソースの変更はページに同期され、ページの変更もデータ ソースに同期されます)
• 条件付きレンダリング手順 : 開発者がオンデマンドで DOM の表示と非表示を制御できるように支援します。
• リスト レンダリング手順 : 開発者が配列に基づいてリスト構造をループ レンダリングできるように支援します

1. コンテンツのレンダリング手順

v-text

プレーン テキスト コンテンツのみをレンダリングできます, タグ内の元のコンテンツを上書きします

<p v-text="gender">性别</p>

{{ }} 補間式

はレンダリングのみ可能ですプレーン テキスト コンテンツ、上書きされません タグ内の元のコンテンツ

<p>性别：{{ gender }}</p>

v-html

は、タグ付き文字列を HTML コンテンツに追加すると、 は タグ

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

2 内の元のコンテンツを上書きします。属性バインディングの手順

v-bind : または:

は要素の属性です 動的 バインディング属性値

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->

注: 補間式 および v-bind JavaScript 式の操作もサポート

#

{{ 1 + 2 }}  //一元运算
{{ ok ? 'YES' : 'NO'}}  //三元运算
{{ message.split('').reverse().join('') }}  //字符串的反转

<div :id="&#39;list-&#39; + id"></div>  <!--字符串和变量的拼接-->

3. イベント バインディング命令

#v-on : または @

要素のイベントをバインド

<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相当于vm.count ++;
            }
        }
    })
</script>

パラメータを渡す

パラメータが渡されない場合:デフォルトの仮パラメータ
• event はオブジェクトであり、内部のターゲット属性は現在バインドされているイベントの DOM 要素を指します
パラメータ:event を渡すと、それは上書きされます使用できるようにするには、渡したパラメータがイベントを保持できる場合は、別の実パラメータ
• $event を手動で渡すことができ、仮パラメータはオプションです

<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{                    
            add(n,event){
                //修改
                this.count +=n;

                //判断
                if(this.count % 2 === 0)
                    event.target.style.color = &#39;red&#39;;
                else
                    event.target.style.color = &#39;&#39;;
            }                    
        }
    })
</script>

イベント修飾子

イベントである限り、修飾子を使用できます。一般的に使用される 5 つの

##イベント修飾子##を次に示します。 #説明.preventデフォルトの動作を防止します (例: リンクのジャンプの防止、 form).stopイベントのバブリングを防止する.capture現在のイベント ハンドラーをトリガーするキャプチャ モードの場合.onceバインドされたイベントは 1 回だけトリガーされます .self events.target が現在の要素自体の場合のみ トリガーイベント処理関数

<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

キー修飾子

のみ使用できる修飾子キーボード イベントをトリガーする場合、一般的に使用される 2 つのキー修飾子を以下に示します。

# キー修飾子 # 説明 .escキーボードの esc キーを押した場合 ##.enterキーボードの Enter キーを押した場合

<!--举个例子-->
<!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">

4. 双方向バインディング命令

##v-model

フォーム データをすばやく取得します (input、textarea、select などのフォーム要素にのみ適用されます)

<input type="text" v-model="username">

<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

排他的修飾子

v にのみ使用できる修飾子-model

排他的修飾子

Description

.numberユーザーが入力した値を数値型に自動的に変換します .trim ユーザーが入力した先頭と末尾の空白文字を自動的にフィルターします .lazy データはフォーカスが失われると自動的に更新されます (通常はリア​​ルタイムで更新されます) #

<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

五、条件渲染指令

v-show

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态添加/移除display：none样式 ，一般用于需频繁切换

<p v-show="flag">这是被 v-show 控制的元素</p>

v-if

控制DOM的显示与隐藏（值为true显示，值为false隐藏），其原理为 动态创建/移除元素 ，一般用于默认不展示且展示较少

<p v-if="flag">这是被 v-if 控制的元素</p>

v-else-if

配合 v-if 指令一起使用，否则将不会被识别

<div v-if="type === &#39;A&#39;">优秀</div>
<div v-else-if="type === &#39;B&#39;">良好</div>
<div v-else-if="type === &#39;C&#39;">一般</div>
<div v-else>差</div>

六、列表渲染指令

v-for

基于一个数组来循环渲染一个列表结构，它有特定的语法结构 v-for="item in items"

• item是 被循环的每一项 ，名字随意
• items是 待循环的数组 ，名字随意

<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:&#39;张三&#39;, gender:&#39;男&#39; },
                { id: 2, name:&#39;李四&#39;, gender:&#39;女&#39; },
                { id: 3, name:&#39;王五&#39;, gender:&#39;男&#39; }
            ]
        }
    })
</script>

注意：在.vue文件中，只要用到 v-for指令 ，一定要绑定一个 :key 属性

• key 的属性值尽量为 id，为 index 则无意义（因为index不和内容有一个强制的绑定关系）
• key 的属性值只能是 字符串/数字 类型，否则报错
• key 的属性值必须具有唯一性（不重复 且 内容和值有一个强制的绑定关系）

<tr v-for="(item,index) in list" :key="item.id">

（学习视频分享：web前端开发、编程基础视频）

以上がVue 命令の入門: よく使用される 6 つの組み込み命令について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。