分类
前端技术

1.vue基础知识点

1.vue绑定值与字符串拼接

1. :title=”`字符串${变量}`”
2. :title=”‘字符串’ + 变量”
3. 在插值表达式里加字符串
{{name+’字符串’}} =>name+字符串
4. html代码循环输出
<p v-html=”item.content”></p>

2.给元素绑定事件以及事件修饰符

1.事件:mouseenter  mouseleave keyup keydown submit
事件修饰符: .prevent:阻止默认事件
             .stop :阻止事件冒泡
             .self :事件在本身出发,不是在子元素
             .once :事件只能出发一次
写法:“ @mouseenter.once=”changeNum”

2.v-medol的修饰符
        .lazy  相当于jQuery中的change事件
        .number 把输入转化为Number类型
        .trim   过滤输入的首尾的空格
写法:“ v-model.number=”num”

3.键值修饰符 .keyCodes 对应键盘按键的code    
  .enter   .delete .space .up .down .left .right .esc
对应文本输入的场景

4.鼠标修饰键 .left .middle .right
对应mousedown的场景

5.系统修饰符 .ctrl .alt .shift .meta .exact  
(精确到某个按键)

3.$on和$emit

1.this.$on 监听 this.$emit 事件的发生
可以定义多个事件,也可以为一个事件绑定多个处理函数
2.this.$emit 触发事件的发生
注:还有一种办法:不用this.$emit;直接在子组件上自定义事件时加上’.native’修饰符
就可以在父组件的methods调用
 <child @click.native=”clickNumber”></child>
在父组件引用子组件时,在用事件传值的时候,加上 sync 修饰符即可实现数据同步
例: <button-counter :child-message.sync=”message”></button-counter>

参考这个文章=> vue中的$on,$emit,v-on 三者关系

4.子组件中props接收的数据

可以在计算属性函数 computed 和监听属性函数 watch 使用、以及template当做html属性使用

5. 计算属性computed

computed: 在需要对模板的数据进行逻辑运算时,应在计算属性computed里对数据进行逻辑运算,并用return返回。
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(‘ ‘).reverse().join(‘ ‘)
}
}

注:使用方法methods也能达到,但是每次渲染页面都会执行methods,降低性能。
因为computed自带缓存, 所以只有当依赖的数据改变时,才会执行computed。
使用computed,是为了保证模板内的表达式便利且易维护。

get和set:
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ‘ ‘ + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(‘ ‘)
this.firstName = names[0]
this.lastName = names[names.length – 1]
}
}
}

get是通过其他的值算出新值,set是通过设置值改变相关联的值

6.六种侦听器watch的使用

watch:监听data里数据属性改变时需要的逻辑运算,用this指向返回改变的值。
1.常见用法
html: <input type=”text” v-model=”massage”>
       <p>{{copyMessage}}</p>

js: new Vue({
           el:’.app’,
           data(){
              return{
                 massage:”hello word”,
                 copyMessage:”
              }
           },
           watch:{
             massage(value){
                 this.copyMessage =value
             }
           }
        })

2.通过绑定方法实现监听
html: <input type=”text” v-model=”massage”>
      <p>{{copyMessage}}</p>

js: new Vue({
           el:’.app2′,
           data(){
              return{
                 massage:”hello word”,
                 copyMessage:”
              }
           },
           watch:{
             massage:’handleMessage’
           },
           methods:{
               handleMessage(value){
                   this.copyMessage = value+”+app2″
               }
           }
        })

3. deep+handler
html: <input type=”text” v-model=”deepMessage.a.b”>
       <p>{{copyMessage}}</p>

js: new Vue({
           el:’.app3′,
           data(){
              return{
                 deepMessage:{
                  a:{
                      b:”Deep Message”
                  }
                 },
                 copyMessage:”
              }
           },
           watch:{
            //    handler里面是方法,deep里面是布尔值
             deepMessage:{
                 handler:’handleDeepMessage’,
                //  如果为false就不会及时更新
                 deep:true
             }
           },
           methods:{
            handleDeepMessage(value){
                this.copyMessage = value.a.b+”+app3″
            }
           }
        })

4. immediate   实时更新
html: <input type=”text” v-model=”message”>
      <p>{{copyMessage}}</p>

js: new Vue({
           el:’.app4′,
           data(){
              return{
                 message:’hello word’,
                 copyMessage:”
              }
           },
           watch:{
             message:{
                handler:’handleMessage’,
                immediate:true
             }
           },
           methods:{
            handleMessage(value){
                this.copyMessage = value+”+app4″
            }
           }
        })

5. 绑定多个handler
html:  <input type=”text” v-model=”message”>
       <p>{{copyMessage}}</p>

