专栏首页前端之攻略Vue模板语法 原

Vue模板语法 原

文本  数据绑定最常见的形式是使用Mustache 语法(双大括号)的文本插值 <span>Message: {{ msg }}</span> 通过使用v-once指令,执行一次性插值,当数据改变时,插值处的内容不会更新,但请注意这会影响到该节点所有的数据绑定 <span v-once>这个将不会改变: {{ msg }}</span>

纯html 双大括号会将数据解释为纯文本,而非HTML,为了输出真正的html,需要使用v-html指令 <div v-html="rawHtml"></div> 这个div的内容将会被替换成为属性值rawHtml  var app=new Vue({         el:"#app-7",         data:{rawHtml:"<h2>hello world</h2>"} })

特性(属性) Mustache 语法不能作用在HTML特性(属性)上,这种情况应该使用v-bind指令 <div v-bind:id="dynamicId"></div> 同样适用于布尔类特性 <button v-bind:disabled="isButtonDisabled">Button</button>

使用JavaScript表达式 Vue.js都提供了完全的Javascript表达式支持 {{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>

 指令 指令是带有v-前缀的特殊属性 <p v-if="seen">现在你看到我了</p> v-if指令将根据表达式seen的值的真假来插入/移除<p>元素

参数 一些指令能够接收一个参数,在指令名称之后以冒号表示,例如,v-bind指令可以用于响应式的更新html属性 <a v-bind:href="url"></a> 在这里href是参数,告知v-bind指令将该元素的href属性与表达式url的值绑定在一起 另一个例子是v-on指令,它用于监听DOM事件 <a v-on:click="doSomething"></a>

修饰符 修饰符Modifiers是以点 . 指名的特殊后缀,用于指出一个指令应该以特殊方式绑定, 例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault() <form v-on:submit.prevent="onSubmit"></form>

过滤器 Vue.js允许自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在2个地方,mustache 差值和v-bind 表达式 <!-- in mustaches --> {{ message | capitalize }} <!-- in v-bind --> <div v-bind:id="rawId | formatId"></div> 过滤器函数总接收表达式的值作为第一个参数,在这个例子中capitalize过滤器函数将会接收message的值作为第一个参数  {{message1 | capitalize }}   var app7 = new Vue({         el: '#app-7',          data: {             message1: "lovestudyvue"         },         filters:{           capitalize:function(value){             if(!value) return ''              //value = value.toString()              return value.charAt(0).toUpperCase() + value.slice(1)         }            }     })     //过滤器添加在javascript表达式的尾部,前面的是原始的数据,主要用于文本转换

缩写 v-bind缩写 完整写法<a v-bind:href="url"></a>  缩写<a :href="url"></a> v-on缩写 <a v-on:click="doSomething"></a>   缩写<a @click="doSomething"></a>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue案例引发的「嵌套组件」通信的简单方式

    我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

    六小登登
  • 记一次vue长列表的内存性能分析和优化

    这个长列表页面,其实是一个实时日志上报的页面,随着页面打开时间的增加,日志数量也会增多,常规的页面布局和渲染免不了会遇到性能问题。

    书童小二
  • navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found

    在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:

    honey缘木鱼
  • mpvue页面跳转及传值

    vue中 使用 vue-router 来进行路由跳转的。mpvue中只能通过以下几种方式跳转: (1).a 标签

    honey缘木鱼
  • WordPress 和 Vue.js 的学习资源推荐

    Vue 是一个非常有吸引力的构建前端的框架,它已迅速成为 React 和 Angular 等其他流行框架的替代品。它很敏捷速度很快,编写的代码容易阅读和理解,很...

    丘壑
  • 个推前端微服务化:突破传统SPA瓶颈

    目前的前端领域,单页面应用(SPA)大行其道。而随着时间的推移以及应用功能的丰富,这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。

    个推君
  • vue与react哪种好?

    vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就...

    杭州前端工程师
  • 在WordPress中添加简书风格的连载目录和文章导航

    自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。

    丘壑
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • 基于CMS的组件复用实践

    目前前端项目大多基于Vue、React、Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维。所以,开发者在使用上述框架时,实际上...

    个推君

扫码关注云+社区

领取腾讯云代金券