0%

入门基础

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

最后更新于 2019年11月20日

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操作。

















jQ插件-thickImg大图查看器 Vue过滤器
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao