vue总结2

vue

一.过滤器

content | 过滤器 ,vue没提供过滤器 ,可自己定义;

组件内过滤器就是options中的一个filters属性(一个对象),多个key就是多个过滤器名,多个value就是过滤器方法体;

全局:范围大,权利小; 组件内:当过滤器名相同时权力大,范围小; 如图 :

二.获取DOM元素

created(){} :组件创建后,数据已经初始化,但是DOM还没生成;

mounted(){} :数据装载DOM上后,各种数据已经到位,将数据渲染到DOM上,DOM已经生成;

操作方法 元素上加ref="myDiv" 需要操作的方法上(一般mounted) this.$refs.myDiv;

组件对象获取DOM this.$refs.sun(也是组件对象).$el


三.mint-ui

饿了么,element-ui ,在PC端使用的,对应的移动端版本mint-ui;


四.路由(vue-router)

前端路由,核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据;

vue中模板数据通过调用函数获取到模板内容,不用发请求;

使用方式:

1.下载;

2.在main.js中引入;

3.安装(vue.sue(插件));

4.创建路由对象并且配置路由规则;

let router=new vuerouter({

    routes:[{path:'/home',component:home}]

})

5.将其路由对象传递给vue的实例对象,options中(router:router);

6.留坑 <router-view></router-view>;由穿参数

vue-router 中挂在了两个对象的属性

$router(函数功能);$route(数据信息) 例如:console.log(this.$route.params)

字符串穿参数 path 不用改   ;path 穿参数 "/detail/:id"

前端路由核心原理:锚点值的改变,图:

路由配置 如图:

路由总结 如图:

编辑导航传参总结:

编辑导航传参 例子:


五.vue的核心插件:

vue-router,vuex(管理全局共享数据);

以上是 vue总结2 的全部内容, 来源链接: utcz.com/z/375344.html

回到顶部