vue 지시문과 해당 필터를 자세히 설명하는 문서(코드 예제 포함)

이 기사는 프런트엔드 vue에 대한 관련 지식을 제공합니다. 콘텐츠 렌더링 지침과 속성 바인딩 지침이 무엇인지 이야기해 보겠습니다. 관심 있는 친구가 필요한 사람들에게 도움이 되기를 바랍니다. 돕다!

vue 명령 및 필터

콘텐츠 렌더링 명령

콘텐츠 렌더링 명령은 개발자가 DOM 요소의 텍스트 콘텐츠를 렌더링하는 데 도움을 주는 데 사용됩니다. 일반적으로 사용되는 콘텐츠 렌더링 지침에는 세 가지가 있습니다.

v-text

Example

<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: '男'
    }
});

보간 표현식 {{}}이중 중괄호{{}}双大括号

在实际开发中应用较多，不会覆盖原有渲染
示例

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

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

v-html

可以把带标签的的字符串，渲染成真正的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

在属性前加属性指令 v-bind: 为元素动态绑定值，vue 规定 v-bind 可以简写成: ,示例

<input type="text" v-bind:placeholder="tips">
<img :src="photo" style="width: 150px;">

使用 javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 javascript 表达式的运算，例如

{{ 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>

注意：原生 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种修饰符如下：

는 실제 개발에서 자주 사용되며 원본 렌더링을 덮어쓰지 않습니다.
예

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

const vm = new Vue({
            //el 属性是固定写法，表示当前 vm 实例要控制的区域，接收的是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data:{},
            // 定义事件的处理函数
            methods:{
                show () {
		    // e.preventDefault();
                    console.log("点击了 a 链接");
                }
            } 
        });

v-html

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止 a 链接跳转、阻止表单提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定事件只触发一次
.self	只有在 event.target

은 태그된 문자열을 실제 HTML 콘텐츠로 렌더링할 수 있습니다
예

rrreeerrreee

속성 바인딩 지침

참고: 보간 표현식은 요소의 속성 노드가 아닌 요소 콘텐츠 노드에서만 사용할 수 있습니다.

속성 값 v-bind를 동적으로 바인딩

속성 명령 추가 v-bind: 요소의 값을 동적으로 바인딩하는 속성 앞에 Vue는 v-bind를 :로 축약할 수 있다고 규정합니다. 🎜rrreee

자바스크립트 표현식 사용🎜🎜vue에서 제공하는 템플릿 렌더링 구문에서는 간단한 데이터 값 바인딩을 지원하는 것 외에도 🎜rrreee🎜와 같은 javascript 표현식 작업 v-bind 속성 바인딩 약어 중에 바인딩 내용을 동적으로 연결해야 하는 경우 문자열을 작은따옴표로 묶어야 합니다(예: 🎜 rrreee

이벤트 바인딩 명령🎜

v-on 바인딩 이벤트🎜🎜v-on 바인딩 이벤트 명령, 프로그래머를 지원합니다. 수신 이벤트를 DOM 요소에 바인딩합니다. 형식은 다음과 같습니다🎜 rrreeerrreee🎜v-on: @🎜rrreee🎜참고: 기본 DOM 개체에는 onclick, oninput, onkeydown이 포함됩니다. 기본 이벤트를 vue의 이벤트 바인딩으로 바꾼 후 v-on:click, v-on:input, v-on:keydown🎜

Event object🎜🎜vue가 제공하는 고정 변수 $가 내장되어 있습니다. 기본 DOM 이벤트 객체인 event e🎜rrreeerrreee

Event modifier🎜🎜이벤트 처리 함수 .preventDefault() 또는 이벤트를 호출하세요. >event.stopPROpagation()은 매우 일반적인 요구사항입니다. 따라서 vue는 프로그래머가 이벤트 트리거를 보다 편리하게 제어할 수 있도록 이벤트 수정 개념을 제공합니다. 일반적으로 사용되는 다섯 가지 수정자는 다음과 같습니다. 🎜

🎜

이벤트 수정자	설명
.prevent🎜	기본 동작 방지(예: 링크 점프 방지, 양식 제출 방지 등) 🎜🎜
.stop🎜	이벤트 버블링 중지🎜🎜
.capture🎜	현재 트리거 캡처 모드의 이벤트 이벤트 처리 기능 🎜🎜
.once🎜	바운드 이벤트는 한 번만 트리거됩니다🎜🎜
.self code>🎜<td>이벤트 핸들러는 <code>event.target이 현재 요소 자체인 경우에만 트리거됩니다🎜🎜🎜🎜🎜예 1: 🎜rrreeerrreee🎜권장 학습: "🎜vue.js 비디오 튜토리얼🎜 "🎜

위 내용은 vue 지시문과 해당 필터를 자세히 설명하는 문서(코드 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!