js: new Vue({
           el:’.app5′,
           data(){
              return{
                 message:’hello word’,
                 copyMessage:”
              }
           },
           watch:{
             message:[{
                handler:’handleMessage’
             },
             ‘handleMessage2’,
             function(){
               this.copyMessage = this.copyMessage + ‘…’
             }]
           },
           methods:{
            handleMessage(value){
              this.copyMessage = value+”+app5″
            },
            handleMessage2(value){
                this.copyMessage = this.copyMessage+”+#”
            }
           }
        })

6. 监听对象属性
html: <input v-model=”deepMessage.a.b”>
        <span>{{copyMessage}}</span>

js: new Vue({
           el:’.app6′,
           data(){
              return{
                 deepMessage:{
                  a:{
                      b:”hello vue”
                  }
                 },
                 copyMessage:”
              }
           },
           watch:{
            ‘deepMessage.a.b’:’handleMessage’,
           },
           methods:{
            handleMessage(value){
                this.copyMessage = value+”+app6″
            }
           }
        })

7.class对象绑定样式

通过methods事件对data值赋值或者改变布尔值达到对样式类名的添加和移除
<div class=”app”>
   <p :class=”{actived:isactived}” @click=”activeOne”>点点去我</p>
   <p :class=”[actived]” @click=”activeTwo”>点点去我</p>
   <p :style=’styleObj’ @click=”activeThree”>点点我 </p>
   <p :style=”[styleObjq,{fontSize:’30px’}]” @click=”activeFour”>点点</p>
</div>
<script>
  var vm= new Vue({
      el:’.app’,
      data:{
         isactived:false,
         actived:”,
         styleObj:”,
         styleObjq:{
             color:’green’
         }
      },
      methods:{
         activeOne:function(){
            this.isactived=!this.isactived;
         },
        activeTwo:function(){
           this.actived=this.actived===’actived’?”:’actived’;
        },
        activeThree:function(){
          this.styleObj=this.styleObj===”?’color:red’:”;
        },
        activeFour:function(){
          this.styleObjq.color=this.styleObjq.color===’green’?’red’:’green’;
        }
     }
})
</script>

在方法里还可以直接返回值

8.列表渲染要加key值

为了给 Vue 一个提示,以便它能跟踪每个节点的身份.
从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 (实际数据中有不同值的id)

9.修改数组内容时,只能用vue定义的七种变异方法

push 增加一项数据
pop 删除最后一项数据
shift 删除第一项数据
unshift 给第一项数据增加内容
splice 数组截取
sort 数组排序
reverse 数组取反
注:第二种改变数组方法:直接操作数组,重新定义数组的数据,就能覆盖原始的数组数据
第三种改变数组方法:用Vue.set

10.Vue.set和vm.$set改变数组

Vue.set(‘数组’,’字段name’,’字段值’)=>给数组增加一组数据
Vue.set(‘数组’,’字段下标’,’字段值’)=>改变数组下标符合的数据

11.模板占位符(template)

可以包裹元素,但是在列表渲染循环中并不会真正渲染到页面上
html:
<template v-for='(item,key) of list’>
  <div>{{item}}—-{{key}}</div>
  <span>{{item}}</span>
</template>

demo:


改变li标签为a标签
<router-link tag=”li” to=””></router-link>

12.vue中在引用子组件的注意细节

1.在H5规范代码编写中,tbody里要包含tr,ul里要包含li,
select里要包含option,ol里要包含li
可以用 <tr is=’组件名’></tr> 引入组件

2.在子组件里定义data时,必须是function函数,不能是对象
data:function(){
return {
}
}


3.在子组件不能改变父组件传过来的值,但是可以把父组件传过来的值放在子组件的data里,
引用和操作data里面的值(单向数据流)
4.非props特性情况下,子组件没有props,不能使用父组件传递内容,只能当做一个div.attr属性显示在子组件最外层的dom上

5.子组件中的props验证类型
String Number Boolean Function Object Array Symbol

13.ref的使用

1.当ref写在div标签上时,’this.$refs.名字’ 获取的是标签对应的dom元素
2.当ref写在子组件上时,’this.$refs.名字’获取的是子组件的引用,可以直接操作数据

14.非父子之间的传值( bus/总线/发布订阅模式/观察者模式 )

