(1)父子组件的使用:
*父和子,使用的父组件,被用的是子组件
*父需要引入子组件然后声明子组件
import 子组件对象 from './xxx.vue'----引入子组件
.......在javascript中.....
{
components:{
组件名称:子组件对象
}
}
(2)全局组件的使用
*在main.js中引入一次;----import 组件对象 from './xxx.vue';
*vue.component('组件名','组件对象');
这样所有的组件都可以通过组件名直接使用全局组件。
(3)父组件传值给子组件
假设父组件中用了一个子组件,如下:
<header-vue></header-vue>
那么父组件如何传值给子组件:
*<header-vue textone="要传的值"></header-vue>
*子组件需要接受:在....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的属性(一个对象)
例如:
<div>
<input type="text" v-model="contxt"/>
{{contxt|myFilter}}
</div>
<script>
export default{
data(){
return{
contxt:''
}
}
filters:{
myFilter:function(value){
return contxt+"123";
}
}
}
</script>
*全局过滤器: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
<router-link :to="{name:'myhome'}">进入我的首页</router-link>