vue路由使用以及组件扩展

最新推荐文章于 2024-12-31 10:28:26 发布

WeChat624

最新推荐文章于 2024-12-31 10:28:26 发布

阅读量335

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_71879136/article/details/127040569

版权

一、父组件传值子组件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

    <style>
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        li {
            list-style: none;
            width: 18%;
        }

        li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h2>免费课程</h2>
        <course :type="type" page-size="10"></course>
        <!-- <course type="boutique" size="5"></course> -->
        <h2>免费课程</h2>
        <course type="boutique"></course>
        <h2>免费课程</h2>
        <course type="discount"></course>
    </div>

    <template id="course">
        <div>
            <ul>
                <li v-for="item in courselist">
                    <img :src="item.coverFileUrl" alt="">
                    <div>{{item.courseTitle}} </div>
                    <div> {{item.learningNum}}</div>
                    <div>免费 </div>
                </li>
            </ul>
        </div>
    </template>

    <script>
        Vue.component('course', {
            template: "#course",
            data() {
                return {
                    courselist: []
                }
            },
            // 接受传值
            props: {
                //  自己定义接受
                type: String,
                size: Number,
                // pageSize:Number,
                // 定义多个数据类型
                // pageSize:[Number,String],
                // 设置默认值
                pageSize: {
                    type: [Number, String],
                    // default:5
                    default() {
                        return 5
                    }
                }
            },
            methods: {
                getCourseList(type = 'free', pageSize = 5, pageNum = 1) {
                    let formurl = new URLSearchParams()
                    formurl.append('type', type)
                    formurl.append('pageSize', pageSize)
                    formurl.append('pageNum', pageNum)
                    return axios.post('http://1.117.81.216:8086/weChat/applet/course/list/type', formurl)
                }
            },
            created() {
                console.log(this.pageSize);
                this.getCourseList(this.type, this.pageSize, 1).then(res => {
                    this.courselist = res.data.rows
                })

            },

        })


        const vm = new Vue({
            el: '#app',
            data: {
                type: 'free'
            },
            methods: {
            },
            beforeCreate() { },
            created() { },
            beforeMount() { },
            mounted() { },
            beforeUpdate() { },
            updated() { },
            beforeDestroy() { },
            destroyed() { },
        })
    </script>
</body>

</html>

二、子组件传值父组件
1、子组件调用父组件的方法
（1）在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
（2）子组件可以触发这个事件$emit('事件名字') 在子组件方法中： this.$emit（）
2、子组件给父组件传递数据
（1）$emit方法第二个参数可以定义子组件给父组件传递的内容
（2）在父组件中怎么拿到这内容
2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
  <div id='app'>

    <div class="container">
      <son @get="get"></son>
      <ul class="list-group">
        <li class="list-group-item" v-for="(item,index) in list" :key="index">{{item.content}}<span class="badge">评论人：{{item.name}}</span></li>
      </ul>
    </div>

  </div>
  <template id="son">
    <div>
      <div class="form-group">
        <label class="" for="">姓名：</label>
        <input type="text" v-model="name" class="form-control" id="" placeholder="Input field">
      </div>
      <div class="form-group">
        <label class="" for="">品论内容：</label>
        <input type="text" v-model="content" class="form-control" id="" placeholder="Input field">
      </div>
      <button type="submit" class="btn btn-primary" @click="btn">发布评论</button>
    </div>
  </template>

  <script>
    Vue.component('son', {
      template: '#son',
      data() {
        return {
          name: '',
          content: "",
        }
      },
      methods: {
        btn() {
          if (!this.name == '' && !this.content == '') {
            this.$emit('get', { name: this.name, content: this.content })
            this.name = ''
            this.content = ''
          } else {
            alert('请输入名字或评价内容！')
          }
        }
      }
    })
    const vm = new Vue({
      el: '#app',
      data: {
        list: []
      },
      methods: {
        get(data) {
          console.log(data);
          this.list.push(data)
          if (localStorage.length == 0) {
            localStorage.setItem('list', JSON.stringify(this.list))
          } else {
            this.list = JSON.parse(localStorage.getItem('list'));
            localStorage.setItem('list', JSON.stringify(this.list));
          }
          console.log(this.list);
        }
      },
      beforeCreate() { },
      created() { },
      beforeMount() { },
      mounted() {
        if (localStorage.getItem('list')) {
          this.list = JSON.parse(localStorage.getItem('list'));
        }
      },
      beforeUpdate() { },
      updated() { },
      beforeDestroy() { },
      destroyed() { },
    })
  </script>
