-
访问元素，组件
1.访问根实例
$root
比如：
new Vue({
data{
foo:2
}
})
this.$root.foo
2.访问父级组件
$parent
3.访问子组件
ref
<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
与getElementById区别：
获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。
-
依赖注入
相比于$parent属性，它可以让我们在任意后代访问到这个父级组件（而不是只能直接后代）
类似发布订阅模式
祖先组件不需要知道哪些后代组件使用它提供的属性
后代组件不需要知道被注入的属性来自哪里
用法：
在祖先组件放入provide属性
在后代组件放入inject属性
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject 选项应该是：一个字符串数组，或一个对象
可以结合Symbol使用
const s = Symbol()
const Provider = {
provide () {
return {
[s]: 'foo'
}
}
}
const Child = {
inject: { s },
// ...
}
传入的值使用this.[name]就可以访问到。可以放在prop或者data里面进行初始化
后代组件接收时，还可以为他设置默认值。当没有传入就使用默认值，有传入就使用传入值。
也可以使用from表示其来源
const Child = {
inject: {
foo: {
from: 'bar',
default: 'foo'
}
}
}
-
递归组件
就是在组件内部调用自己的组件
需要这样调用的话，最重要设置一个出口，否则会报错，内存溢出
当我们需要构建一个文件目录树（像资源管理器那样）
具体请看官网
https://cn.vuejs.org/v2/guide/components-edge-cases.html
-
内联模板
长这样子
<my-component inline-template>
aa //aa会被渲染出来
</my-component>
作用来说，就是自带插槽的的模板，但是这样会使模板的作用域变模糊，所以不推荐使用啦。
内联模板需要定义在 Vue 所属的 DOM 元素内。
-
X-T模板
在script标签内定义模板，通过id拉到template属性那里
<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>
Vue.component('hello-world', {
template: '#hello-world-template'
})
x-template 需要定义在 Vue 所属的 DOM 元素外。
-
强制更新
vm.$forceUpdate()
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
-
一次渲染组件
对于静态并且渲染十分消耗性能的组件。可以这样
<div v-once></div>
这样他就不是响应式的，div内容不会更新了。
但是还是避免这种做法，因为后期需要调整，找bug的时候，会麻烦。
-
过渡效果
1.实现方式：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
2.vue提供封装的组件transition
适用于以下情景
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
使用方法：transition包裹起来就可以了
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
①自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
6个过渡的类名：
v-enter定义进入过渡的开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
如果有多个transition 组件，需要提供name识别
<transition name="fade"></transition>
//css文件
.fade-enter-active{
transition: all .3s ease;
}
那么上面的名称就会变为fade-enter-active等
自定义的过渡类名
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
.animated tada{...}
CSS 过渡，动画：
.fade-enter-active {
transition: all .3s ease;
}
@ke
.fade-enter-active {
animation: bounce-in .5s;
}
@keyframes fade-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
transition和animation区别：
animation：单帧绘制，支持设定关键帧，可以绘制出复杂的效果。支持循环。通过帧设定属性变化
transition：单次触发效果播放一次，不支持循环。常常与js搭配，通过js改变属性，触发transition操作
②如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
当只用 JavaScript 过渡的时候，在 enter和leave中必须使用done 进行回调。否则，它们将被同步调用，过渡会立即完成。
leave: function (el, done) {
// ...
done()
},
v-bind:css="false"
//直接跳过第一步，检查第二步
③如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
使用 Velocity.js 的简单例子：
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<transition
v-on:before-enter="beforeEnter" v-on:enter="enter"
v-on:leave="leave" v-bind:css="false"
>
</transition>
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
}
- #####初始渲染的过渡
和name一样，在transition加上appear属性，然后动画名字也不会变成
`appear-class="[name]"`
-
多组件渲染
transition里面有v-if和v-else
挂载key值，在script部分进行逻辑处理。
-
过渡模式
1.使用mode属性
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
2.多个组件的过渡
使用动态组件即可
-
列表过渡
在这种场景中，使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
1.不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
2.过渡模式不可用，因为我们不再相互切换特有的元素。
3.内部元素 总是需要 提供唯一的 key 属性值。
4.CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
...
后面的其他效果不看了，用到再说吧。
网友评论