App.vue 文件:
router-view标签
的作用是会将其他页面 的 < template> 标签里的内容放在这个标签里,从而实现无刷新的路由跳转
;
组件
1.0、按钮 props:
<template>
<button class="qui-btn">
<span>{{msg}}</span>
</button>
</template>
<script>
export default {
data:function(){
return {
msg:'下载'
}
}
}
</script>
<style scoped>
@import './css/reset.import.css';
</style>
分析: | |
---|---|
1.0、当 button 组件初始化时,msg 自定义属性会绑定到 {{msg}} 中, {{}} - 指模板化前端代码; | |
2.0、如果不是组件,正常的写法可以是 data: {msg: ‘下载’},但是组件是会在多处地方引用到的,JS中直接共享对象会造成引用传递,也就是说修改了msg后所有按钮的msg都会跟着修改,所以这里用function来每次返回一个对象实例 ; | ———— |
3.0、然后在页面中调用组件 : < qui-btn msg=“确定” class=“small”></ qui-btn> |
实现 3.0 需要,属性的接口暴露只需要写在prosp里面就可以:
<script>
export default {
props: {
msg: {
default: '下载'
}
}
}
</script>
在组件中
,props是专门用来暴露组件的属性接口的。
把属性写在props里面,就可以暴露给其他页面调用了;
2.0、按钮 slot 插入图片:
组件.vue 页面:
<template>
<button class="qui-btn" v-on:click="btnClickEvent">
<slot name="icon"></slot> <!--重点在这里,引入图片-->
<span>{{msg}}</span>
</button>
</template>
关键字slot并赋予一个name值,页面引用:
<qui-btn msg="下载" class="with-icon">
<img slot="icon" class="ico" src="xxx.png" />
</qui-btn>
分析: | |
---|---|
1.0、img上有个关键字slot="icon" 对应组件中的 name="icon" ,渲染的时候,会将img整个替换掉组件中的对应name的标签 | ———— |
3.0、for 循环:
v-for 关键字
<template>
<div class="qui-nav nav-type-1">
<!--关键代码 v-for -->
<a v-for="(item, index) in items" :class="[commonClass,item.active ? activeClass : '']" v-on:click="navClickEvent(items,index)" >
<span class="nav-txt">{{item.text}}</span>
</a>
</div>
</template>
<script>
export default {
data:function(){
return {
commonClass:'nav-item',
activeClass:'active',
items:[
{
text: '首页',
active : true
},
{
text: '列表',
active : false
},
{
text: '关于',
active : false
},
{
text: '招聘',
active : false
}
]
}
},
methods:{
navClickEvent:function(items,index){
/*默认切换类的动作*/
items.forEach(function(el){
el.active = false;
});
items[index].active = true;
/*开放用户自定义的接口*/
this.$emit('navClickEvent',items,index);
}
}
}
</script>
1、····················
拆分分析1:(v-for="(item,index) in items") | 数据循环部分 |
---|---|
1.0、items是我们在data里面定义的对象 | |
1.1、v-for="(item,index) in items" —— 暴露了 item 和 index 两个接口,这是Vue提供的 | —————— |
2.0、代表 items 中的每一项 以及 该项对应的下标 (注意是下标,也可自定义),接着我们就可以在标签中使用绑定{{item.text}}了 | |
3.0、这里 data 用到了 function() |
2、····················
拆分分析2 -( :class="[commonClass,item.active ? activeClass : ‘’]" ): | 添加class |
---|---|
1.0、:class给组件绑定一个class属性(类似jQuery中的attr方法),这里的写法是缩写,它的全拼应该是v-bind: (又一个v-XXX写法) | —————— |
1.2、:class=XXX 和 class=XXX 的区别在于不带冒号的是静态的字符串绑定,带冒号的是动态的变量绑定 | |
—— | |
2.0、给class绑定了一个数组,先看第一个元素 commonClass 变量,这个变量在data中定义,默认样式类’nav-item’ | |
2.1、数组的第二个元素是JS的三目运算符 item.active?activeClass:'' | |
2.1.1、意思是当每个item中的active值为true时,绑定activeClass变量对应的类,如果为false,则为空 | |
2.2、最后的结果是当item.active为true时候,tab的class值为’nav-item active’,当为false,就只有’nav-item’ |
3、····················
拆分分析3: | 添加点击事件 |
---|---|
1.0、利用for循环给每个a标签绑定了一个click事件 | |
2.0、对应methods中定义的navClickEvent,接收两个参数items和index | —————— |
3.0、当点击的时候,把items中的每个item.active置为false,把当前的tab的active值置为true,这样就可以动态切换active类了 |
this.$emit(‘navClickEvent’,items,index); - $emit()为了触发父级的事件,因为方法挂载到了子组件上所以方法内的this指向的是子组件
其实它的作用就是触发自定义函数,也叫触发机制,父组件监听,子组件触发
引用方(父组件)就可以给不同子组件(引用组件页面)调用不同的事件处理了
<template>
<div id="pageQuiNav">
<qui-nav v-on:navClickEvent="dosth"></qui-nav>
</div>
</template>
<script>
import quiNav from '../components/quiNav.vue'
export default {
name: 'pageQuiNav',
components: {
'qui-nav': quiNav
},
methods:{
dosth:function(items,index){
console.log(items[index].text + index);
}
/* 调用不同的事件处理:
methods: {
doSth1: function(){
alert('111');
},
doSth2: function(){
alert('222');
}
}
*/
}
};
</script>
具体分析:
1、上面的代码在引用组件的时候,注册了一个事件,这个 navClickEvent 事件是之前我们在 导航组件
中绑定到 a标签 的click事件中的,然后在 引用组件页面我们给这个事件一个自定义的方法doSth
,同时,在script中声明这个自定义的方法;
2、专业一点的说,$ emit() 这种做法叫做监听,由引用方(暂且叫做父组件)监听子组件的内置方法;同时在子组件中,需要触发这个事件,所以就有了组件中 this.$emit('navClickEvent',items,index); 这行代码
;