更新于

入门基础

发布于 / 分类: vue前端开发快速入门与专业应用 / 暂无评论 / 阅读量: 443

v-if/v-else
看书上说v-show也可以和v-else配合使用,实际上并不行。

:style 也支持三元判断,和:class一样,三元需要加个括号,然后里面如果是普通的string值需要用引号括起来,不然会认为是对象或者Vue对象的属性方法那些,从而报错。

例子:

<div :class="['one',(isFlag?'two':'three')]"></div>
<div :style="{'font-size':(isFlag?'16px':'20px')}"></div>

v-for
需要为每个循环出来的对象加上:key=“index”,index就是对应的下标

v-text
{{msg}} == v-text,但是v-text可以避免在内容还未更新时先出现{{msg}}这个字符,然后再被替换成对应文本的闪现。

v-html
原来可以通过{{{data}}}的方式来插值,现在不行了,只能通过指令

v-el
2.0放弃了这个方法,使用rel=“xxx”来获取对应的dom元素,然后通过$refs.xxx来获取对应的dom对象,如果在vue对象里面就使用this.$refs.xxx如果再外面,就使用实例的名字.$refs.xxx来获取

注意,title-h2表示驼峰命名,调用时等于titleH2

ref也可以给子组件添加标记,效果一样

v-pre
阻止{{}}插值的内容被替换渲染,直接输出插值的文本,然后使用了v-pre,通过ref获取的标记也会消失,使用$refs.xxx便会报错

<div v-pre>{{msg}}</div>

v-cloak
延时,如果渲染的内容过多,可以使用单属性v-cloak来隐藏未编译的{{}}mustach插值,等对应的实例对象编译完成再显示。

<div v-cloak>{{msg}}</div>

v-once
表示该元素及子元素或者包含的组件只会渲染一次,哪怕我们后面修改了绑定的数据,他也不会再页面变化。

<div v-once>{{msg}}</div>
<div v-once :title="msg"></div>

自定义指令

指令注册
注册全局指令

Vue.directive('name',{});

局部指令
在子组件extend或者component中加入directives,该局部指令只能在该子组件上使用

Vue.extend('templeta',{
  directives : {
    'local-class' : {}  //-连接表示驼峰命名,调用是v-localClass
  }
});

定义指令的对象
有三个属性:

  1. bind:只会调用一次,就是当指令绑定到元素上时
  2. update:元素内容第一次渲染以及后续更新内容绑定内容时运行,它接收两个参数,为newValue和oldValue
  3. unbind:指令从元素上解绑时触发
Vue.directive('wCc',{
    bind : function(){
        console.log('bind',arguments)
    },
    update : function(newValue,oldValue){
        console.log('update',newValue,oldValue)
    },
    unbind : function(){
        console.log('unbind',arguments)
    }
});

var app = new Vue({
    el : '#app',
    data : {
        value : '初始化',
        flag : true,
        html : '<h2>我是一个HTML</h2>'
    },
    methods : {
        
        
    }
});
<div id="app">
    <div ref="title" v-cloak v-w-cc="value">{{html}}</div>
</div>

首次运行时

我们可以看到bind的arguments包含了几个参数,其中0为绑定的元素本身,1则是指令绑定的内容,剩下几个就不是很清除了,以后再研究

修改内容
在浏览器输入:app.value = ‘内容更新了’

我们可以看到update运行了,他的newValue实际上是被绑定的div元素本身,而oldValue是一个object对象,他里面包含了上一个内容和新的内容,展开后他的oldValue属性是旧的绑定内容,value则是新的内容。

取消绑定时
取消绑定实际上就是让元素消失,v-if这些,我们给他加个flag判断,然后将flag改为false。

实际上和bind一样,所以就不多解释了。

如果我们只需要使用update的话,可以使用简写形式创建

Vue.directive('wCc',function(value,value2){
console.log(value,value2);
});


直接传一个带参数的函数就行了,va1,va2对应上面说的。

如果你的指令绑定是一个string值,那么update只会运行一次,因为你的值不是vue对象的,那么就不能进行响应,而且传的如果是string需要用引号括起来表示,如:`v-w-cc="'string'"`


vue2.0后自定义指令又增加了几个属性:

1.  `inserted` 被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
2. `componentUpdated`指令所在组件的 VNode 及其子 VNode 全部更新后调用。

之前说的参数都比较浅显,我们来深入一下

这些属性都对应着一个function,这个方法里面有几个对应的参数名用于理解

inserted : function(el,binding,vnode,oldVnode){
//el就是指令所绑定的元素,可以用来直接操作 DOM
//binding一个对象,包含以下属性:

  //name:指令名,不包括 v- 前缀。
  //value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2
  //oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  //expression字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"
  //arg传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"
  //modifiers一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }

//vnode Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情(实际上就是一个容器,用于包含这个绑定的元素)
//oldVnode 上一个虚拟节点,仅在 update 和 componentUpdated钩子中可用
}


**除了 `el` 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 [dataset](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset) 来进行。**


然后之前说过只传入一个带参数的function不写{}对象来保存对应的参数,他其实表示再bind和update阶段都会运行,如果你只需要这两个阶段运行的话,就可以直一个带参数的funciton

原有的update不会再初次渲染是运行,而是值发生变化时运行,而且只要组件发生重绘一次就会运行一次,如果需要过滤掉不必要的更新可以在里面判断value和oldValue是否==这些。

biding参数全部都是只读的,修改了也不会发生变化,如果要修改值,可以直接el dom操作。

















暂无评论

Info
站点信息

以前觉得活下去很难,现在发现活的好才难!

创建于20156

总共发表了261篇文章

共有391条评论

创建了21个分类目录

Archive
时间归档
Weather
天气

湿度
Catalog
目录树
设置
配色方案

布局

购买