给Vue.prototype挂载bus属性指向Vue实例=>Vue.prototype.bus=new Vue
后续调用vue或者调用组件,都会带上bus属性
<div class=”app”>
       <child content=”sun”></child>
       <child content=”qiao”></child>
    </div>
    <script>
        // 定义一个bus在原型上面,以供所有实例去调用
        Vue.prototype.bus=new Vue,
        // 创建组件
        Vue.component(‘child’,{
            props:[‘content’],
            // 组件里面的data只能用函数去表示
            data:function(){
                return {
                    // 起到暂时存储作用,避免由于单线数据流造成的警告
                    sefContent:this.content
                }
            },
            // 模板
            template:”<div @click=’clickCh’>{{sefContent}}</div>”,
            methods:{
                clickCh:function(){
                    // 向外传值.$emit
                    this.bus.$emit(“clickVal”,this.sefContent)
                }
            },
            // .$on监听.$emit,并把改变的值赋给sefContent
            mounted:function(){
                var _this=this
                _this.bus.$on(“clickVal”,function(msg){
                    _this.sefContent=msg
                })
            }
        })
        var vm= new Vue({
           el:’.app’,
           data:{
           },
        })
    </script>

15.slot插槽的使用

父组件向子组件插入的html,可以通过子组件template中的<slot></slot>显示
在父组件向子组件插入的html中,附加slot=“name值”,子组件中可以根据 <slot name=”name值”></slot> 显示对应html
如果插槽内没有值,就会显示默认值
<div class=”app”>
       <child> 
           <div class=”header” slot=”header”>this is header</div>
           <div class=”footer” slot=”footer”>this is footer</div>
           <div>this is over</div>
       </child>
    </div>
    <script>
        Vue.component(“child”,{
            template:`<div> 
                        <slot name=”header”></slot>
                        <h1>this is content</h1>
                        <slot name=”footer”></slot>
                        <slot>默认内容</slot>
                      </div>`
        })
        var vm= new Vue({
           el:’.app’,
           data:{
           },
        })
    </script>

16.作用域插槽

在子组件定义数据,在父组件决定显示哪些数据,通过子组件的slot附加属性传到父组件里
<div class=”app”>
       <child> 
           <template slot-scope=”props”>
                   <h2>{{props.nameU}}–{{props.content}}–{{props.index}}</h2>
           </template>
       </child>
    </div>
    <script>
        Vue.component(“child”,{
            data:function(){
                return {
                   list:[
                       {name:’one’,content:1},
                       {name:’two’,content:’gf’},
                       {name:’three’,content:3},
                       {name:’four’,content:4},
                       {name:’five’,content:5},
                       {name:’six’,content:6},]  
                }
            },
            // 不能用name
            template:`<div> 
                       <slot v-for=”(item,index) of list” :index=index :nameU=item.name :content=item.content></slot>
                      </div>`
        })
        var vm= new Vue({
           el:’.app’,
           data:{
           },
        })
    </script>

