vue-lic

通过导航栏跳转

点击对应列表项，通过路由举行跳转
active-class属性：点击router-link的内容，匹配对应样式
exact-active-class：点击router-link的内容，匹配对应样式(更精确)（这里是调解点击后笔墨的颜色）

1. <template>
2.     <div class="nav">
3.         <ul>
4.             <li v-for="(value,index) in navarr" :key="index">
5.                 <router-link :to="value.url" exact-active-class="textColor">{{ value.name }}</router-link>
6.             </li>
7.         </ul>
8.         
9.     </div>
10. </template>
11. <script>
12. export default {
13.     name:"NavDemo",
14.     data(){
15.         return{
16.             navarr:[
17.                 {name:"首页",url:"/"},
18.                 {name:"MV",url:"/mv"}
19.             ]
20.         }
21.     }
22. }
23. </script>

复制代码

跨域

Vue 应用中的跨域题目通常是由于欣赏器的同源策略引起的，它制止了一个源（origin）的网页上的JavaScript 代码请求另一个源的资源。
也就是说，只要https://www.baidu.com中https://，www.baidu，.com中有一个不一样，就会导致存在跨域题目。
解决办法：

在vue.config.js的module.exports中添加代码

1. devServer: {
2.     // 反向代理(处理跨域问题)
3.     proxy: {
4.       "/api": {  // /api表示拦截以/api开头的请求路径
5.         target: "https://www.vue-js.com/api", //目标路径
6.         changeOrigin: true, //是否开启跨域
7.         ws: false,
8.         pathRewrite: { //重写路径
9.           "^/api": ""
10.         }
11.       }
12.     }
13.   }

复制代码

这里是把有 "/api" 的路径都拦截，并把在 "/api" 前面的变成"https://www.vue-js.com/api"，这里因为自己就有/api，再添加了一个/api，所以需要去掉一个/api，也就是重写路径。
传递数据（父子组件之间）

组件之间传递数据的方式

1. 正向(向下)传递数据-->父组件给子组件通过自界说属性传递数据，子组件用props吸收
2.逆向传递数据(vue不支持逆向传递)-->子组件给父组件传递，通过$emit("变乱名",要传递的数据)自界说监听变乱
3.$refs -->获取所有的组件
4.$children 从父组件中获取所有的子组件(获取到的是一个数组)
5.$parent 通过子组件获取父组件

1. <script>
2. import OneDemo from './OneDemo.vue';
3. import TwoDemo from './TwoDemo.vue';
4. export default {
5.     name:"FuDemo",
6.     data(){
7.         return{
8.             str:"父组件的str"
9.         }
10.     },
11.     components:{
12.         OneDemo,
13.         TwoDemo
14.     },
15.     methods:{
16.         getAll(){
17.             // $refs 获取所有组件
18.             // console.log("父组件中获取所有组件：",this.$refs);
19.             // this.$refs.parentStr.innerHTML = "这是通过$refs获取到节点并修改的数据"
20.             
21.             // 获取子组件中的数据并修改
22.             // console.log(this.$refs.one.getData);
23.             // this.$refs.one.str = "在父组件中通过$refs获取到one组件并修改数据";
25.             // 调用子组件中的函数
26.             // this.$refs.one.getData();
28.             // 获取当前父组件中的所有子组件
29.             // console.log(this.$children);
30.             // 修改子组件中的数据
31.             // this.$children[1].str = "通过$children获取到two组件并修改数据"
33.             // console.log(this.$refs.two.$parent);
34.             this.$refs.two.$parent.str = "自己修改自己的数据";
35.         }
36.     }
37. }
38. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。