• vue基础笔记


    最小文件集成:文件夹:components   其他:index.html、mian.js、package.json、webpackconfig.js  

    ##### 组件通信

    组件传值:

    父传子:属性作为参数

      常量:title="xxx" 子组件声明接收参数 props:['xxx']

      变量:title="num" 子组件声明接收参数 props:['xxx']

    子传父:vuebus同一个线路上

      先停车到父组件,on一下

      再开车到子组件,如果需要的话,emit一下,触发上述时间的回调函数

    ###### 过滤器

    *content | 过滤器 ,vue中没有提供相关的内置过滤器,可以自定义过滤器

    *组件内的过滤器+全局过滤器(在mian.js文件中配置声明)

      - 组件内过滤器就是options的一个filters的属性(一个对象)

        +多个key就是不同过滤器名,多个value就是与key对应的过滤方式函数体

      - Vue.filter(名,fn)

    *输入的内容帮我做一个反转

    *例子:父已托我帮你办点事

    *总结:

      - 全局:范围大,如果出现同名时权利小

      - 组件内:如果出现同名时,权利大,范围小

    ###### 获取DOM元素

    *救命稻草,前端框架就是为了减少DOM操作,但是特定情况下,也给你留了后门

    *在指定的元素上,添加ref="名称"

    *在获取的地方加入this.$refs.名称A

      - 如果ref放在了原生的DOM上,获取的数据就是原生DOM对象

        +可直接操作

      - 如果ref放在了组件对象上,获取的就是组件对象

        +获取到DOM对象,通过this.$refs.sub.$el,进行操作

      - 对应的事件

        +created完成了数据的初始化,此时还未生成DOM,无法操作DOM

        +mounted将数据已经装载到了DOM上,可以操作DOM

    ####### mint-ui

    *组件库

    *饿了么出品,element-ui 在PC端使用

    *移动端版本 mint-ui

    https://mint-ui.github.io/#!/zh-cn

    *注意:

      -如果全部安装的方式

        +1:在template中可以直接使用组件标签

        +2:在script中必须声明,也就是引入组件对象(按需加载)

    ####### wappalyer

    *获取到当前网站的使用的技术

    *http://wappalyzer.com/download

    ####### vue-router

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

    *ui-router:锚点值改变,如何获取模板?ajax

    *vue中,模板数据不是通过ajax请求来,而是调用函数取到模板内容

    *核心:锚点值改变

    *以后看到vue开头,就知道必须vue.use

    *vue的核心插件:

      - vue-router路由

      - vuex 管理全局共享数据

    *使用方式

      - 1:下载'npm i vue-router -S'

      - 2:在mian.js 中引入'import VueRouter from 'vue-router '; '

      - 3:安装插件'Vue.use(VueRouter);'

      - 4:创建路由对象并配置路由规则

        + 'let router=new VueRouter({routes:[path:'/home',component:Home]});'

      - 5:将其路由对象传递给Vue的实例,options中

        + options中加入'router:router'

      - 6:留坑app.vue中留坑'<router-view></router-view>'

    ######## 命名路由

      

  • 相关阅读:
    企业——Zabbix分布式服务监控平台添加监控服务(http、nginx、mysql)
    企业——Zabbix proxy分布式监控配置
    企业——Zabbix Agent Active 主动模式监控
    Linux背背背(4)vim操作
    Linux背背背(3)
    Linux背背背(2)
    如何防止远程提交?
    PHP常用的转义函数
    本博客点击页面,浮出文字的特效
    华硕R系列的解剖图
  • 原文地址:https://www.cnblogs.com/77yaer/p/10049736.html
Copyright © 2020-2023  润新知