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>

###### 命名路由