vue笔记精华部分

以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,因为它们可能和 Vue 内置的属性、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些属性。


mixin的使用:
先建一个js文件里面放公共的部分,也就是很多组件都可以使用的公共部分,也像在vue里一样,公共变量公共方法等都写好
然后在组件里使用的时候,先将上面的js引进去,然后在页面注册进去,就是下面的mixins:[mixin], 然后在组件里就可以直接使用mixin.js里定义的方法和变量以及在这里定义的任何东西,mixin.js这个文件名可以随便命
下面是在vue组件里的使用:

组件页面里的mixFn和name就是在mixin.js里定义的,然后混入到这个组件里的

 

directives自定义指令:
直接在export default里写就行,就像写钩子函数一样



使用:

 



监听:
watch:{
phones(newValue,oldValue){
this.phones  =  newValue.length  >  oldValue.length  ?  newValue.replace(/s/g,  '').replace(/(d{3})(d{0,4})(d{0,4})/,  '$1 $2 $3')  :  this.phone.trim()
}
}
<input  v-model='phones'  type='phone'  maxlength="13"  placeholder="请输入手机号"/>

在这里可以设置自己想做的区别在页面里可以这样操作

可以监听路由,里面有两个参数,可以查到信息

监听路由信息

动态路由设置如下:

如:www.baidu.com/:api?  配置动态路由的时候可以加一个?代表正则匹配到0个或者1个,意思是当跳转的路由里不带动态参数时也可以进来

编程式导航:

控制前进后退和跳转的步数

可以直接在next里放路由地址

在单个路由里配置钩子函数在组件里调用钩子函数

在组件里使用钩子函数

一进到页面就加载进来了这样写就是过2秒后再加载进来

wath测试监听:

利用hash过滤数据

点击事件可以直接这样写

slot分发内容

 

第十五课 封装model模板化组件

 

 递归调用判断条件

is属性具体html拓展的功能,component  可以用is这个属性将html扩展

component这个标签上的挂载点是current,就是第一个组件

当点击第二个标签的时候又切换到custom2这个组件了,当点第三个的时候又切换到了第三个组件了,component这个标签是vue的内置标签,这个标签给我们提供了is这个属性

 

原文地址:https://www.cnblogs.com/chaoyuehedy/p/9455736.html