slot-scope的值要和父组件调用的一致,父组件调用的属性由子组件’slot’属性决定
作用域插槽必须以’template’开头和结尾
作用域插槽接收到的数据以’h2’模板显示
注:在vue2.6版本里,统一使用v-slot(见4.Vue Element+Node.js开发企业通用管理后台系统

17.动态组件的使用以及路由渲染问题和v-once指令

1.keep-alive标签   开始是所有渲染过得组件都保存在内存中,防止反复渲染
2.component 标签   给组件提供一个挂载点
3.is        属性,  指明当前挂载的组件名
通过父组件的methods事件根据逻辑判断传递type值到component组件
绑定component组件的is属性根据传来的值显示不同的组件
适用于tab切换。
<div class=”app”>
        <component :is=’type’></component>
        <button @click=”buttonClick”>按钮</button>
    </div>
    <script>
        Vue.component(“child-one”,{
            template:'<div v-once>child-one</div>’
        })
        Vue.component(“child-two”,{
            template:'<div v-once>child-two</div>’
        })
        var vm= new Vue({
           el:’.app’,
           data:{
               type:’child-one’
           },
           methods:{
            buttonClick:function(){
              this.type=this.type===”child-one”?”child-two”:”child-one”
            }
           }
        })
    </script>

注: 1.每次点击事件,组件都要创造再销毁,极其耗费性能。
所以一定要用v-once,v-once能缓存组件,每次点击时都会加载缓存的组件。
2.本文上面例子没有加 keep-alive 的原因是直接在app.vue 加入全局的 keep-alive 了
如果想某个组件需要渲染的时候就用exclude属性
例:“<keep-alive exclude=”组件名” >
3.在使用keep-alive时,会产生一个周期函数 activated ,可以在组件里面使用

18.css动画和自定义class动画

transition没有name ,vue默认class:v-enter v-enter-active v-leave-to v-leave-active
<style>
        .fade-one-enter, .fade-one-leave-to{
            opacity: 0;
        }
        /* 默认是v-enter-active  transition没有name时 */
        .fade-one-enter-active, .fade-one-leave-active{
            transition: all 0.5s;
        }
    </style>
<transition name=”fade-one”>
      <div v-if=”show”> this is very</div>
</transition>


在css动画中,如果不想使用vue自带的class,可以自定义enter-class,enter-active-class,enter-to-class,
leave-class,leave-active-class,leave-to-class
1.在style里自定义class样式,
2.在transition添加 enter-class =’1定义的class名’,其他几个一样。

19.animate动画库的使用

点击打开anmiated插件链接
引入css,在class加上’animated’,然后加上需要使用的动画name
<transition name=”fade-one” enter-active-class=”animated flipInX” leave-active-class=”animated lightSpeedIn”>
   <div v-if=”show”> this is very</div>
</transition>

注:必须写上自定义的class:: enter-class,enter-active-class,enter-to-class,
leave-class,leave-active-class,leave-to-class

20.自定义动画时长和初始动画(刷新页面的动画)

1.在transition加上”appear appear-active-class=’动画名字’ “属性
2.在transition加上type=”transition”  ,那么总时长按照transition时间来算 
3.在transition加上自定义总时长   :duration=”1000″   单位毫秒   
4.在transition加上还可以定义出场和入场时间  :duration=”{enter:5000,leave:5000}”
注:在使用type=”transition”时,appear 入场动画会失效。替换成 :duration=”1000″ ,入场动画又生效了

21.vue中使用js动画和velocity.js

入场动画 @before-enter @enter @after-enter
出场动画 @before-leave @leave @after-leave
通过methods事件可以用js实现动画效果
// @before-enter el 是transition包含的标签
handleBeforEnter:function(el){
    el.style.color=’red’
},
// @enter  done 回调
handleEnter:function(el,done){
    setTimeout(()=>{
         el.style.color=’green’
     },2000)
     setTimeout(()=>{
          done()
     },4000)
},
// @after-enter
handleAfterEnter:function(el){
     el.style.color=’blue’
},

注:在动画结束后,要手动在handleEnter里调用done函数
当done被调用时,才会触发@after-enter事件

点击打开velocity.js
handleBeforEnter:function(el){
    el.style.opacity=0
},
handleEnter:function(el,done){
    Velocity(el,{opacity:1},{duration:1000,complate:done})
},
handleAfterEnter:function(el){
   el.style.color=’blue’
   console.log(“动画结束”)
}

22.多个组件或元素的过渡

1.多个元素过渡的效果要加key值来区分,这样能减少demo的复用性,动画才能实现。
<transition name=”fade-one” mode=”out-in”>
    <div v-if=”show” key=”is”> this is very</div>
    <div v-else key=”bey”> bey bey</div>
</transition>

2.多个组件的操作见上文,此处只说一个属性mode
mode=”in-out” 先显示后隐藏  out-in 先隐藏后显示
<transition name=”fade-one” mode=”out-in”>
    <component :is=’type’></component>
</transition>

23.列表的过渡

使用 transition-group 包裹需要过渡效果的dom,当然还要写动画的style
<transition-group>
    <li v-for=”item of list” :key=’item.id’>
         {{item.id}}—{{item.title}}
    </li>
 </transition-group>

24.动画的封装

在子组件里定义模板插槽和调用动画的methods事件,
在父组件通过子组件名调用子组件,
子组件就能根据父组件不同的demo显示不同的内容
<div class=”app”>
        <fade  :show=”show”>
           <div>hello word</div>
        </fade>
        <fade  :show=”show”>
            <h1>hello word</h1>
         </fade>
         <button @click=”handleBtnClick”>add</button>
    </div>
    <script>
        // 动画封装
       Vue.component(‘fade’,{
           props:[‘show’],
           template:`
            <transition @before-enter=”handleBeforeEnter” @enter=”handleEnter” @after-enter=”handleAfterEnter”>
               <slot v-if=”show”></slot>    
            </transition>
           `,
           methods:{
               handleBeforeEnter:function(el){
                 el.style.color=’red’
               },
               handleEnter:function(el,done){
                 setTimeout(()=>{
                    el.style.color=’green’
                 },2000)
                 setTimeout(()=>{
                   done()
                 },4000)
               },
               handleAfterEnter:function(el){
                 el.style.color=’blue’
               },
           }
       })
        var vm= new Vue({
           el:’.app’,
           data:{
               show:false
           },
           methods:{
            handleBtnClick:function(){
                this.show=! this.show
            }
           }
        })
    </script>

25.状态过渡和 TweenMax

需要借用tweenmax使用
<div class=”app”>
        <input type=”number” v-model.number=”number” step=”20″>
        <p>{{fullName}}</p>
    </div>
    <script>
      var vm= new Vue({
        el:’.app’,
        data:{
            number: 0,
            fullName: 0
        },
        computed:{
            animatedNumber:function(){
                return this.fullName.toFixed(0)
            }
        },
        watch:{
            number:function(newValue){
            TweenLite.to(this.$data, 0.9, { fullName: newValue });
            }
        }
      })

“1.vue基础知识点”上的1条回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注