vue基础-day06

最新推荐文章于 2024-11-13 16:32:25 发布

小小穆子

最新推荐文章于 2024-11-13 16:32:25 发布

阅读量164

点赞数

本文链接：https://blog.youkuaiyun.com/m0_52618824/article/details/118329167

版权

一、sessionstorage，localstorage和cookie之间的区别

共同点：都是保存在浏览器端，且同源的。
不同点：
1、存储大小不同
webStorage存储大小有限制，可达5M或更大；cookie存储数据不能超过4K
2、数据有效期不同
webStorage始终有效，窗口或浏览器关闭也一直保存；cookie只有设置的cookie过期时间之前一直有效
3、事件通知机制
webStorage支持事件通知机制，而cookie则不支持
4、API接口
webStorage自带一些API接口，可以调用，而cookie没有
(1)、localStorage 对象
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
(2)、sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

二、组件的嵌套

1.声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2.这个children的组件就会渲染在它父组件的<router-view>中
代码实例：

<!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/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id='app'>
        <!-- 展示预留区域 -->
        <router-view></router-view>
    </div>
    <template id="father">
        <div>这是父组件
            <router-view></router-view>
        </div>
    </template>
    <template id="son">
        <div>这是子组件</div>
    </template>
    <template id="son2">
        <div>这是子组件22222222222</div>
    </template>
    <script>
        let son = {
            template: "#son",
        };
        let son2 = {
            template: "#son2",
        };
        let father = {
            template: "#father",
        };
        const router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/home"
                },
                {
                    path: "/home",
                    component: father,
                    //组件嵌套
                    // 这就是用相对路径，相对于父组件的，这个实际路径就是/home/son
                    children: [
                        {
                            //不加/
                            path: "son",
                            component: son,
                        },
                        // 这就是用相对路径，相对于父组件的，这个实际路径就是/home/son2
                        {
                            path: "son2",
                            component: son2,
                        }
                    ]
                },

            ]
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            router,
        });
    </script>
</body>

</html>

三、命名视图

1.我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
2.components属性设置的
3.给router-view设置名字，这个名字和components组件名字是对应的
4.设置默认值default对应组件可以设置名字也可以访问
代码实例：

<!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/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id='app'>
        <router-view></router-view>
        <router-view name="son1"></router-view>
        <router-view name="son2"></router-view>
        <router-view name="son3"></router-view>
    </div>
    <template id="father">
        <div>
            fatherrrrrrrrrrrrrrrr
            <!-- <router-view></router-view> -->
        </div>
    </template>
    <template id="son">
        <div>
            sonononnnnnnnnnn
        </div>
    </template>
    <template id="son1">
        <div>
            son111111111111111111
        </div>
    </template>
    <template id="son2">
        <div>
            son2222222222222222
        </div>
    </template>
    <template id="son3">
        <div>
            son33333333333333333
        </div>
    </template>

    <script>
        let son={
           template:"#son"
        };
        let son1={
            template:"#son1"
        };
        let son2={
            template:"#son2"
        };
        let son3={
            template:"#son3"
        };
        let father={
            template:"#father"
        };
        const router=new VueRouter({
            routes:[
                {
                    path:"/",
                    redirect:"/home"
                },
                {
                    path:"/home",
                    components:{
                        default:father,
                        son1:son1,
                        son2,
                        son3,
                    },
                    children: [
              // 不加/
              {
                path: "son",
                component: son,
              },
            ],
                }
            ]
        });
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        router,
    })
    </script>
</body>
</html

四、计算属性和监听器

名称案例
1.获取完整的名字，需要把姓和名字拼接在一起
2.什么时候去拼接在一起（input值改变的时候）
监听keyup知道input什么时候改变了，在这里就可以获取完整的名字
Wacth用法
监听data中属性的改变：
代码案例：

<!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/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id='app'>
        <input type="text" v-model:value="firstname">+
        <input type="text" v-model:value="lastname">
        <button>=</button>
        <input type="text"v-model:value="allname">
    </div>


    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstname:"",
            lastname:"",
            allname:"",
        },
        methods: {
            // getallname(){
            //     this.allname=this.firstname+this.lastname;
            // },
        },
        watch:{
            // 参数是属性
            // 第一个参数是新数据，第二个参数是旧数据
            "firstname":function(newVal, oldVal){
                this.allname=newVal+"-"+this.lastname;
            },
            "lastname":function(newVal, oldVal){
                this.allname=this.firstname+"-"+newVal
            },
        },
    })
    </script>
</body>
</html>

Computed用法
默认只有getter的计算属性
代码实例：

<!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/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id='app'>
        <input type="text" v-model:value="firstname">+
        <input type="text" v-model:value="lastname">
        <button>=</button>
        <input type="text"v-model:value="allname">
    </div>


    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            firstname:"",
            lastname:"",
            // allname:"",
        },
        methods: {
        },
    
         // 计算属性； 特点：当计算属性中所有的任何一个 data 属性改变之后，
        //  都会重新触发本计算属性的重新计算，从而更新 allName 的值
        computed:{
            allname:{
                get:function(){
                    console.log(999);
                    return this.firstname+"-"+this.lastname;
                },
                set:function(newVal){
                    console.log(newVal);
                    // split("-"):以"-"切割字符串
                    console.log(newVal.split("-"));
                    this.firstname=newVal.split("-")[0]
                    this.lastname=newVal.split("-")[1]
                }
            }
        }

    })
    </script>
</body>
</html>

五、method、computed和watch的区别

1.computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2.methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体