vue ディレクティブとそのフィルターを詳しく説明した記事 (コード例付き)

この記事は、フロントエンド Vue に関する関連知識を提供します。コンテンツのレンダリング命令と属性バインディング命令が何であるかについて話しましょう。興味のある友人は、一緒に見てみましょう。それが必要な友人に役立つことを願っています. 役に立ちます！

vue ディレクティブとフィルター

コンテンツ レンダリング ディレクティブ

コンテンツ レンダリング ディレクティブは、開発者が DOM のテキスト コンテンツをレンダリングするのを支援するために使用されます。要素。一般的に使用されるコンテンツのレンダリング命令は 3 つあります。

v-text

例

<div id="app">
    <!-- 把 username 对应的值，渲染到第一个 p 标签中 -->
    <p v-text="username"></p>
    <!-- 把 gender 对应的值，渲染到第二个 p 标签中 -->
    <!-- 注意：第二个 p 标签中，默认文本会被gender值覆盖 -->
    <p v-text="gender">性别</p>
</div>
<!-- 导入 vue 的库文件 -->
    <script src="./lib/vue.js v2.7.13.js"></script>

//创建vue 的实例对象
const vm = new Vue({
    //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
    el: '#app',
    // data 对象就是要渲染到页面上的数据
    data: {
        username: 'zs',
        gender: '男'
    }
});

補間式 {{}}二重中括弧

実際の開発でのアプリケーション元のレンダリングは上書きされません
Example

<div id="app">
    <p>姓名：{{username}}</p>
</div>

const vm = new Vue({
    //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
    el: '#app',
    // data 对象就是要渲染到页面上的数据
    data: {
        username: 'zs',
        gender: '男',
    }
});

v-html

タグ付き文字列を実際の HTML コンテンツにレンダリングできます
Example

<div id="app">
    <div v-html="info"></div>
</div>

const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                info: '<h4 style="color: red; font-weight: bold;"> 欢迎学习 vuejs</h4>'
            }
        });

属性バインド手順

#注: 補間式は要素コンテンツ ノードでのみ使用でき、要素属性ノードでは使用できません。

動的バインディング属性値 v-bind

## を定義します。 #attribute の前に属性命令を追加します。

v-bind:

値を要素に動的にバインドします。vue では、v-bind を : と省略できると規定しています。例<pre class="brush:php;toolbar:false">&lt;input type=&quot;text&quot; v-bind:placeholder=&quot;tips&quot;&gt; &lt;img :src=&quot;photo&quot; style=&quot;width: 150px;&quot;&gt;</pre>JavaScript 式の使用

vue が提供するテンプレート レンダリング構文では、単純なデータ値の

バインドをサポートするだけでなく、次のような JavaScript 式の操作もサポートしています。 as

{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};

<div v-bind:id="&#39;list-&#39; + id"></div>

略語 v-bind 属性バインディング中に、バインディング コンテンツを動的に結合する必要がある場合は、

<div :title="&#39;box&#39; + index">!!!!!</div>

イベント バインディング命令のように、文字列を一重引用符で囲む必要があることに注意してください。

v-on バインディング イベント

v-on バインディング イベント命令は、プログラマが DOM 要素のリスニング イベントをバインドするのを支援します。形式は次のとおりです。

<p>count的值是: {{count}}</p>
        <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
        <button v-on:click="addCount">+1</button>

 const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                count: 0,
            },
            // 定义事件的处理函数
            methods:{
                add: function () {
                    // console.log(vm);
                    // vm.count += 1; 
		    // this === vm 
                    this.count += 1;
                }
		// 也可简写成
                add () {
                    // console.log(vm);
                    this.count += 1;
                }
            }
        });

v- on:

は、@

<button @click="sub">-1</button>

と省略することもできます。Note: ネイティブ DOM オブジェクトには、onclick、oninput、onkeydown などのネイティブ イベントがあり、それらを vue に置き換えます。イベント バインディング フォーム、それらは次のとおりです: v-on:click、v-on:input、v-on:keydown

イベント オブジェクト

vue は組み込みの固定変数を提供します

$event

(ネイティブ DOM のイベント オブジェクトです) e

<!-- 如果 count 为偶数，则按钮背景变为蓝色，否则，取消背景 -->
<!-- vue 提供了内置固定的变量 $event ，它就是原生 DOM 的事件对象 e-->
        <button @click="add(1, $event)">+n</button>

const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{
                count: 0,
            },
            // 定义事件的处理函数
            methods:{
                add (n, e) {
                    this.count += 1;
                    // 判断 this.count 的值是否为偶数
                    if (this.count%2 === 0) {
                        //偶数
                        e.target.style.backgroundColor = 'blue';
                        console.log(e);
                    } else {
                        // 奇数
                        e.target.style.backgroundColor = '';
                    }
                }
              
            }
          
        });

イベント修飾子イベント処理関数 #event で

event.preventDefault()

または ## を呼び出します.stopPROpagation()

は非常に一般的な要件です。したがって、vue は、プログラマがイベントのトリガーをより簡単に制御できるように、イベント変更の概念を提供します。一般的に使用される 5 つの修飾子は次のとおりです。

イベント修飾子説明.prevent.stop キャプチャ モードにすると、現在のイベント処理関数がトリガーされます##.onceバインドされたイベントは 1 回だけトリガーされます#.selfイベント ハンドラー関数は、event.targetvue.js ビデオ チュートリアル 」

デフォルトの動作を防止します (例: リンクジャンプの防止、フォーム送信の防止など)
イベントバブリングの停止	#.capture
が現在の要素自体である場合にのみトリガーされます	#例 1: <pre class="brush:php;toolbar:false">&lt;a href=&quot;http://www.baidu.com&quot; @click.prevent=&quot;show&quot;&gt;跳转到百度首页&lt;/a&gt;</pre> <pre class="brush:php;toolbar:false">const vm = new Vue({             //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器             el: '#app',             // data 对象就是要渲染到页面上的数据             data:{},             // 定义事件的处理函数             methods:{                 show () {     // e.preventDefault();                     console.log(&quot;点击了 a 链接&quot;);                 }             }          });</pre> 推奨学習: 「

以上がvue ディレクティブとそのフィルターを詳しく説明した記事 (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。