vue学习笔记

(1)父子组件的使用：

*父和子，使用的父组件，被用的是子组件

*父需要引入子组件然后声明子组件

import 子组件对象  from './xxx.vue'----引入子组件

.......在javascript中.....

{

components:{

组件名称：子组件对象

}

}

(2)全局组件的使用

*在main.js中引入一次；----import 组件对象  from './xxx.vue';

*vue.component('组件名','组件对象');

这样所有的组件都可以通过组件名直接使用全局组件。

(3)父组件传值给子组件

假设父组件中用了一个子组件，如下：

那么父组件如何传值给子组件：

*

*子组件需要接受：在....javascript....中

export default{

data(){

},

//接受父组件的参数

props:['textone']

}

(4)看文档对象分类

*全局的代表Vue.的

*实例的代表this.或者new Vue().

*选项代表new Vue()的参数或者export default里边的属性

(5)子向父组件通信(vuebus)(扩展)

*通过new Vue()这样的一个对象，来$on('事件名称',fn(prop1,pro2))

*另一个组件引入同一个vuebus,来$emit('事件名称',fn(prop1,pro2))

(6)过滤器

*过滤器的使用：content|过滤器

*过滤器分组件内过滤器和全局过滤器

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

例如：

{{contxt|myFilter}}

*全局过滤器：Vue.filter(过滤器名,fn);----在main.js中创建。

(7)获取DOM原始

(8)mint-ui

*mint-ui是饿了么弄得移动端ui

*element-ui是饿了么弄得pc端ui

(9)vue-router

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

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

*vue的核心插件：

- vue-router  路由

- vuex 管理全局共享数据

*使用方式

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

-2:在main.js中引入

-3:安装插件 `Vue.use(插件)`

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

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

如下：

//引入

import VueRouter from 'vue-router'

//安装插件

Vue.use(VueRouter);

//创建路由对象并配置路由规则

let router=new VueRouter({

routes:[

{name:'myhome',path:'/home',component:Home}

]

})

//给vue实例传值

new Vue({

el:"#app",

router:router

})

(10)router-link

进入我的首页