localStorage统计用户浏览次数&父子组件传参。例

简单了解一下

localStorage统计用户浏览次数

• 在vue页面中加载

mounted() {
    		#如果在页面刷新的次数显示 NaN，则先存入count次数，localStorage.setItem('count',0)
    		localStorage.setItem('count',0)        #存成数字类型，之后再执行下面的
    		#声明count变量，从localStorage中获取count
            var count = localStorage.getItem('count')
    		#判断如果为空或者为空字符串
            if(count==null || count== ""){
            #条件满足后，默认给localStorage存入 1 
                localStorage.setItem('count',1)
            }else {
            # 每次浏览时count累加
                count = parseInt(count) + 1
            #累加后的count存入localStorage
                localStorage.setItem('count',count)
            }
    		#最后把count 赋值给一个变量，用{{}}形式显示出来
            this.showcount = count
      }
     

简单了解一下，例

vue父子组件传参方式

• 1、父组件

#父组件
//  <footer1 :goods_name="goods_username"></footer1>-------------->传递参数----重要
//  props:['goods_name']    接收参数
<template>
    <div id="goods">
    <h1>我是父组件,首页，菜单</h1>
        <a href="javascript:viod(0);" @click="goods_id(1)">水果</a>
        <a href="javascript:viod(0);" @click="goods_id(2)">电器</a>
        <a href="javascript:viod(0);" @click="goods_id(3)">家具</a>
        <input type="text" v-model="goods_username">
        <footer1 :goods_name="goods_username" aa="小明" bb="小花"></footer1>
    </div>
</template>

<script>
    //导包----嵌套导包
    import Addgoods from '@/components/addgoods'
    export default {
        name: "goods",
        data:function(){
            return{
                goods_username:'1111'
            }

        },
        //声明把子组件嵌套进来
        components:{
            footer1:Addgoods,
        },
 
        methods:{
            goods_id:function (gid) {
                this.goods_username = gid
            }
        },
         mounted() {
            //读取接口获取所有分类
            this.axios({
                url:'/api/api/cate/',
                method:'post',
                data:{}
            }).then((res)=>{
                console.log(res)
                if(res.data.code==200){
                //从后台获取数据
                    this.cate_list = res.data.message
                }
            }).catch((err)=>{
                console.log(err)
            })
        }
    }
</script>

• 子组件

<template>
    <div id="addgoods">
        我是字组件
        {{goods_name}}
        {{aa}}---{{bb}}
    </div>
</template>

<script>
    export default {
        name: "addgoods",
        //goods_name相对应，props接收
        props:['goods_name','aa','bb']----重要
    }
</script>

<style scoped>

</style>

• 子组件---------渲染数据

#用监听不同变化的属性值   渲染数据
watch:{
            goods_name:function () {
                this.axios({
                    url:'/api/api/cart/',
                    method:'post',
                    data:{'cid':this.goods_name}
                }).then((res)=>{
                    console.log(res)
                    if(res.data.code==200){
                    //拿到数据赋值
                        this.cart_list = res.data.message
                    }
                }).then((err)=>{
                    console.log(err)
                })
            }
        }