看Vue2.0及数字商城电商开发

1. Vue2.0在标签中可以使用驼峰命名法，区分大小写
2. ES6语法1：

components:{
    componentA
}

等价于

components:{
    componentA：componentA
}

3. ES6语法2:

methods:{
    add(){
        
    }
}

等价于

methods:{
    add:function(){
        
    }
}

4. 数组更新检测:

• 变异方法:Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
• 非变异方法（替换数组）：这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组。不会触发视图更新。
• 注意： 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
  • 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  • 当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice

example1.items.splice(newLength)

5. 组件-动态组件

• 通过使用保留的 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

• keep-alive：把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。

6. Vue组件中slot

• 为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发，Vue.js使用特殊的 元素作为原始内容的插槽
• 默认情况下，父组件在子组件内套的内容，是不显示的。即组件的作用域为：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

  
      
        我要插入  
          
      
  
  

• 单个插槽

子组件my-component：

  
我是子组件的标题
  
    只有在没有要分发的内容时才会显示。
  

父组件：

  
我是父组件的标题
  
    
这是一些初始内容
    
这是更多的初始内容
  

渲染结果

  
我是父组件的标题
  

    
我是子组件的标题
    
这是一些初始内容
    
这是更多的初始内容
  

• 具名插槽

元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

子组件 app-layout，模板如下：

父组件模板

  
这里可能是一个页面标题

  
主要内容的一个段落。
  
另一个主要段落。

  
这里有一些联系信息

渲染结果

div class="container">
  

    
这里可能是一个页面标题
  
  

    
主要内容的一个段落。
    
另一个主要段落。
  
  

    
这里有一些联系信息
  

7. Vue过渡

• v-if,v-show,动态组件，路由时触发
• 多元素过渡：当有相同标签名的元素切换时，需要通过key特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即不会出现过渡。如：

  
    Save
  
  
    Edit
  

• 多组件过渡：多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态组件：

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '
Component A
'
    },
    'v-b': {
      template: '
Component B
'
    }
  }
})

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

• 过渡模式：
  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。（默认）
  • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

8. Vue动态加载图片src需要用require

• 原因：在webpack中会将图片图片来当做模块来用，因为是动态加载的，所以url-loader将无法解析图片地址，只能将其当成字符串处理
• 解决方法：
  • 将图片作为模块加载进去，比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]这样webpack就能将其解析。
  • 将图片放到static目录下，但必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]这样图片也会显示出来，当然你也可以通过在webpack.base.config.js定义来缩短路径的书写长度。