ホームページ > 記事 > ウェブフロントエンド > vue ディレクティブとそのフィルターを詳しく説明した記事 (コード例付き)
vue ディレクティブとそのフィルターを詳しく説明した記事 (コード例付き)
- 藏色散人転載
- 2023-01-22 07:30:012002ブラウズ
この記事は、フロントエンド 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"><input type="text" v-bind:placeholder="tips">
<img :src="photo" style="width: 150px;"></pre>JavaScript 式の使用
vue が提供するテンプレート レンダリング構文では、単純なデータ値の
バインドをサポートするだけでなく、次のような JavaScript 式の操作もサポートしています。 as{{ number + 1 }};
{{ ok ? 'YES' : 'NO'}};
{{ message.split('').reverse().join('')}};
<div v-bind:id="'list-' + id"></div>
略語 v-bind 属性バインディング中に、バインディング コンテンツを動的に結合する必要がある場合は、 <div :title="'box' + 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>
イベント オブジェクト
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 つの修飾子は次のとおりです。
デフォルトの動作を防止します (例: リンクジャンプの防止、フォーム送信の防止など) |
.stop |
イベントバブリングの停止 |
#.capture |
| ##.once|
| #.self|
が現在の要素自体である場合にのみトリガーされます | #例 1: <pre class="brush:php;toolbar:false"><a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a></pre>
<pre class="brush:php;toolbar:false">const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data:{},
// 定义事件的处理函数
methods:{
show () {
// e.preventDefault();
console.log("点击了 a 链接");
}
}
});</pre> 推奨学習: 「 | vue.js ビデオ チュートリアル
以上がvue ディレクティブとそのフィルターを詳しく説明した記事 (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。