摘要:
mixin混入 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。 组件式混入 // 定义一个混入对象 var myMixin = { created: function () {this.hello()}, methods: { hello: function ( 阅读全文
摘要:
过渡(优化) 可复用的过渡 <transition> 或者 <transition-group>为根的组件 Vue.component('my-special-transition', { template: '<transition name="very-special-transition" m 阅读全文
摘要:
单元素过渡 appear 初始渲染 通过 appear attribute 设置节点在初始渲染的过渡 appear + css <transition appear appear-class="custom-appear-class"appear-to-class="custom-appear-to 阅读全文
摘要:
过渡 & 动画 Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具: 在 CSS 过渡和动画中自动应用 class 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 CSS 动画库,如 Animate.css 可以配合使用第三方 J 阅读全文
摘要:
组件(优化) 动态组件 keep-alive 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。 有时我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题,我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。 < 阅读全文
摘要:
组件 组件是可复用的 Vue 实例,且带有一个名字。 <div id="components-demo"> <button-counter></button-counter> </div> <script> // 定义一个名为 button-counter 的新组件 Vue.component('b 阅读全文
摘要:
表单输入绑定 v-model 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据 阅读全文
摘要:
列表渲染 v-for <!-- v-for="(v,k,i) in arr/obj" --> <ul id="app"> <li v-for="item in items" :key="item.message">{{ item.msg }}</li> </ul> <script> new Vue( 阅读全文
摘要:
条件渲染 v-if & v-else-if & v-else <div id="app"> <h1 v-if="type == 'VUE'">Vue is awesome!</h1> <h1 v-if="type == 'HTML'">Vue is awesome!</h1> <h1 v-else> 阅读全文
摘要:
:class & :style :class 键值对 <div id="app" v-bind:class="{ 'active': isActive }"></div> <script> new Vue({ el:'#app', data:{isActive:true} }) </script> 阅读全文
摘要:
计算属性与监听器 计算属性 当 vm.message 发生改变时,所有依赖 vm.reversedMessage 的绑定也会更新 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed mess 阅读全文
摘要:
基础语法 引入vue <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> <script src="htt 阅读全文
摘要:
生命周期 | 函数 | 描述 | | | | | beforeCreate | 在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 | | created | 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (dat 阅读全文