Vue-模版语法、指令

2021-08-06 12:35:08 阅读：133 来源： 互联网

模版语法概述

在了解vue的模版语法之前，我们先回顾下，原生js将数据填充至页面的做法。

原生js拼接字符串

基本上就是将数据以字符串的方式拼接到HTML标签中。（缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得困难）

Vue的模版语法概览：

-插值表达式
-指令
-事件绑定
-属性绑定
-样式绑定
-分支循环结构

差值表达式前面已经介绍过。这里不再赘述。

指令

官方说法：指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

什么是自定义属性？

指令的本质就是自定义属性。

指令的格式以v-开始（比如v-c-cloaloak）

v-cloak

差值表达式渲染到页面时存在抖动问题，使用v-cloak可以解决该问题解决该问题的原理：先隐藏，替换好值之后在显示最终的值

用法分两步：

第一步

// css 提供样式
[v-cloak] {
  display: none;
}

第二步

// html
<div v-cloak>
  {{ message }}
</div>

数据绑定指令：

v-text:

填充纯文本，相比插值表达式更加简洁

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

另一个例子：

<div id="app" v-text="'第一次学习：'+msg"></div>

// 相当于
<div id="app">第一次学习：{{ msg }}</div>

v-html:

填充HTML片段，存在安全问题：本网站内部数据可以使用，来自第三方的数据不可使用

<div v-html="html"></div>

<script>
   // 新建VM实例
   var vm = new Vue({
   　　el: "#app",
   　　data: {
       　　html: "<h1>hello word</h1>",
   　　},
  　　 methods: {}
   });
</script>

标签：Vue,模版,绑定,cloak,语法,指令,html,表达式
来源： https://www.cnblogs.com/kkw-15919880007/p/15107984.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue-模版语法、指令

模版语法概述

指令