zoukankan      html  css  js  c++  java
  • HM.DAY-02

    ##### 复习

    *vue 单文件方式 xxx.vue

    *1.准备好配置文件 package.json(包描述文件&&封装命令npm run dev)+

    webpack.config.js文件(打包的配置文件)

    *2.创建index.html(单页应用的页)

    *3.创建mian.js(入口文件)

    *4.引入vue和相关的文件xxx.vue

    *5.new Vue(options)

    *6.options:

      -data

      -methods

      -components(组件内的声明子组件)

      -props

    *7.实例:

      -在组件内(xxx.vue)中的this

      -new Vue()

      -事件

        +this.$on(事件名,回调函数(参数))
        +this.$once(事件名,回调函数(参数)就触发一次)
        +this.$off(事件名);取消事件

    *8.全局

      -Vue.component('组件名',组件对象) 在哪里都可以使用

    *9组件传值

      -父传子:属性作为参数

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

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

        +先停车到父组件, on一下
        +再开车到子组件,如果需要的话,emit一下,触发上述时间的回调函数
    ###### 今日重点
    *vue组件的使用
    *组件间通信
    *vue-router使用
    *vue-resource发起http请求
    *axios
    ###### 过滤器
    *content|过滤器,vue中没有提供相关的内置过滤器,可以自定义过滤器
    *组件内的过滤器+全局过滤器
    -组件内的过滤器就是options中的一个filters的属性(一个对象)
    +多个key就是不同的过滤器名,多个value就是与key对应的过滤方式函数体
    -Vue.filter(名,fn)
    *输入的内容帮我做一个反转
    *例子:父已托我帮你办点事
    *总结
    -全局:范围大,如果出现同名时,权利小
    -组件内:如果出现同名时,权利大,范围小
    ###### 获取DOM元素
    *救命稻草,前端框架就是为了减少DOM操作,但是特定情况下,也给你留了后门
    *在指定的元素上,添加ref="名称A"
    *在获取的地方加入this.$refs.名称A
    -如果ref放在了原生的DOM上,获取的数据就是原生的DOM对象
    +可以直接操作
    -如果ref放在了组件对象上,获取的就是组件对象
    +1.获取到DOM对象,通过this.$refs.sub.$el,进行操作
    对应的事件
    +created 完成了数据的初始化,此时还未生成DOM,无法操作DOM
    +mounted将数据已经装载到了DOM之上,可以操作DOM
    ###### mint-ui
    *饿了么,element-ui 在PC端使用
    *移动端版本,mint-ui
    *http://mint-ui.github.io/#!/zh-cn
    ###### wappalyer
    *获取到当前网站的使用的技术
    ###### vue-router
    *所用前端路由,核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
    *ui-router:锚点值改变,如何获取模板?ajax
    *vue中,模板数据不是通过ajax请求来的,而是调用函数获取到模板内容
    *核心:锚点值改变
    *以后看到vue开头,就知道必须Vue.use
    *vue的核心插件:
    -vue-router路由
    -vuex管理全局共享数据
    *使用方式
    -1:下载'npm i vue-router -S'
    -2:在mian.js中引入
    -3:安装插件'Vue.use(插件)'
    -4:通过路由对象并配置路由规则
    +'let router=new VueRouter({routes:[{path:'/home',component:Home}]});'
    -5:将其路由对象传递给Vue的实例,options中
    +options中加入'router:router'
    -6.:在app.vue中留坑:<router-view></router-view>

    ###### 命名路由

  • 相关阅读:
    linux性能测试(转)
    mysql基本操作(数据库,表,字段,记录)
    mysql数据库的简介(安装和卸载)
    mysql数据库
    枚举法
    python数据结构与算法简介
    自学心得
    python 进程线程阅读摘抄
    python并发编程多线程基础1
    python队列
  • 原文地址:https://www.cnblogs.com/77yaer/p/10078236.html
Copyright © 2011-2022 走看看