Vue2.0电商总结

Posted 2020-09-30

一、vue组件

  在很多时候我们的组件并不需要全部注册在全局里面，我专门只需要注册在需要用到的里面即可（就近原则）

   

 

import Vue from ‘vue‘

var xixine = {

template:‘<h1>Im your headers</h1>‘

}

var lala ={

template:‘<div><h1>xixida</h1><your-header></your-header></div>‘,

components:{

‘your-header‘:xixine

}

}

new Vue({

el:‘#app‘,

data:{

xixi:‘I am a student‘

},

components:{

‘my-header‘:lala

}

})

 

 

　　

 

二、data要避免引用赋值（引用赋值后，组件中的一个时间改变了其中的值，另一个组件如果也用了这个值会受牵连）避免data引用赋值的操作很简单就是这样

 

var demo= {

template:‘<h1>Im your headers{{a}}</h1>‘,

data(){

return {        //避免引用赋值  

a:‘我是a‘,

b:‘xixi‘

}

}

}

　　

三、在vue 2.0 中从外部引入的组件文件 需要 用render函import Vue from ‘vue‘

import App from ‘./App‘


var vm = new Vue( {
el:‘#app‘,
render:h =>h(App) //vue 2.0 从外部引入的组件需要 用render函数渲染
四、v-for 循环中，数组和对象时几乎一样都，都是 <template>

 <div id="app">

   <ul>

      <li v-for="(item,key) in list">{{item}}+{{index}}</li>

   </ul>

 </div>

</template>

<script>

   export default{

      data(){

       return {

       hello:‘hello world‘,

       list:{

       name:‘apple‘,

       price:55,

       color:"red",

       weight:75

       }

       }

      }

   }

  常用的类似于 pop（），push() ,shift,unshift,splice、reverse等函数可以出发页面上染上的更新，但是filter，concat和slice这样的就不行，还有直接修改某一项也不会出发更新如下图，（可以使用Vue提供的set方法）<template>

 <div id="app">

   <ul>

      <li v-for="(item,key) in list">{{item.name}}</li>

      <button v-on:click ="addItem">addItem</button>

   </ul>

 </div>

</template>

 

<script>

    import Vue from ‘vue‘

   export default{

      data(){

       return {

       hello:‘hello world‘,

       list:

       [{

       name:‘apple‘,

       price:55

       },{

       name:‘banana‘,

       price:55

       },{

       name:‘orange‘,

       price:55

       },{

       name:‘apple‘,

       price:55

       }

       ]

      }

       },

      methods:{

       addItem(){

       this.list[1] ={

        name:‘lala‘,price:65

       } //直接这样改是不会触发上面的更新的，

       Vue.set(this.list,1,{name:‘lala‘,price:65})
       }
      }
   }

</script>

　　

七、父子间传值的方式六、其实我们一个vue项目中只有一个 vue实例对象，也就是main.js里面的入口文件里面的，其他的所有传递 就相当于一份配置文件

 

 

八、slot 可以实现插槽功能

父模板：

<my-com>

<p>this is slot<p>

</my-com>

 

　　

子模板：

   <div>

           <slot name=”header”>no slot<slot>

</div>

九、is 属性可以实现动态组件当父模板没有插入插槽的时候，会出现no slot的

十、<keep-alive></keep-alive>加在 动态组件两边可以实现缓存，什么意思呢，也就是说有两个组件comA、comB在comA切换到comB,然后再由comB切换到comA时就会显示上一次comA的状态，常见的有在<router-view>用，其实<router-view>也就是类似于一个动态组件

 

<keep-alive>

   <p :is=”curView”></p>

</keep-alive>

　　十一、css运用

如果我们的模板是这样的

<template>
　　　<transition name="fade">
        <p v-show="show">i am show</p>
 　　 </transition>
</template>

　　写样式的时候要注意，一般 过度的时间啊啥的 下载     .name-enter-active和.leave-enter-active里面，因为这两个都是一个过程，而开始前的动画卸载 .name-enter里面，结束的动画下载 .name-leava-active,这个应该不难李家，这两个代表的是开始和结尾的两种状态

样式解释这样写的

<style>
.fade-enter-active,.fade-leave-active{
 transition: all .5s;
}
.fade-enter,.fade-leave-active{
opacity: 0;
}
.fade-enter{
transform: translateY(-500px);
}

.fade-leave-active{

 transform: translateY(500PX);
}

</style>

<transition name=‘fade‘ mode="out-in">在切换的过程中会出现一点晃动，那还是因为transition默认先进后出，还没出去的自然会影响到正在进来的，所以我们可以用 mode 属性 给他设置为 先出后进

<transition name=‘fade‘ mode="out-in">

　　<div :is="mycom"></div>

    </transition>

在vue中标签名字如果相同的话，不会执行动画的，

 

　<transition name=‘fade‘ mode="out-in"> 	 
	 <p v-show="lala">12312</p>
	 <p v-else>else else</p>
 </transition>