이 기사는 프런트엔드 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 비디오 튜토리얼🎜 "🎜