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

 



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

 

下面是在vue组件里的使用:
vue笔记精华部分

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

 

vue笔记精华部分

 

directives自定义指令:
直接在export default里写就行,就像写钩子函数一样
vue笔记精华部分

vue笔记精华部分
使用:

vue笔记精华部分

vue笔记精华部分

 

 

 



监听:
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="请输入手机号"/>

 

 

vue笔记精华部分在这里可以设置自己想做的区别vue笔记精华部分在页面里可以这样操作

vue笔记精华部分可以监听路由,里面有两个参数,可以查到信息

vue笔记精华部分监听路由信息

vue笔记精华部分

动态路由设置如下:

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

编程式导航:

vue笔记精华部分vue笔记精华部分vue笔记精华部分控制前进后退和跳转的步数

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分可以直接在next里放路由地址

vue笔记精华部分在单个路由里配置钩子函数vue笔记精华部分在组件里调用钩子函数

vue笔记精华部分在组件里使用钩子函数

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分一进到页面就加载进来了vue笔记精华部分这样写就是过2秒后再加载进来

vue笔记精华部分vue笔记精华部分

vue笔记精华部分vue笔记精华部分

vue笔记精华部分vue笔记精华部分vue笔记精华部分vue笔记精华部分

vue笔记精华部分vue笔记精华部分

vue笔记精华部分vue笔记精华部分

 

wath测试监听:

vue笔记精华部分

利用hash过滤数据

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

点击事件可以直接这样写

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

vue笔记精华部分

slot分发内容

vue笔记精华部分 vue笔记精华部分

vue笔记精华部分vue笔记精华部分

vue笔记精华部分vue笔记精华部分

vue笔记精华部分

vue笔记精华部分vue笔记精华部分

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

 vue笔记精华部分

vue笔记精华部分vue笔记精华部分

vue笔记精华部分vue笔记精华部分

 vue笔记精华部分vue笔记精华部分递归调用判断条件

vue笔记精华部分

is属性具体html拓展的功能,component  可以用is这个属性将html扩展vue笔记精华部分

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

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

vue笔记精华部分vue笔记精华部分

 

 vue笔记精华部分vue笔记精华部分vue笔记精华部分vue笔记精华部分

vue笔记精华部分

 

相关文章: