自定义指令&&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安装失败，可以用以下方法：
- $ cnpm i @vue/cli -g 这个是cli3的版本
如果还想使用cli2的脚手架，那么我们可以在安装一个包 - $ 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