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>'

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