Vue.js复习

最新推荐文章于 2023-12-23 15:25:49 发布

HSL521224

最新推荐文章于 2023-12-23 15:25:49 发布

阅读量448

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_69270668/article/details/129306933

版权

一、vue.js的基本使用

1.首先导入vue.js

在script中导入vue.js

2. 准备好界面

3.实例化一个vue，并且将这个界面交给vue管理。

el属性：找到某个盒子，并把他交给vue管理。

data属性：vue里放数据的地方。

二、插值语法

语法：{{ 表达式 }}

表达式：变量名或任意表达式；算数表达式，比较表达式，逻辑表达式，三元表达式...

作用：输出表达式的结果

注意：不能写语句（分支语句、循环语句）

补充：插值语法，也被叫做胡子语法

三、Vue的生命周期

1、什么是Vue的生命周期

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期

2、生命周期和生命周期钩子的关系

生命周期钩子 = 生命周期函数 = 生命周期事件

3、主要的生命周期函数分类：

1.创建期间的生命周期函数：

1.beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性

2.created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板

3.beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中

4.mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

2.运行期间的生命周期函数：

5.beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点

6.updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

3.销毁期间的生命周期函数：

7.beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

实例：

打印结果如下：

四.Vue.js中的挂载

1.定义：虚拟DOM与真实DOM建立关系，让Vue实例控制页面中某个区域的过程，称之为挂载。

2.方式：通过“ el：‘css选择器’ ”语句进行配置。

3.过程：虚拟DOM，即一堆对象存储了一堆数据，然后这些数据用JS的API，比如createElement，创造出DOM，这个过程是挂载前的动作。

创造出的DOM还没有被使用，仅仅在内存中，需要“挂载”。当最外层有一个叫app的id的DOM，挂载就是document.querySelector(“app”).appendChild(dom)，即完成挂载。

【虚拟DOM】

1.虚拟DOM是为了解决浏览器性能问题而被设计出来的。

2.虚拟DOM，用普通JS对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。

五、条件渲染语句v-if和v-show

1、v-if

1.在vue中，“v-if”用于根据表达式的真假来操作DOM元素，可以切换元素的显示和隐藏；表达式的值为true时，元素存在于dom树中，表达式为false时，元素从dom树中移除，语法为“v-if="表达式"”。

2.v-if的使用

2、v-show

1.w-show指令的作用是根据真假切换元素的显示状态，原理是修改元素的display实现显示隐藏，指令后面的内容，最终都会解析为布尔值，值为true元素显示,值为false元素隐，数据改变之后，对应元素的显示状态会同步更新

2.v-show的使用

点击切换状态显示/隐藏

3、v-if和v-show的区别

【v-show】

1.本质就是标签display设置为none,控制隐藏。只是基于css进行切换。

2.v-show有更高的初始渲染消耗。

3.v-show适合频繁切换的情况。

【v-if】

1.动态的向DOM树内添加或者删除DOM元素。

2.v-if有更高的切换消耗。

3.v-if适合运行条件很少改变的情况。

true

false

六、列表演染指令v-for

使用 v-for 指令把数组的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组， item 是数组元素迭代的别名

1、v-for遍历数组

2、v-for遍历对象

3、v-for遍历数字

4、v-for中的key

现象:当我勾了小红,然后在下标1的位置添加了赵六,结果发现勾给了赵六,小红自己没勾了。

原因:v-for会尝试最大限度的复用当前元素，导致状态绑定错乱。

解决:在v-for后加上一个key属性,key绑定这个数据的唯一值(一般是id,不能是字符串和数字类型)。

七、计算属性和侦听器

1、计算属性

可以在里面写一些计算逻辑的属性。

他不像普通函数那样直接返回结果,而是经过一系列计算之后再返回结果。

同时只要在它当中应用了data中的某个属性，当这个属性发生变化时,计算属性可以嗅探到这种变化,并自动执行

定义:要用的属性不存在,通过已有属性计算得来。

使用:在computed对象中定义计算属性,在页面中使用{{方法名}}来显示计算的结果。

【基本结构】

计算属性的基本使用

2、侦听器

1.侦听器的基本结构

