每个 vue 实例在被创建之前都要经过一系列的初始化过程. 例如, 实例需要配置数据观测(data observer), 编译模版, 挂载实例到 DOM , 然后在数据变化时更新 DOM . 在这个过程中, 实例也会调用一些 生命周期钩子 , 这就给我们提供了执行自定义逻辑的机会. 例如, https://vuefe.cn/v2/api/#created 这个钩子在实例被创建之后被调用:
- var app2 = new Vue({
- el:"#app2",
- data:{
- a:1
- },
- created:function(){
- console.log('a is:'+this.a);
- console.log(this)
- }
- })
其中的 this 就是指创建的 app2 实例
实例生命周期的不同阶段调用, 如 https://vuefe.cn/v2/api/#mounted , https://vuefe.cn/v2/api/#updated , and https://vuefe.cn/v2/api/#destroyed . 钩子的 this 指向调用它的 Vue 实例
v-once, 一次性的进行插值, 但是当数据改变时, 插值处就不会再进行更新了, 在 v-once 后不需要写其他的
v-html , 通过大括号绑定的数据会默认为纯文本, 不是 HTML, 如果想要输出 HTML, 就需要使用这个指令, 那些被绑定的数据都会默认为 HTML, 数据绑定反而会被忽视
在数据绑定中, vue.js 提供了完全的 JS 支持:
- {
- {
- number + 1
- }
- }
- {
- {
- ok ? 'YES' : 'NO'
- }
- }
- {
- { message.split('').reverse().join('') }}
- <div v-bind:id="'list-' + id"></div > 注: 仅限表达式, 而且是单个表达式
在一些指令中, 可以接受一些参数, 但是需要在指令后面进行: 注明 eg:
<a v-bind:href="url"></a>
过滤器:
<div v-bind:id="rawId | formatId"></div>
在 vue2.0 中, 过滤器就已经只能在 mustache 绑定和 v-bind 表达式 (从 2.1.0 开始支持) 中使用, 因为过滤器设计目的就是用于文本转换
过滤函数总是接收表达式的值作为第一个参数
而且多个过滤器可串联,
过滤器是个函数, 所以可以接受参数{{ message | filterA('arg1', arg2) }}
使用过滤器的时候传进的参数分别作为第二, 第三个参数传入, 因为表达式的值已经作为第一个参数传入了
class 和 style 绑定的不同就是, 在 style 绑定的是一个 JS 对象, 对 data 中的数据进行绑定
条件渲染
2.1.0 新增
v-else-if, 顾名思义, 用作 v-if 的 else-if 块. 可以链式的多次使用
<div v-if="type === ‘A‘"> A </div> <div v-else-if="type === ‘B‘"> B </div> <div v-else-if="type === ‘C‘"> C </div> <div v-else> Not A/B/C </div> |
如果需要频繁切换使用 v-show 较好, 如果在运行时条件不大可能改变则使用 v-if 较好.
事件的修饰符
- <!-- 阻止单击事件冒泡 -->
- <a v-on:click.stop="doThis">
- </a>
- <!-- 提交事件不再重载页面 -->
- <form v-on:submit.prevent="onSubmit">
- </form>
- <!-- 修饰符可以串联 -->
- <a v-on:click.stop.prevent="doThat">
- </a>
- <!-- 只有修饰符 -->
- <form v-on:submit.prevent>
- </form>
- <!-- 添加事件侦听器时使用事件捕获模式 -->
- <div v-on:click.capture="doThis">
- ...
- </div>
- <!-- 只当事件在该元素本身 (而不是子元素) 触发时触发回调 -->
- <div v-on:click.self="doThat">
- ...
- </div>
- vue
来源: http://www.bubuko.com/infodetail-3074157.html