目录
1.组件
1.什么是组件:
在vue中,就是我们自定义的一个html标签,一堆代码的打包,可以复用
2.能够干什么事情:
可以复用
3.分类:
全局组件和局部组件最大的区别:在于作用域,全局组件是可以被所有挂载vue的标签使用,
局部组件只能在当前挂载的标签中使用.
使用步骤:
①:定义
②:使用
注意事项:
①:template中的标签,必须有一个根节点.<h1></h1>
②:组件命名:使用驼峰式不行的,建议直接使用全小写;或者单词之间使用-:wb-component
尽量使用英文.
③:组件的data必须使用函数.
④:methods和vue对象中的使用方式时一样的
4.模板---->在组件中使用
模板定义的两种方式:
①:直接在html中写:
<template id="">html代码</template>
②:一个js:
<script type="text/template" id="">html代码</script>
语法:
全局组件:
定义语法: Vue.component("componentName",{template:"html内容"});
完整定义:
Vue.component("wb-xxx",{
template:"<div><p>你是第二p{{cd}}{{name}}{{sayHello('666')}}</p><p>你是p3</p></div>",
data:function(){
// return返回:返回的是json,以前的data是怎么写,这个的json就怎么写
return {"cd":"组件","name":"yyn"};
},
//methods和vue对象中的使用方式时一样的
methods:{
sayHello:function(n){
alert(n)
}
}
});
使用:<componentName></componentName>
局部组件:某个vue对象中,只有这一个vue对象中使用:
new Vue({
el:"",
data:{},
components:{
"com1":{
template:"",
data:function(){
return {};
},
methods:{
funName1:function(){
},
funName2:function(){
}
}
}
}
});
2:路由:
1.什么是路由:
url地址和对应的资源映射关系处理,地址和资源唯一映射的.
2.为什么需要:
3.怎么搞:
由于路由不是vue官方的,是第三方插件,单独下载资源;
路由是在vue上玩,肯定需要vue的环境;
引入路由的依赖;
路由也想成一个标签:是对地址和资源的映射:有地址和资源;
路由的目的:是点击地址,找到对应的资源:资源要在页面显示,所以,你应该告诉他在哪里显示;
4.具体步骤:
①:定义一个路由
path:地址,component:组件
②:把这个路由挂载在一个Vue对象上
③:在挂载了Vue的html标签中使用路由:
<router-link to="">好啊</router-link>
<router-view ></router-view>