이 글에서는 Vue의 템플릿 구문을 살펴보고 보간 구문과 명령 구문을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
Vue에는 특히 사용하기 쉬운 템플릿 구문이 많이 있습니다. Vue에서 정의한 일부 템플릿 구문을 HTML로 작성하여 데이터, 바인딩 방법 등을 빠르게 표시할 수 있습니다. 이것이 Vue를 시작하는 데 매우 빠른 이유 중 하나입니다.
먼저 템플릿이 무엇인지 알아볼까요?
템플릿은 동적 HTML 페이지이며, 여기에는 일부 js 구문 코드
Vue의 템플릿 구문이 두 가지 유형으로 나뉩니다. 즉:
1. 보간 구문:
{{xxx}}
, xxx는 js 표현식이고, 데이터의 모든 속성을 직접 읽을 수 있고, 객체의 메소드를 호출할 수 있습니다{{xxx}}
,xxx是js表达式,且可以直接读取到data中的所有属性,可以调用对象的方法2、指令语法:
v-bind:href="xxx"
或 简写为 :href="xxx"
,xxx同样要写js表达式,且可以直接读取到data中的所有属性v-????
【相关推荐:《vue.js教程》】
下面我们来介绍几个常用的指令语法。
v-bind:
功能:指定变化的属性值
完整写法
v-bind:xxx='yyy' // yyy会作为表达式解析执行
简洁写法
:xxx='yyy'
语法:v-bind:href ="xxx"
或简写为 :href ="xxx"
特点:数据只能从 data 流向页面
v-model
语法:v-mode:value="xxx"
或简写为 v-model="xxx"
特点:数据不仅能从 data 流向页面,还能从页面流向 data
v-on:
功能:绑定指定事件名的回调函数
完整写法
v-on:click='xxx' v-on:keyup='xxx(参数)' v-on:keyup.enter='xxx'
简洁写法
@click='xxx' @keyup='xxx' @keyup.enter='xxx'
v-text
作用:向其所在的节点中渲染文本内容。
与插值语法的区别:v-text
会替换掉节点中的内容,{{xx}}
则不会。
v-html
1、作用:向指定节点中渲染包含html结构的内容。
2、与插值语法的区别:
v-html
会替换掉节点中所有的内容,{{xx}}
则不会。v-html
可以识别html结构。3、严重注意:v-html
有安全性问题!!!!
v-html
,永不要用在用户提交的内容上!<body> <div id='app'> <h2>1. 大括号表达式</h2> <p>{{msg}}</p> <!--textContent --> <p>{{msg.toUpperCase()}}</p> <p v-html="msg"></p> <!--innerHTML --> <p v-text="msg"></p> <!--textContent --> <p v-text="msg.toUpperCase()"></p> <h2>2. 指令一: 强制数据绑定</h2> <img src="imgUrl" alt="Vue"> <!--无法显示图片,没有识别成js表达式 --> <img v-bind:src="imgUrl" alt="Vue"> <!--属性值识别成js表达式 --> <img :src="imgUrl" alt="Vue"> <h2>3. 指令二: 绑定事件监听</h2> <button v-on:click="test1">test1</button> <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <!--可以传参数 --> <button @click="test2(msg)">test2</button> </div> <script src="../js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '<a href="http:www.baidu.com">I Will Back!</a>', imgUrl: "https://cn.vuejs.org/images/logo.png" }, methods: { test1() { alert('heheh'); }, test2(content){ alert(content); } } }) </script> </body>
移除标签删除
写法:
v-if="表达式"
v-else-if="表达式"
v-else="表达式"
:
js 문이 아닌 반환 값이 있는 js 코드2. 명령 구문:
예: v-bind:href="xxx"
또는 약어로 :href="xxx"
, xxx도 js 표현식을 작성해야 하며 다음과 같을 수 있습니다. 데이터의 모든 속성을 직접 읽으세요v-show="表达式"
v-????
🎜[관련 권장 사항: "vue.js 튜토리얼》】🎜🎜아래에서 몇 가지 일반적인 명령 구문을 소개하겠습니다. 🎜v-bind:
🎜🎜🎜기능: 변경된 속성 값 지정🎜🎜🎜전체 작성 방법🎜<body> <div id="demo"> <p v-if="ok">成功了</p> <!-- 移除标签删除 --> <p v-else>失败了</p> <p v-show="ok">又成功了</p> <!-- 添加样式隐藏 --> <p v-show="!ok">又失败了</p> <button @click="ok = !ok">切换</button> </div> <script src="../js/vue.js"></script> <script> new Vue({ el: '#demo', data: { ok: false, } }) </script> </body>🎜간결한 쓰기🎜rrreee
v- 바인딩:href ="xxx"
또는 약어로 :href ="xxx"
🎜🎜🎜🎜특징: 데이터는 데이터에서 페이지🎜🎜🎜로만 흐를 수 있습니다.v-model
v- 모드: value="xxx"
또는 약어로 v-model="xxx"
🎜🎜🎜🎜특징: 데이터는 데이터에서 페이지로 흐를 수 있을 뿐만 아니라 페이지에서 데이터로 흐를 수도 있습니다. 🎜🎜🎜3. 명령 구문: 이벤트 리스너 바인딩 v-on:
🎜🎜🎜기능: 지정된 이벤트 이름의 콜백 함수 바인딩🎜🎜 🎜완전한 글쓰기 방법🎜 rrreee🎜간결한 글쓰기🎜rrreeev-text
🎜v-text
는 노드의 콘텐츠를 대체하지만 {{xx}}
는 그렇지 않습니다. 🎜🎜🎜🎜v-html
🎜🎜1. 기능: html 구조가 포함된 콘텐츠를 지정된 노드에 렌더링합니다. 🎜🎜2. 보간 구문과의 차이점: 🎜🎜🎜(1).v-html
은 노드의 모든 콘텐츠를 대체하지만 {{xx}}
는 안 만나요. 🎜🎜(2).v-html
은 html 구조를 식별할 수 있습니다. 🎜🎜🎜3. 심각한 주의: v-html
에는 보안 문제가 있습니다! ! ! ! 🎜🎜🎜(1) 웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 매우 위험하며 쉽게 XSS 공격으로 이어질 수 있습니다. 🎜🎜(2). 신뢰할 수 있는 콘텐츠에는 항상 v-html
을 사용하고, 사용자가 제출한 콘텐츠에는 절대 사용하지 마세요! 🎜🎜rrreee🎜🎜 v - if="expression"
🎜🎜v-else-if="expression"
🎜🎜v-else="expression"
🎜🎜🎜 적합 대상: 시나리오 낮은 스위칭 주파수로.
특징: 표시되지 않는 DOM 요소는 직접 제거됩니다.
참고: v-if는 v-else-if 및 v-else와 함께 사용할 수 있지만 구조가 "중단"되어서는 안 됩니다. 🎜🎜🎜스타일 숨기기 추가(표시: 없음)🎜🎜🎜🎜v-show🎜🎜🎜작성: 🎜적용 대상: 전환 빈도가 높은 장면.
특징: 표시되지 않는 DOM 요소는 제거되지 않고 스타일을 사용하여 숨겨질 뿐입니다🎜🎜[비고] v-if를 사용할 때 요소를 얻지 못할 수도 있지만 v-show를 사용하면 확실히 얻을 수 있습니다. 🎜v-if
是控制元素是否加载到页面上(有性能开销) v-show
是控制元素的显示与隐藏 (初始创建时加载一次)
<body> <div id="demo"> <p v-if="ok">成功了</p> <!-- 移除标签删除 --> <p v-else>失败了</p> <p v-show="ok">又成功了</p> <!-- 添加样式隐藏 --> <p v-show="!ok">又失败了</p> <button @click="ok = !ok">切换</button> </div> <script src="../js/vue.js"></script> <script> new Vue({ el: '#demo', data: { ok: false, } }) </script> </body>
一些常用的指令
v-text
: 更新元素的 textContentv-html
: 更新元素的 innerHTMLv-if
: 如果为true, 当前标签才会输出到页面v-else
: 如果为false, 当前标签才会输出到页面v-show
: 通过控制display样式来控制显示/隐藏v-for
: 遍历数组/对象v-on
: 绑定事件监听, 一般简写为@v-bind
: 强制绑定解析表达式, 可以省略v-bindv-model
: 双向数据绑定ref
: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象v-cloak
: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }更多编程相关知识,请访问:编程入门!!
위 내용은 Vue의 템플릿 구문에 대한 심층 분석: 보간 및 지시문의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!