Dieser Artikel bringt Ihnen relevantes Wissen über Front-End-Vue. Lassen Sie uns darüber sprechen, was Anweisungen zum Rendern von Inhalten und Anweisungen zum Binden von Attributen sind. Ich hoffe, dass es für diejenigen hilfreich ist, die es benötigen. helfen!
Der Befehl zum Rendern von Inhalten wird verwendet, um Entwickler beim Rendern des Textinhalts von DOM-Elementen zu unterstützen. Es gibt drei häufig verwendete Anweisungen zum Rendern von Inhalten.
Beispiel
<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: '男'
}
});{{}}Doppelte geschweifte Klammern{{}}双大括号在实际开发中应用较多，不会覆盖原有渲染
示例
<div id="app">
<p>姓名：{{username}}</p>
</div>const vm = new Vue({
//el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zs',
gender: '男',
}
});可以把带标签的的字符串，渲染成真正的html 内容
示例
<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: 为元素动态绑定值，vue 规定 v-bind 可以简写成: ,示例
<input type="text" v-bind:placeholder="tips"> <img :src="photo" style="width: 150px;">
在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 javascript 表达式的运算，例如
{{ 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 绑定事件指令，辅助程序员为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>
注意：原生 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.preventDefault() 或 event.stopPROpagation() 是非常常见的需求。因此， vue 提供了事件修饰的概念，辅助程序员更方便的**对事件的触发进行控制。常用5种修饰符如下：
| 事件修饰符 | 说明 |
|---|---|
.prevent |
阻止默认行为（例如：阻止 a 链接跳转、阻止表单提交等） |
.stop |
阻止事件冒泡 |
.capture |
以捕获模式触发当前的事件处理函数 |
.once |
绑定事件只触发一次 |
.self |
只有在 event.target
| werden häufig in der tatsächlichen Entwicklung verwendet und überschreiben nicht die ursprüngliche Darstellung
rrreeerrreee
Hinweis: Interpolation Ausdrücke können nur in Elementinhaltsknoten verwendet werden, nicht in Attributknoten von ElementenDen Attributwert v-bind dynamisch binden
v-bind: vor dem Attribut zum dynamischen Binden des Werts des Elements legt Vue fest, dass v-bind beispielsweise als : abgekürzt werden kann 🎜rrreeev-on: Es kann auch als @🎜rrreee🎜 abgekürzt werdenHinweis: Native DOM-Objekte umfassen onclick, oninput, onkeydown Nach dem Ersetzen der nativen Ereignisse durch die Ereignisbindung von vue In der Form sind dies: v-on:click, v-on:input, v-on:keydown🎜$ event, das ist das native DOM-Ereignisobjekt e🎜rrreeerrreeeevent in der Ereignisverarbeitungsfunktion .preventDefault() oder event.stopPROpagation() sind sehr häufige Anforderungen. Daher bietet Vue das Konzept der Ereignismodifikation, um Programmierern dabei zu helfen, das Auslösen von Ereignissen bequemer zu steuern. Die fünf häufig verwendeten Modifikatoren lauten wie folgt: 🎜| Event modifier | Description | 🎜
.prevent🎜 |
Standardverhalten verhindern (z. B. verhindern, dass ein Link springt, Formularübermittlung verhindern usw.) 🎜🎜 |
|---|---|
.stop🎜 |
Stoppt das Sprudeln von Ereignissen🎜🎜 |
.capture🎜 |
Lösst den Strom aus Ereignis im Erfassungsmodus Der Ereignishandler 🎜🎜 |
.once🎜 |
Das gebundene Ereignis wird nur einmal ausgelöst 🎜🎜 |
.self code>🎜<td>Der Ereignishandler wird nur ausgelöst, wenn <code>event.target das aktuelle Element selbst ist🎜🎜🎜🎜🎜Beispiel 1: 🎜rrreeerrreee🎜Empfohlenes Lernen: „🎜vue.js Video-Tutorial🎜 „🎜 |
Das obige ist der detaillierte Inhalt vonEin Artikel, der die Vue-Direktive und ihre Filter im Detail erklärt (mit Codebeispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