<script>
        //侦听器
        //作用:用来侦听数据有没有变化，一旦有变化就调用函数。
        //语法：在和data、methods 这些平级的位置写一个watch
        new Vue({
            el:'',
            data:{},
            methods:{},
            //侦听器
            watch:{
                //参数一：改变后的值。
                //参数二：改变前的值。
                要侦听的数据(newValue,oldValue){
                    
                }
            }
        })
    </script>

2.侦听器的基本使用

<body>
    <div id="app">
        <button @click=" msg = '你坏'">修改msg的值</button>
        <p>{{ msg }}</p>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'你好'
            },
            //写侦听器的地方
            watch:{
                //侦听的数据变化
                //基本数据类型，这两个参数有意义。
                msg(newValue,oldValue){
                    console.log('数据改变了',newValue,oldValue);
                }
            }
        })
    </script>
</body>

3.侦听器在数组中的使用

<body>
    <div id="app">
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
        <button @click="list.push('大鱼海棠')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                list:['龙猫','名侦探柯南','千与千寻','你的名字']
            },
            watch:{
                //复杂数据类型，这两个参数没有意义，因为地址没变。
                //所以复杂类型中，一般不会写两个参数，因为这两个参数的值是一样的，就算写也只写一个。
                list(newValue,oldValue){
                    console.log('数据改变了',newValue,oldValue);
                },
            }
        })
    </script>
    
</body>

<body>
    <!--
    【对数组进行侦听】
    数组是应用类型,存在比较复杂的侦听规则。
    从理论上说，修改一个数组的内容，比如修改数组中某个元素的值,或者给数组添加新的元素,都不会修改数组本身的地址。
    为此.Vue.is对数组做了特殊处理,使得使用标准的数组操作方法对数组所做的修改,都可以被侦听到。

    1.Vue不能检测以下数组的变动:
    a.当你利用索引值直接设置一个数组时,例如:vm.items[index0fItem] = newValue 
    b.当你修改数组的长度时,例如:vm.items.length = newlength

    2.使用标准方法修改数组可以被侦听到
    https://v2.cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B 
    push() 尾部添加 
    pop()尾部删除
    unshift()头部添加 
    shift()头部删除
    splice()删除、添加、替换 
    sort()排序 
    reverse()逆序
    (Vue将被侦听的数组的变更方法进行了包裹,所以它们也将会触发视图更新,以上就是被包裹的方法。)
     -->
    <div id="app">
        <button @click="list.push('蜡笔小新')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!-- 利用索引值改变数组时,不能被侦听到。 -->
        <button @click="list[0] ='病猫'">修改第一项</button>
        <button @click="list.splice(1,0,'天气之子')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app', 
            data:{
                list:['龙猫','名侦探柯南 ','千与千寻','你的名字']
            },
            watch:{
                list(){
                    console.log('数组改变了');
                }
            }
        })
        //在数组中使用侦听器总结:
        // 1.彻底替换为一个新数组,那么可以被侦听到。
        // 2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
        // 3.如果直接修改数组的元素,那么无法被侦听到。
        //(解决方法:使用$set(()方法修改元素的值。Vue3语法。)
        // 不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
    </script>
</body>

4.侦听器的完整写法

<body>
    <!-- 对对象进行侦听 -->
    <div id="app">
        <p>{{ obj.name }} --- {{ obj.age }} --- {{ obj.height }}</p >
        <button @click = "obj.name ='rose'">修改obj的name属性</button>
        <button @click = "obj.age = 30">修改obj的age属性</button>
        <button @click = "obj = {name:'andy',age:99}">修改obj的指向</button>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'jack', 
                    age:16, 
                    height:175
                }
            },
            
            watch:{
                // 这种写法侦听不到obj对象内部属性的变化，
                // 只能侦听到obj对象指向的变化。
                // obj(){
                // console.log('obj变化了'); 
                // },

                // 如果想侦听到对象里属性的变化.
                // 侦听obj里name的变化(要记得加引号)
                // "obj.name"(){
                // console.log('name变化了'); 
                // },
                // 可是这样写只能侦听一个属性。
                // 如果希望侦听到对象里所有属性的变化,就要开启深度侦听。 
                obj:{
                // 当有变化会调用的函数 
                    handler(){
                        console.log('obj的属性变化了');
                    },
                    // 开启深度侦听
                    // deep:true,

                    //要不要当前页面一打开就立即调用handler函数。
                    //给true表示立即调用,默认是flase。(代表只有改动了才调用
                    // immediate:true
                }
            }
        })
    </script>
