SOALIN的博客

Vue 实例 创建实例并对实例的数据和方法进行操作 创建一个Vue实例，并让其接管id为root的DOM的显示 var vm = new Vue({ el: '#root' })

Vue.js 是什么 Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 引入Vue <script src="https://cdn.jsdelivr.net/...

模板语法 插值可以标签中的内容替代为对应数据对象上 name 属性的值。无论何时，绑定的数据对象上 name 属性发生了改变，插值处的内容都会更新。{{}}会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用 v-html 指令。(v-text等同与{{}}) <!DOCTYPE html> <html lang="en"> <head

Class 与 Style 绑定 绑定 HTML Class <!DOCTYPE html> <html lang="en"> <head> <meta charset=

组件使用中的细节点 因为浏览器的规范，所以有些自定义组件在解析时会出现问题，这时候就需要使用 is 标签来解决 <table> <tbody> <tr is="row"></tr> <tr is="row"&am

组件参数校验 可以通过 type 来指定子组件接收的参数类型，当指定参数为数字时要给 content 加上 : ,并指定 type 为 Number ，否则接受到的是字符串。 required 可以指定是否必须传参数，当没有传递参数时使用 default 的值，可以在 validator 进行自定义的校验，本例定义传递的参数长度必须大于 5 位 <child content="...

非父子组件间传值 定义一个bus属性，将他绑定到 prototype 上，这样每个 Vue 实例都会有 bus 这个属性，通过 bus 来向外触发事件，使用 methods 在被挂载的时候执行，需要注意的是因为作用域发生了变化所以不能直接使用 this ，记得不要修改父组件传过来的值哦 <child content="hello"></child> <child c...

条件渲染v-ifv-elsev-else-if用 key 管理可复用的元素v-showv-if vs v-show v-if 在 Vue 中我们可以通过 v-if 指令来判断是否渲染这个对象 <!DOCTYPE html> <html lang="en"> <head> &

列表渲染v-for 把一个数组对应为一组元素一个对象的 v-forkey数组更新检测set v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item of items 形式的特殊语法，list 是源数据数组并且 item 是数组元素迭代的别名, v-for 还支持一个可选的第二个参数为当前项的索引 <div v-for=...

Vue中的插槽 插槽 slot 可以使我们优雅的进行 DOM 的传递

Vue中的CSS动画原理 Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡, transition 的 name 可以替换过度的类名 过渡的类名 1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在...

Vue中多个元素或组件的过渡 元素过渡：元素设置时注意要加上 key 来告诉 Vue 不要复用 DOM ，否则不会出现动画，我们为 transition 设置 mode 即可实现过渡效果 .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity 1...