JS框架-Vue.js
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
绑定元素特性:
v-bind
特性被称为指令。指令带有前缀 v-
,以表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title
特性和 Vue 实例的 message
属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = '新消息'
,就会再一次看到这个绑定了 title
特性的 HTML 已经进行了更新。
条件与循环
控制切换一个元素是否显示:
v-for指令可以绑定数组的数据来渲染一个项目列表
处理用户输入
为了让用户和你的应用进行交互,我们可以用 v-on
指令添加一个事件监听器
<button v-on:click="reverseMessage">逆转消息</button>
Vue 还提供了v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
指令
指令 (Directives) 是带有 v-
前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
<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>
|
缩写
v-bind
缩写
<!-- 完整语法 -->
|
v-on
缩写
<!-- 完整语法 -->
|