</body>

八、缓存数据

存储方式

1、cookie

一:使用场景:

1:记住密码,下次自动登录。

2:记录用户浏览数据,进行商品(广告)推荐。

二:特点:

1:cookie保存在浏览器端。

2:单个cookie保存的数据不能超过4KB。

3:cookie中的数据是以域名的形式进行区分的。

4:cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。

5:cookie中的数据会随着请求被自动发送到服务器端。

三:

由于cookie存储机制有很多缺点，HTML5不再使用它,转而使用改良后的WebStorage存储机制。

(localStorage和sessionStorage)

2、sessionStorage

1.SessionStorage是生命周期

2.SessionStorage是生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了那么所有通过Session存储的数据也清空了

3.以键值对的形式存储使用。

//存储数据:

sessionStorage.setltem(key,value)

//获取数据:
sessionStorage.getltem(key)

//删除数据:

sessionStorage.removeltem(key)

//删除所有数据:
sessionStorage.clear()

3、localStorage

1.什么是localstorage

在HTML5中,新加入了一个localstorage特性,这个特性主要用来作为本地存储来使用。

它解决了cookie存储空间不足的问题,每条cookie的存储空间为4K,localstorage一般为5M。

2.localStorage的生命周期

LocalStorage生命周期是永久，这意味着除非用户在显示在浏览器提供的UI上清除localStorage信息,

否则这些信息将永久存在。

3.localstorage的局限

a.在IE8以上的IE版本才支持localstorage这个属性。

b.目前所有的浏览器中都会被localStorage的值类型限定为string类型，

对我们日常比较常见的JSON对象类型需要一个转换。

// 4.判断浏览器是否支持localstorage这个属性 
        if(window.localstorage){
           alert('浏览器支持localStorage')
        }

        // 5.localstorage的写入
        if(!window.localStorage){
            alert('浏览器不支持localstorage')
        }else{
            var storage = window.localStorage;
            // 写入a字段
            storage['a'] = 1;
            // 写入b字段 
            storage.b =2;
            // 写入c字段
            storage.setItem('c',3)

            console.log(typeof storage['a']); //string 
            console.log(typeof storage['b']); //string 
            console.log(typeof storage['c']); //string
        }

JSON转换

1、JSON字符串

<script>
        // JSON和JS对象的关系
        // JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。

        // 这个一个对象
        var obj = {a:"hello", b:"world"}; 
        console.log(typeof(obj)); //object

        // 这个一个]SON字符串,本质是一个字符串
        var json = '{"a":"hello", "b":"world"}'; 
        console.log(typeof(json)); //string
    </script>

2、JSON和JS对象互转

 <script>
        // 【JSON和JS对象互转】

        // JSON.parse()方法 实现从JSON字符串转换为JS对象
        var obj = JSON.parse('{"a":"hello", "b":"world"}')
        console.log(obj); //object

        // JSON.stringify()方法 实现从JS对象转换为JSON字符串
        var json = JSON.stringify({a:"hello", b:"world"})
        console.log(json);
    </script>

九、样式绑定

1.class 属性绑定

想要动态的设置class,也是给一个对象。

属性名:就是类名。

属性值:就是布尔值。如果为true,就代表有这个类名;false,代表没有。

 <style>
        .box {
            width:300px; 
            height:300px;
            border: 10px solid #000
        }
        .bg {
            background-color: red
        }
    </style>
</head>
<body>
    <div id="app">
       
        <!-- <div class="box" v-bind:class="{bg:true}"></div> -->

        <div class="box" v-bind:class="{bg:isbg}"></div>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                isbg:true
            }
            
        })
    </script>

2.style绑定

