vue笔记精华部分

  • Z时代
  • 2024-01-10
  • 分类：综合

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这个属性
以上是 vue笔记精华部分 的全部内容，
                        来源链接：
                            utcz.com/z/379627.html
回到顶部