1.生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
简单介绍几个:
created
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。
见axios例:https://gist.github.com/huahua029/489e301ebb6c872ce6bbac8b9a743f69
beforeDestroy
实例销毁之前调用。在这一步,实例仍然完全可用。
2.过滤器
Vue.filter()
Vue.filter(id, [definition])
Vue.filter('my-filter', function(value){
//返回处理后的值
}
还可以传参,先不看了
这样来用:
{{ message | my-filter }}
<div v-bind:id='xxx | my-filter'></div>
3.路由传参
完整demo: https://jsbin.com/gadimim/edit?html,js,output
这里介绍使用params传参
比如我们在这里传入参数:
<router-link :to='{name:"liubei",params:{
id: 1
}}'>liubei</router-link>
接下来我们在路由中看看(动态路径参数)
var routes =[
{
name:'liubei',
path:'/liubei:id',
component: liubei //当然要有liubei组件了
]
接下来就可以在组件中使用。上边用:id进行了标记。如果不用也是可以的。如果路由上面不写参数,也是可以传过去的,但不会在url上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失,那依赖这个参数的http请求或者其他操作就会失败。
vue补充
选项/数据
data
-
类型:
Object | Function
-
限制:组件的定义只接受
function
。
props:
类型:
Array<string> | Object
-
详细:
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
computed:
类型:
{ [key: string]: Function | { get: Function, set: Function } }
-
详细:
计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数,则
this
不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。
methods
类型:
{ [key: string]: Function }
-
详细:
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的
this
自动绑定为 Vue 实例。
选项/声明周期钩子
类型:基本都是function