<body>
    <!-- 以对象方式绑定style属性 -->
    <!-- 属性名对应样式名；属性值对应样式值，一般给变量 -->
    <siv id="app">
        <!-- 在行内属性中书写样式 -->
        <div style="color:red; font-size:48px;">我是div盒子</div>

        <!-- 把行内属性改造成对象，以对象方式绑定style属性 -->
        <!-- 外部增加{};属性值改造成字符串；分高改造成逗号；属性名到对象名的改变 -->
        <div v-bind:style=" {color:'blue',fontSize:'30px'}">我是div盒子</div>

        <!-- 把属性值改成变量 -->
        <!-- 第一个color是样式名，第二个color是变量名，和data中的变量保持一致 -->
        <div v-bind:style=" {color:color,fontSize:size}">我是div盒子</div>
    </siv>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                color:'black',
                size:'24px'
            }
        })
    </script>
</body>

十、事件

一、事件与事件流

1、事件与事件流

【事件】

JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。常见的有加载事件、鼠标事件。

【事件流】

由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流。页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

【js的事件流三阶段】

事件捕捉阶段(capture phrase):事件开始由顶层对象触发,然后逐级向下传播,直到目标元素;

处于目标阶段(target phrase):处于绑定事件的元素上;

事件冒泡阶段(bubbling phrase):事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素;(事件捕获是从上到下,而事件冒泡,是从下到上。)

2、事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题。

事件冒泡:

微软提出了名为事件冒泡(event bubbling)的事件流。

事件冒泡可以形象的比喻成把一颗石头投入水中,泡泡会一直从水底冒出水面。

也就是说,事件会从最内层的元素开始发生,一直向上传播,直到document对象。

因此在事件冒泡的概念下在button按钮发生click事件的顺序应该是button→div→body→html→document.

事件捕获:

网景提出另一种事件流名为事件捕获(event capturing)。

与事件冒泡相反,事件会从最外层开始发生,直到具体的元素。

因此在事件捕获的概念下在button按钮发生click事件的顺序应该是document→html→bodv→div→button。

后来W3C采用折中的方式,平息了网景和微软之间的战争,制定了统一的标准--先捕获在冒泡。

3、事件对象

用户界面事件:涉及到与BOM交互的通用浏览器事件。

load事件:在整个页面(包括所有外部资源如图片 JavaScript文件和CSS文件)加载完成后触发。

 window.onload = function() {
            alert("页面加载完成")
        };

焦点事件:在元素获得或失去焦点时触发的事件。

鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。

滚轮事件:使用鼠标滚轮时触发的事件。

输入事件:向文档中输入文本时触发的事件。

键盘事件:使用键盘在页面上执行某些操作时触发的事件，

输入法事件:使用某些输入法时触发的事件

二、事件绑定指令

计算正方形的面积

<body>
    <div id="app">
        <!--方法一：以内联方式响应事件-->
        <!--<button v-on:click="length++">改变边长</button>-->

        <!--方法二：绑定方法处理事件-->
        <button v-on:click="changeLength">改变边长</button>:
        <p>正方形的边长是{{ length }},面积是{{ area }}</p>
    </div>
    
    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                length:2
            },
            computed:{
                area(){
                    return this.length*this.length
                },
            },
            methods:{
                changeLength(){
                    this.length++
                }
            }
        })
    </script>
</body>

三、事件修饰符

1、事件修饰符使用

 <div id="app" @click="divClick">
        <ul @click.self="ulClick">
            <!-- 事件修饰符 -->
            <!-- .stop阻止事件冒泡 -->
            <li @click="liClick">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            methods:{
                divClick(){
                    console.log('div');
                },
                ulClick(){
                    console.log('ul');
                },
                liClick(evt){
                    console.log('li');
                    // JS原生写法:阻止事件冒泡
                    // evt.stopPropagation()
                }
            }
        })
    </script>

2、事件修饰符详解

<body>
    <!-- 事件修饰符
        
        event.preventDefault()/阻止状认行为或者event.stopPropogation()/阻止事件冒泡.
        以上方法而要处理D0M事件细节，代码繁项.
        为了解决这个问题，Vue.js提供了事件修饰符.
        修饰符是以点开头的指令后缀来表示的， -->
    
    <!-- .stop阳止冒泡事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- .se1f当事件日标是当前元素自身时，触发事件 -->
    <ul @click.self="ulClick"></ul>

    <!-- .capture将原本默认的冒泡方式改为捕捉方式 -->
    
    <!-- :prevent阻止事件默认行为 -->
    <!--@submit.prevent提交事件不再重载顶面-->
    <form v-on:submit.prevent="onSubmit"></form>

    <!--.stop.prevent修饰符可以串联，既阻止冒泡又阻止默认行为.-->
    <a v-on:click.stop.prevent="doThat"></a>

    <!--只有修饰符-->
    <form v-on:submit.prevent></form>
