• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

[Vue.js 模板语法】 vue.js看着官方文档的从0开始瞎摸学习

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0708/6161.html 1190000019688747
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

插值

1 文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。

通过使用 v-once 指令,你也能执行一次性地插值当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {{ msg }}</span>

2 原始HTML
为了输出真正的 HTML,你需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

clipboard.png

clipboard.png


clipboard.png

3 特性
v-bind指令可以作用在HTML特性上

<div v-bind:id="dynamicId"></div>

(id为特性)

<button v-bind:disabled="isButtonDisabled">Button</button>

对于布尔特性(只要存在即为true)

4 使用JavaScript表达式
对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

clipboard.png

clipboard.png

clipboard.png
(这个demo反应了几个知识点:JavaScript表达式、声明响应式属性、v-bind、el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。)


指令

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

1 参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。

<a v-on:click="doSomething">...</a>

(v-on 指令,参数是监听的事件名)
2 动态参数
可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

<a v-bind:[attributeName]="url"> ... </a>

3 修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。

缩写

v- 前缀作为一种视觉提示,用来识别模板中 Vue 特定的特性。
v-bind 缩写

<a v-bind:href="url">...</a>
<a  :href="url"></a>

v-on 缩写

<a v-on click="do something">...</a>
<a @click="do something">...</a>

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!