Vue-模版语法、指令

模版语法概述

在了解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-模版语法、指令

 

Vue-模版语法、指令

上一篇:新浪微博、腾讯微博、QQ空间、人人网、豆瓣 一键分享API


下一篇:文件下载转码处理类