(1)data必须是一个函数
过程:定义一个组件的时候,data选项并不是直接提供一个对象,而是提供一个函数。
结果:因此每个实例可以维护一份被返回对象的独立的拷贝。
优点:当几个地方同时调用同一组件的时候,各个组件,互不影响
(实例创建之后,可以通过 vm.$data
访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问 vm.a
等价于访问 vm.$data.
)
this.count == this.$data.count
(2)Vue.nextTick([callback,context])
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
全局API函数
(如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。IE下可能报错)
(3)Vue.use() 安装 Vue.js 插件
如果插件是一个对象,必须提供 install
方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。
(譬如下列 “import ElementUI from 'element-ui'” 之前,需要 “npm install element-ui”)
此方法须在调用new vue()之前被调用,(一般在main.js中设置)
(4)props
详细:props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
(5)computed计算属性 watch监听属性
watch监听属性 可用于父组件数据改变,触发子组件更新(异常好用)
(6)slot插槽
(6.1)简单插槽,无具名,通过子组件<slot></slot>的位置,就是父组件加进去的数据的位置
父组件:
<template> <div class="slot_parent"> <slot-son> <h2>我是父组件里面的内容</h2> <h2>我是父组件里面的段落</h2> </slot-son> </div> </template> <script> import SlotSon from '../slot_son' export default { name:'SlotParent', components:{ SlotSon } } </script>
子组件:
<template> <div class="slot-son"> <p>这是子组件的页面内容</p> <p>这是子组件的页面段落</p> <br> <slot></slot> <br> <p>这是子组件末尾数据</p> </div> </template> <script> export default { name:'SlotSon' } </script>
效果:
(6.2)具名插槽
父组件 <element slot="[name]" ></element> 子组件<slot name="[name]"></slot>
可以看到下面的效果图,不管在父组件元素上面的位置是怎么样的,都是按照子组件具名slot的位置来排列
父组件:
<template> <div class="slot_parent"> <br> <slot-son> <template slot="header"> <h1>在父组件上template元素上使用slot特性 名字为header的插槽</h1> </template> <br> <p>父组件普通数据 插在子组件中没有具名的插槽</p> <p>父组件普通数据 插在子组件中没有具名的插槽</p> <p slot="footer">在父组件上普通元素上使用slot特性 名字为footer的插槽</p> <p slot="header">在父组件上普通元素上使用slot特性 名字为header的插槽</p> <br> <template slot="footer"> <h3>在父组件上template元素上使用slot特性 名字为footer的插槽</h3> </template> </slot-son> </div> </template> <script> import SlotSon from '../slot_son' export default { name:'SlotParent', components:{ SlotSon } } </script>
子组件:
<template> <div class="slot-son"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> <script> export default { name:'SlotSon' } </script>
效果:
PS:项目中没有用到太多,只做了简单的一些操作(用其他操作也能达到效果)
(7)transition css过渡
mode:同时生效的进入和离开的过渡不能满足所有要求,所以 Vue 提供了 过渡模式
-
in-out
:新元素先进行过渡,完成之后当前元素过渡离开。 -
out-in
:当前元素先进行过渡,完成之后新元素过渡进入。(重写之前的开关按钮过渡)
name:过渡的类名
fade-transverse类名为 fade-transverse-enter fade-transverse-leave
<transition name="fade-transverse" mode="out-in"> <router-view class="router-view"></router-view> </transition>
.fade-transverse-leave-active, .fade-transverse-enter-active { transition: all .5s; } .fade-transverse-enter { opacity: 0; transform: translateX(-30px); } .fade-transverse-leave-to { opacity: 0; transform: translateX(30px); }