Vue的自定义组件插件过渡动画等

Vue列表循环非响应式情况

• 数组的length无法响应，就算length为零，dom还是存在
  解决：使用arr=null； arr.splice(0)
• 当你利用索引直接设置一个数组项
  比如 vm.items[index]=newValue
  这样的情况就无法响应，无法更改要更改的值
  解决：Vue.set/this.$set Vue里提供的方法

自定义指令

1.内置指令

• v-html
• v-text
• v-on
• v-bind
• v-if
• v-else-if
• v-else
• v-show
• v-for
• v-model
• v-slot 【 2.6.x 】

2.定义方式

• 全局定义 Vue.directive(‘指令的名称’，‘指令的选项options’)

• 局部定义 组件内选项 directives
  

混入 mixin

1.什么叫做混入

• 将组件的选项中的一部分分离出去，单独管理

2.方式有两种

• 局部混入 mixins【推荐使用】

• 在单独的JS文件里定义一个对象，里面写methods选项方法再引入使用的文件里
  
  
  *全局混入 Vue.mixin【不推荐使用】

异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染.

自定义插件

1.自定义的插件应该有一个 install 方法
2.自定插件必须使用 Vue.use(‘插件名称’) 才能使用插件

过渡和动画

1.过渡 【css3】 通过css来实现过渡效果
2. 动画 【js】 通过js来实现动画效果
3.Vue中如何使用以上两个效果？

• 自定义css
• 第三方css库 【Animate.css】 推荐
• 自定义动画
• 第三方js动画库 【Velocity.js】 推荐

Vue项目的快速构建工具 cli

vue项目的快速构建工具 cli 【 脚手架

1. 什么是cli?
   cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack
2. cli目前有哪些版本？
   cli2 cli3
   cli3对电脑的配置有一定要求
3. cli如何使用？

   1. cli的安装
      npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】
      使用国内镜像加速npm和yarn
      npm config set registry=https://registry.npm.taobao.org
      yarn config set registry https://registry.npm.taobao.org
      下载cnpm：npm install -g cnpm –registry=https://registry.npm.taobao.org

      1. $ yarn add @vue/cli global 这个是cli3的版本
         如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
         cli3 @vue/cli
         cli2 vue-cli 【 不要安装 】
         所以一个电脑只能装一个
         问题： 如果我们同时想使用 cli2 和 cli3 怎么办呢？
      2. $ yarn add @vue/cli-init global
         如果安装3失败了，
         那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
         1. $ cnpm i @vue/cli -g 这个是cli3的版本
            如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
         2. $ cnpm i @vue/cli-init -g
            如果还有问题：
            那么你就不要使用cli3了，你可以单独安装cli2 【 先卸载cli3,重启电脑 】
            $ cnpm i vue-cli -g

   2. 验证是否安装成功
      命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功

   3. 创建项目
      cli3版本创建

      1. 命令创建 【 推荐 】
         $ vue create project
         • 手动选择配置
         • 如果安装node-sass出问题，如何解决：
           • 先切换成npm源 nrm use npm
           • 使用cnpm 安装 cnpm i node-sass sass-loader -D
      2. 图形界面创建
         $ vue ui
         cli3两种形式创建的结果是一样的
         cli2版本创建
      3. 标准版
         $ vue init webpack project
      4. 简易版
         $ vue init webpack-simple project