在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: <component v-bind:is="currentTabComponent"></compo…
标签:vue.js教程
Vue插槽
插槽内容 Vue实现一套内容分发的API, 这套API基于当前的web组件规范草案,将<slot>元素作为承载分发内容的出口。 <navigation-link url="/profile"> Y…
介绍Provide以及Inject
介绍 Vue 的 Provide 以及 Inject Provide 以及 Inject 是 Vue 中用于祖先元素向其所有后台元素注入依赖的接口。 具体用法 // Data.vue ... export default…
Vue表单输入绑定
基础用法 你可以用v-model指令在表单input,textarea以及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但是v-model本质上不过是语法糖。它负责监听用…
Vue事件处理
监听事件 可以使用v-on指令监听DOM事件,并在触发的时候运行一些JavaScript代码。 <button v-on:click="counter+1"></button> 事件处理方法 因为…
Vue列表渲染
用v-for把一个数组对应为一个组件元素 我们用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items形式的语法: <ul> <li v-for="item in…
Vue过滤器源码阅读
过滤器 作用 : 用于一些常见的文本格式化 使用方式: 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”…
Vue条件渲染
v-if 字符串模板中,我们可以像这样写一个条件块: {{#if ok}} <h1></h1> {{/if}} 在Vue中,我们使用v-if指令实现同样的功能: <h1 v-if="ok"&…
Vue中Class与Style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以使用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过拼接字符串比较麻烦,因此在v-bind用于class和styl…
Vue计算属性和侦听器
计算属性 模板内的表达式非常便利,但是在模板中放入太多的逻辑会让模板过重切难以维护。对于任何复杂逻辑都应该使用计算属性。 <p>{{ reverseMsg }}</> var vm = new V…
Vue模板语法
模板语法 Vue使用基于HTML的模板语法,允许开发者声明式的将DOM绑定至底层Vue实例的数据。 在底层的实现上,Vue将模板编译成虚拟DOM渲染函数。结合响应系统,Vue能够智能的计算出最少需要重新渲染多少组件,并把…
Vue实例和生命周期
创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({ //选项 }) 数据与方法 当一个Vue实例被创建时,它向Vue的响应式系统中加入了其data对象中…