</body>

十一、表单绑定

1、输入文本的绑定

文本框

<div id="app">
        <!-- input(输入)类型:-->

        <!-- type="text"(类型=文本)文本输入框,用于登录页面输入用户名。-->
        文本输入:<input type="text"> <br> 

        <!-- type="password"(类型=密码)密码输入框,用于输入密码,显示***。-->
        输入密码:<input type="password"> <br> 

        <!-- type="file"(类型=文件)上传文件处,用于文件的选择和上传。-->
        选择文件:<input type="file"> <br>

        <!-- type="checkbox"(类型=复选框)用于某项选择的打开或关闭。-->
        反复选择:<input type="checkbox"> <br>

        <!-- type="radio"(类型=发送)0 只能选择一次-->
        唯一选择:<input type="radio"> <br> 

        <!-- type="image"(类型=图片) 将图片定义为提交按钮-->
        图片提交:<input type="image" src="图片路径"><br>

        <!-- type="submit"(类型=提交)专门用于提交表单的button按钮-->
        提交按钮:<input type="submit"> <br> 

        <!-- type="month"(类型=月份) 定义year(年)和month(月)--> 
        选择月份:<input type="month"> <br> 

        <!-- type="number"(类型=数字) 只能选择/输入数字-->
        选择数字:<input type="number"> <br> 

        <!-- type="time" (类型=时间) 定义分秒--> 
        选择时间:<input type="time"> <br> 

        <!-- type="week"(类型=周)定义年月周-->
        选择周:<input type="week">
    </div>

    <SCript src="../../vue.js"></SCript>

    <script>
        
    </script>

多行文本框

 <div id="app">
        <textarea v-model="comment" cols="50" rows="10" placeholder="请输入您的留言"></textarea>
        <p>您的留言是</p>
        <p style="white-space:pre-line;">{{ comment }}</p>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                comment:''
            }
        })
    </script>

2、选择类表单元素的绑定

单选按钮

 <div id="app"> 
        
         <span>选择一种语言:{{ language }}</span> <br> 
        
         <input type="radio" id="python" value="python" v-model="language"> 
         <label for="python">python</label> 
        
         <input type="radio" id="javascript" value="javascript" v-model="language"> 
         <label for="javascript">javascript</label> 
        
         <input type="radio" id="c++" value="c++" v-model="language"> 
        <label for="c++">c++</label> 
        
    </div> 
        
    <script src="../../vue.js"></script> 
        
    <script> 
        new Vue({ 
            el:'#app', 
            data:{ 
                language:'' 
            } 
        }) 
    </script>

复选框

 <div id="app">
        <span>请选择语言,已选择:{{ language }},{{ language.length }}种</span> <br>
        
        <input type="checkbox" id="python" value="python" v-model="language">
        <label for="python">python</label>

        <input type="checkbox" id="javascript" value="javascript" v-model="language">
        <label for="javascript">javascript</label>

        <input type="checkbox" id="c++" value="c++" v-model="language">
        <label for="c++">c++</label>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app', 
            data:{
                language:[]
            }
        })
    </script>

下选框

 <div id="app">
        <span>请选择一种语言:{{ language }}</span> <br> 

        <select v-model="language">
            <option>python</option>
            <option>javascript</option>
            <option>C++</option>
        </select>
    </div>
    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app', 
            data:{
                language:''
            }
        })
    </script>

多选列表框

 <div id="app">
        <span>请选择语言,已选择{{ language.length }}种</span> <br>
        {{ language }}

        <select v-model="language" multiple>
            <option>python</option>
            <option>javascript</option>
            <option>C++</option>
        </select>
    </div>
    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app', 
            data:{
                language:[]
            }
        })
    </script>

3、v-model修饰符

1. .lazy

