vue-lic
通过导航栏跳转点击对应列表项，通过路由举行跳转
active-class属性：点击router-link的内容，匹配对应样式
exact-active-class：点击router-link的内容，匹配对应样式(更精确)（这里是调解点击后笔墨的颜色）
<template>
<div class="nav">
<ul>
<li v-for="(value,index) in navarr" :key="index">
<router-link :to="value.url" exact-active-class="textColor">{{ value.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name:"NavDemo",
data(){
return{
navarr:[
{name:"首页",url:"/"},
{name:"MV",url:"/mv"}
]
}
}
}
</script> 跨域
Vue 应用中的跨域题目通常是由于欣赏器的同源策略引起的，它制止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。
也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域题目。
解决办法：
在vue.config.js的module.exports中添加代码
devServer: {
// 反向代理(处理跨域问题)
proxy: {
"/api": {// /api表示拦截以/api开头的请求路径
target: "https://www.vue-js.com/api", //目标路径
changeOrigin: true, //是否开启跨域
ws: false,
pathRewrite: { //重写路径
"^/api": ""
}
}
}
} 这里是把有 "/api" 的路径都拦截，并把在 "/api" 前面的变成"https://www.vue-js.com/api"，这里因为自己就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
传递数据（父子组件之间）
组件之间传递数据的方式
1. 正向(向下)传递数据-->父组件给子组件通过自界说属性传递数据，子组件用props吸收
2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("变乱名",要传递的数据)自界说监听变乱
3.$refs -->获取所有的组件
4.$children 从父组件中获取所有的子组件(获取到的是一个数组)
5.$parent 通过子组件获取父组件
<script>
import OneDemo from './OneDemo.vue';
import TwoDemo from './TwoDemo.vue';
export default {
name:"FuDemo",
data(){
return{
str:"父组件的str"
}
},
components:{
OneDemo,
TwoDemo
},
methods:{
getAll(){
// $refs 获取所有组件
// console.log("父组件中获取所有组件：",this.$refs);
// this.$refs.parentStr.innerHTML = "这是通过$refs获取到节点并修改的数据"
// 获取子组件中的数据并修改
// console.log(this.$refs.one.getData);
// this.$refs.one.str = "在父组件中通过$refs获取到one组件并修改数据";
// 调用子组件中的函数
// this.$refs.one.getData();
// 获取当前父组件中的所有子组件
// console.log(this.$children);
// 修改子组件中的数据
// this.$children.str = "通过$children获取到two组件并修改数据"
// console.log(this.$refs.two.$parent);
this.$refs.two.$parent.str = "自己修改自己的数据";
}
}
}
</script>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]