Vue笔记
来源:互联网 发布:php excel destroy 编辑:程序博客网 时间:2024/06/05 12:00
Vue.js 是什么
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
- {{ message }}
- v-bind:title
- v-if
- v-for
- v-on:click
- v-model——在表单输入和应用状态中做双向数据绑定
var vm = new Vue({ // 选项})//可以扩展 Vue 构造器,从而用预定义选项创建可复用的组件构造器:var MyComponent = Vue.extend({ // 扩展选项})// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建var myComponentInstance = new MyComponent()
模板语法
插值
{{ msg }}
数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值v-once
执行一次性地插值,当数据改变时,插值处的内容不会更新v-html
输出真正的 HTML,被插入的内容都会被当做 HTML —— 数据绑定会被忽略
使用 JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定, Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
{{ var a = 1 }} //这是语句,不是表达式{{ if (ok) { return message } }} //流控制也不会生效,请使用三元表达式
过滤器
{{ message | capitalize }}
过滤器函数总接受表达式的值作为第一个参数。
new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }})
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里,字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
修饰符
修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
缩写
- v-bind 缩写
<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a>
- v-on 缩写
<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>
- Vue笔记
- vue 笔记
- vue笔记
- Vue笔记
- Vue笔记
- Vue笔记
- vue笔记
- vue 笔记
- vue学习笔记:vue-router
- Vue.js学习笔记
- Vue.js 学习笔记
- Vue.js学习笔记
- VUE学习笔记
- Vue.js学习笔记
- vue.js 笔记
- Vue.js 实践笔记
- Vue学习笔记
- vue.js基础笔记
- 转:gsoap:import: Cannot open file "stlvector.h" for reading
- 11-06
- 洛谷 P2168 荷马史诗(抄)
- RabbitMQ集群
- C++ Map常见用法说明
- Vue笔记
- linux命令学习-文件目录之tail命令
- 一次请求中数据的传递流程
- 以下权限只需要在AndroidManifest.xml中声明即可使用
- 关于pulltorefreshListView快速滑动留白问题等部分小问题
- 共享内存查看清除命令ipcs和ipcrm
- tomcat解析(二)
- 观察者模式
- cocos2d-x 模型用上shader的方法。仅备份