对于文本输入框，默认情况下，v-model 推指令在每次 input 事件触发后，都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符，可以将上述行为改为在 change 事件触发之后进行同步，这样就只有在文本框失去焦点后才会改变对应的模型属性的值，因此称为“惰性”绑定

<body>
    <div id="app">
        <!-- 事件修饰符.lazy(懒惰) 不会即时的将输入框的内容存放data -->
        <input v-model.lazy="msg">
        <span>{{ msg }}</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'111'
            }
        })
    </script>
</body>

2. .number

如果希望用户输入的值能够自动转换为数值类型，那么可以给v-model指令添加.number修饰符

<body>
    <div id="app">
        <!-- 修饰符.number 把string字符串转为number数字 -->
        <input type="number" v-model.number="age">
        <span>{{ age }}</span>
    </div>

    <script src="../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                age:''
            },
            watch:{
                age(){
                    console.log(typeof(this.age));
                }
            }
        })
    </script>
</body>

3. .trim

如果要自动过滤用户输入的首位空白字符，可以给v-model指令添加.tirm修饰符

<body>
    <div id="app">
        <!-- .trim 屏蔽空格 -->
        <input type="text" v-model.trim="msg">
        <span>一个{{ msg.length }}个字符</span>
    </div>

    <script src="../../vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                msg:''
            }
        })
    </script>
</body>

十二、父子组件之间传递数据的方法

1.父组件->子组件

从父组件向子组件传递数据是最主要的方式，可通过组件的props(属性)和slot(插槽)来实现

[props.单向数据流]

概念：父组件的数据改变了会自动流动到自组件，但是子不允许修改由prpos流过来的数据

所谓的单向数据流不允许子修改，是不允许改栈，但是可以改堆

例如：父传了数组给子，在子里面可以通过调用push,pop,shift,unshift,splice等

而且改完后父也会跟着改，因为他们指向的是同一个堆。

但是在这里不允许改orops.上的栈上的数据，父可以改，而且改完后能流入到子。

2.子组件 -> 父组件

【$emit】

子里如何给父组件传递数据？

利用发通知的形式来间接传数据。

发通知的语法：this.$emit('自定义的事件名'，数据)

父里要订阅这个通知（相当于监听这个事件）

<子组件 @自定义的事件名="函数">

当子的$emit执行时，就会自动调用父里绑定的函数，函数的参数就是子传递过来的数据。

例:

子里的代码

<button@click="$emit('sb','hello')">点击后，要给父传递数据</button>

解释：当子组件里面点了这个按钮，就会触发一个叫sb的事件，那个父组件如果监听了sb就会调用。

父里的代码

<子组件@sb="函数"/>

当sb事件通知时，就会调用上面的函数，函数的参数就是永不过时。

十三. 单页应用（SPA）

什么是单页应用？

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页面应用的优缺点：
优点：

良好的交互体验

单页应用的内容的改变不需要重新加载整个页面，获取数据也是通过Ajax异步获取，没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象，页面显示流畅

良好的前后端工作分离模式

后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端

减轻服务器压力

单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍

缺点：

首屏加载慢

解决方案：

1.vue-router懒加载

Vue-router懒加载就是按需加载组件，只有当路由被访问时才会加载对应的组件，而不是在加载首页的时候就加载，项目越大，对首屏加载的速度提升得越明显

2.使用CDN加速

在做项目时，我们会用到很多库，采用cdn加载可以加快加载速度。

3.异步加载组件

4.服务端渲染

服务端渲染还能对seo优化起到作用，有利于搜索引擎抓取更多有用的信息（如果页面纯前端渲染，搜索引擎抓取到的就只是空页面）

不利于SEO

seo 本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，搜索引擎的基础爬虫的原理就是抓取url，然后获取html源代码并解析。如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，即搜索引擎请求到的html是模型页面而不是最终数据的渲染页面。这样就很不利于内容被搜索引擎搜索到

解决方案：

1.服务端渲染

服务器合成完整的 html 文件再输出到浏览器

2.页面预渲染

3.路由采用h5 history模式

不适合开发大型项目

大型项目中可能会涉及大量的DOM操作、复杂的动画效果，也就不适合使用Vue、react框架进行开发