自定义指令&&cli

vue 列表循环非响应式情况

1.数组的length无法响应

• 处理方法：

arr = null
arr.splice( 0 )

methods：{
    
    remove () {
    // this.todos = null  可以
    
    this.todos.splice( 0 )
    }


}

2.当我们使用索引直接设置一个数组项时dom无响应时

如：
vm.items[indexOfItem] = newValue

处理方法 ：
Vue.set / this.$set

Vue.set(需要修改的数组，修改的数据的下标，跟修改的数据)

methods: {
	modifyFirst () {
		// this.items[ 0 ] = '睡觉'
		Vue.set( this.items,'0','睡觉')
		// this.$set
		// Vue.set底层就是 Object.assign
	},

}

自定义指令

1.内置指令

• v-html
• v-text
• v-on
• v-bind
• v-if
• v-else-if
• v-else
• v-model
• v-for
• v-slot
• v-show

2.自定义的方式：

• 全局定义

Vue.directive(指令名称，指令的选项)

• 局部定义，组件内选项：

directives

自定义指令在谁身上使用el就作用在谁身上

比如把自定义的指令在input上使用

那么此时el操作的就是input

// 注册一个全局自定义指令
 `v-focus` Vue.directive('focus', { 
 // 当被绑定的元素插入到 DOM 中时
 inserted: function (el) { 
 // 聚焦元素 
 el.focus() } 
 })

一个指令定义对象可以有如下几个钩子函数 (均为可选)

• bind(){}
  当指令和元素第一次绑定时触发

• inserted(){}
  当指令绑定的元素插入到页面时触发

• update(){}
  所在组件的VNode 更新时调用

• componentUpdated(){}
  指令所在组件的VNode 及其子vnode 全部更新后调用

• unbind(){}
  指令和元素解绑时触发【指令被绑定的元素被删除】

    

         删除 
        
    

钩子函数的参数有如下几个

• el
  指令所绑定的元素，可以用来直接操作DOM

• binding
  一个对象包含

  • name：指令名，不包括 v- 前缀
  • value：指的是绑定值 如：v-my-directive=“1 + 1” 中，绑定值为 2。
  • oldvalue：指令板顶前的一个值仅 在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串·形式的指令表达式，如 v-my-directive="1 + 1"中，表达式为 “1 + 1”。
  • modifiers：一个包含修饰符的对象如：v-my-directive.foo.bar中，修饰符对象为 { foo: true, bar: true }。

• vnode
  Vue编译生成的虚拟节点

• oldVnode

• 上一个虚拟节点，仅在update和componentUpdated钩子中可用

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

混入 mixin

1.将组件中选项的一部分分离出去，单独管理
2.方式有两种：

• 全局混入 Vue.mixin
  全局混入的弊端：当有new了两个Vue的时候，全局混入的方法会作用到所有的vue身上
• 局部混入 mixins [推荐]

局部混入 mixins

以下代码中的方法选项是总选项，总选项的级别比分选项的级别大
所以当朱选项和分选项的方法名一样的话，元素会执行主选项中的方法

	

		 点击 
		 点击 
	

一下是分离出来的vue的方法事件选项，该选项是分选项

const obj = {
	methods: {
		aa () {
			alert('aa')
		}
	}
}

自定义插件

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

const MyPlugin = {
    install ( Vue, options ) {
        Vue.directive('focus',{
	        inserted ( el ) {
		        el.focus()
		        el.style.background = 'red'
	        }
	    })
	        Vue.component('Hello',{
		        template: '
 hello 
'
	        })
        }
}

引用自定义插件

过渡和动画

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

第三方css库

• 引第三方css
• 使用内置 transition 组件将动画元素包裹起来

业务： 点击一个开关按钮控制一个元素的存在与否
这个元素的进入或是离开需要添加动画效果

    

         切换 
        
            
 内容 
        
    

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

1.什么是cli？
cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack
cli 目前的版本

• cli2
• cli3
  cli的安装

cli的安装
npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】

1.
使用国内镜像加速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

2.$ yarn add @vue/cli global 这个是·cli3的版本，如果还想安装使用cli2的脚手架，可以安装一个包
cli3 @vue/clicli2 vue-cli 【 建议不要安装 】
如果想要同时使用cli2和cli3
2,。 $ yarn add @vue/cli-init global
如果yarn安装失败，可以用以下方法：

1. $ cnpm i @vue/cli -g 这个是cli3的版本
   如果还想使用cli2的脚手架，那么我们可以在安装一个包
2. $ cnpm i @vue/cli-init -g
   单独安装cli2

`$ cnpm i vue-cli -g`

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

创建项目（cli3）

1.命令创建

$ vue create 项目名称

• 手动配置
• 如果安装node-sass出问题
  • 先切换npm源 nrm use npm
  • 使用cnpm安装 cnpm i node-sass sass-loader -D
    2.图形界面创建

$ vue ui

cli2版本创建

• 标准版

$ vue init webpack project

• 简易版

$ vue init webpack-simple project