最小文件集成:文件夹: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>'
######## 命名路由