</body>

</html>

三、ref的使用
1、获取dom节点
（1）.给dom节点记上ref属性，可以理解为给dom节点起了个名字。
<div ref="good">今天一点也没有学会啊</div>
<son ref="myson"></son>
（2）.加上ref之后，在$refs属性中多了这个元素的引用。
（3）.通过vue实例的$refs属性拿到这个dom元素。
 2、获取组件
（4）.给组件记上ref属性，可以理解为给组件起了个名字。
（5）.加上ref之后，在$refs属性中多了这个组件的引用。
（6）.通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id='app'>
    <div ref="good">今天一点也没有学会啊</div>
    <son ref="myson"></son>
    <button @click="btn">点击我</button>
  </div>

  <template id="son">
    <div>
      son-->{{msg}}
    </div>
  </template>
  <script>
    Vue.component('son',{
      template:'#son',
      data(){
        return{
          msg:'快速加入'
        }
      }
    })
  const vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
      btn(){
        this.$refs.myson.msg = '加入中.....'
      }
    },
    beforeCreate(){},
    created(){},
    beforeMount(){},
    mounted(){
      console.log(this.$refs.good);
      this.$refs
    },
    beforeUpdate(){},
    updated(){},
    beforeDestroy(){},
    destroyed(){},
  })
  </script>
</body>
</html>

四、Vue中路由的使用
1、什么是路由：
后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
区别：在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由
2、路由的基本使用
（1）引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
（2）创建路由new VueRouter(),接受的参数是一个对象 route[]（创建路由实例对象）
（3）在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性（创建映射关系）
（4）path属性是url的地址,component属性就是显示的组件（传组件的对象）（将路由挂载在vue上）
（5）创建的路由需要和vue实例关联一下
（6）路由到的组件显示在哪个位置<router-view></router-view>

路由重定位：redirect可以进行路由的重定向 { path:'/',redirect:'/index'}
路由的跳转
(1)、router-link标签可以设置to属性 <router-link to="/detail">去第二页</router-link>
常用：<router-link :to="{path:'/detail',query:{id:103,name:'zs'}}">去详情 </router-link>
(2)、默认是a标签，可以通过tag设置包裹标签
选中路由高亮
（1）.使用默认的样式（官方规定）直接设置.router-link-active 在style中设置
（2）.自定义样式配置 linkActiveClass:'自定义的类名' 写在创建映射关系下面 linkActiveClass:'myactive' .myactive 写在style中
通过query的方式在url后加?参数名=参数的值（query传参？后可写可不写）例：<router-link to="/detail?id=105&name=zs">去第二页111</router-link>
使用浏览器参数的方式传递参数(params传参 params后面必须写)
五、组件的嵌套
1.声明路由的时候设置children,这是children是一个数组，数组里是路由对象（写在映射对象下面）children:[ { path:'play', component:play, }, { path:'course', component:course, } ] （地址不可以加/ 加/成为同一级的了）
2.这个children的组件就会渲染在它父组件的<router-view>中（写在父组件的template中，使用to可以跳转到该子页面）
六、命名视图
1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
2.components属性设置的
3.给router-view设置名字，这个名字和components组件名字是对应的
4.设置默认值default对应组件可以设置名字也可以访问
七、计算属性和监听
1.watch：和methods平级在同一级 watch:{ value1:function(){this.value3 = this.value1 + '-' + this.value2 }, value2:function(){ this.value3 = this.value1 + '-' + this.value2 },},
2.computed ：与methods同一级属性不能和daya中相同
computed: {
value3(){
return this.value1 + '-' + this.value2
}
}
computed: {
value3: {
get: function () {
return this.value1 + '-' + this.value2
},
// 只有当自身发生改变时候才触发
set(value) {
console.log(value);
if (value.split('-' == 2)) {
this.value1 = value.split('-')[0]
this.value2 = value.split('-')[1]
}
},
}
},
3. method、computed和watch的区别
（1）.computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
（2）.methods方法表示一个具体的操作，主要书写业务逻辑；
（3）.watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体