vue2.0笔记

1、组件化。实现了封装和重用，且组件间可以相互嵌套； 2、轻量级。相对于其他框架，Vue学习成本低，简单易上手； 3、虚拟 DOM。虚拟 dom 中存在 diff算法，是 cpu 密集型运算，占用内存较少，可以提高运行效率，并压缩运行时体积； 4、Vue是一个MVVM框架，数据绑定。数据单项绑定（v-bind），单向指data中的值绑定到视图中，但视图中修改不会影响到data数据；双向绑定（v-model），数据发生变化会驱动视图的更新，视图的更新也会驱动数据的变化； 5、单页面应用（SPA）。用户体验好，内容改变时不需要重新加载整个页面，不会进行多个 html 页面间的切换；服务器压力小等。

MVVM

MVVM是Model-View-ViewModel的简写

M --- model 模型==数据==变量 （只要今后听见了M 或者是模型就直接想象成 data数据·） data数据·

V --- view 视图==页面==用户可以看见的界面模板

VM --- viewModel 视图模型==用来关联数据与视图之前的桥梁 vue实例

正在上传…重新上传取消

Data Bindings 数据绑定 （按照上图描述 就是把model数据 ----》数据绑定 ----》绑定到页面上）

DOM Listeners dom监听 (按照上图描述 就是view页面的数据改变-----》dom监听------》反应到数据上)

HelloWord

淘宝镜像

安装淘宝镜像（ npm服务器在国外可能会导致网速很慢导致下载失败,可以使用淘宝镜像当然不是必须要安装 ---- 如果安装了今后所有使用npm 在下载内容的时候就要把npm 变成 cnpm 剩下都一样）

npm install cnpm -g --registry=https://registry.npm.taobao.org

检查是否安装成功

cnpm -v

安装成功显示如图下：

vue初体验

1.下载vue库文件 npm init -y （初始化） npm install --save vue@2 简写： npm i -S vue@2（下载）

2.新建html页面先把vue引用进来

3.编写如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.先引用 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- M       ---    model          模型==数据==变量

     V        ---    view             视图==页面==用户可以看见的界面

     VM    ---    viewModel      视图模型==用来关联数据与视图之前的桥梁 -->


<!-- 2创建视图层   V  vue的根容器  根节点  今后把你的vue内容都写在这个根节点中-->
    <div id="demodiv">
        <h1>{
 {text}}</h1>
        <h1>{
 {num}}</h1>
        <h1>{
 {obj.name}}</h1>
        <h1>{
 {arr[4]}}</h1>
    </div>

  
    <script>
        // 3.创建vm层  ---》 就是vue实例
        new Vue({
            el:"#demodiv",//关联视图
            data:{//4 m层  模型数据
                text:"我是字符串",
                num:18,
                bool:true,
                obj:{
                    name:"xixi",
                    age:18
                },
                arr:[1111,22222,33333,4444,5555]
            }
        })
    </script>
</body>
</html>

多个vue实例

多个vue实例生效的就是对应的视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>{
 {text}}</h1>
    </div>
    <div id="demodivb">
        <h1>{
 {text}}</h1>
    </div>
    <script>
       
        new Vue({
            el:"#demodiv",
            data:{
                text:"我是第一个",
             
            }
        })
        new Vue({
            el:"#demodivb",
            data:{
                text:"我是第2个",
             
            }
        })
    </script>
</body>
</html>

{ {}}--模板语法--双大括号赋值法

在vue中{ {}}被称之为模板语法双花括号赋值法 vue数据插值。。。。作用：就是可以在双大括号中写入表达式并且展示在页面中

语法:在你想展示数据的任何位置 { {表达式}} （表达式通过计算可以返回结果的公式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <h1>{
 {num}}</h1>
            <!-- 因为{
 {表达式}}s所以运算符都可以写 -->
            <h1>{
 {num*2}}</h1>

            <h1>{
 {bool?"你好":"你坏"}}</h1>
            <!-- 建议不要在{
 {}}写太复杂的内容 -->
            <h1>{
 {text.toUpperCase().slice(1,5)}}</h1>

        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                    num:666,
                    bool:false,
                    text:"abcdefghiaslkdjaskldhalk"
                }
            })

        </script>


</body>
</html>

el与data的两种写法

$mount 手动挂载

Vue 的$mount()为手动挂载，在项目中可用于延时挂载（比如vue是一个渐进式的在我们使用一些负载功能的时候我们需要依赖很多后面会学到的vue插件来完成但是使用这些插件我们必须先要把这些插件先挂载之后在加载视图的关联所以在这个时候我们会用到延迟健在），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>两种挂载方式</h1>
        <h1>{
 {text}}</h1>
    </div>

    <script>
       
       let v= new Vue({
            // el:"#demodiv",  
            data:{ 
                text:"我是一个变量"
            }
        })
        console.log(v);
        v.$mount("#demodiv")
       
    </script>
</body>
</html>

data函数式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>两种挂载方式</h1>
        <h1>{
 {text}}</h1>
    </div>

    <script>
       
       let v= new Vue({
                //对象式写法  
            // data:{ 
            //     text:"我是一个变量"
            // }
            // 函数式写法
            data(){
                return {
                    text:"我是函数式变量"
                }
            }
        })
        console.log(v);
        v.$mount("#demodiv")
       
    </script>
</body>
</html>

指令

什么是html标签的属性？

通过写在html开标签中的使用属性="属性值" 的这些东西可以扩展标签的功能

什么是指令？

就是在vue中给html标签添加的带有v-前缀的特殊属性（在vue中给html标签添加个一些特殊性功能属性）

v-model

作用：就是给表单元素进行数据的双向绑定

双向绑定

视图改变模型也会改变

模型变视图也会随之改变

正在上传…重新上传取消

语法: <标签 v-model=""值/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <h1>v-model</h1>

            <input type="text" v-model="inputval"/>
            
            <h1>{
 {inputval}}</h1>

        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                   inputval:""
                }
            })

        </script>
</body>
</html>

双向绑定的原理

在vue中基于数据劫持--数据代理与发布者订阅者模式完成的

数据劫持：数据拦截就是对data中的数据在初始化的时候监听起来(Object.defineProperty 来进行监听/代理) 当数据改变setter之后 vm就会知道在视图改变getter 他就会通知模型你要修改了模型改变了也会通知视图改变

发布者订阅者模式：就是一个一对多的关系发布者就是数据提供者订阅者就是页面展示的一个发布者可以对应无数个订阅者但是发布者改变了所有订阅者也会改变

v-show

作用：控制dom元素的显示或者隐藏 v-show的显示和隐藏是通过css的dispaly方式来控制的

语法 v-show="布尔值" true显示 false隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <input type="checkbox" v-model="bool"/>{
 {bool?"勾选了":"没勾选"}}

           <h1 v-show="bool">我是站位的</h1>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                    bool:false
                }
            })

        </script>


</body>
</html>

v-on

作用：就是给vue的dom绑定事件的

语法:

传统写法(写法稍微麻烦点)： v-on:你的事件不加on="函数" v-on:click=”函数“

简写写法: @你的事件不加on="函数" @click="函数"

那今后工作用哪个简写的函数传统的（想用那个用哪个）

注意：函数需要写在与el data同级位置使用methods来进行包裹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <button v-on:click="fun()">点我触发函数</button>
            <button @click="fun()">点我触发函数简写写法</button>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                  
                },
                // 函数需要写在与el data同级的位置使用methods来进行包裹
                methods:{
                    fun(){
                        console.log("你好")
                    },
                    
                }
            })

        </script>


</body>
</html>

注意函数中怎么使用data数据 使用this.变量名（this指向的就是vue实例）

  methods:{
                    fun(){
                        // console.log("你好")
                        console.log(this.text)
                        
                         console.log(this._data.text);
                    },
                    
                }

v-for

概念：用来遍历数据生成页面内容

语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"  -->
            <ul>
                <li v-for="(v,i) in arr">
                    {
 {v}}------{
 {i}}
                </li>
            </ul>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                    arr:["ez","Vn","MF","noc"]
                },
          
                methods:{
                   
                    
                }
            })

            
        </script>


</body>
</html>

遍历复杂数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"  -->
            <ul>
                <li v-for="(v,i) in arr">
                    {
 {v}}------{
 {i}}
                </li>
            </ul>

            <hr/>

            <table border="1">
                <tr v-for="(v,i) in obj">
                    <td>{
 {v.name}}</td>
                    <td>{
 {v.age}}</td>
                </tr>
            </table>
        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                    arr:["ez","Vn","MF","noc"],
                    obj:[
                        {name:"xixi1",age:181},
                        {name:"xixi2",age:182},
                        {name:"xixi3",age:183},
                        {name:"xixi4",age:184},
                        {name:"xixi5",age:185},
                        {name:"xixi6",age:186}
                    ]
                },
          
                methods:{
                   
                    
                }
            })

            
        </script>


</body>
</html>

key属性

可以在是用v-for的时候搭配使用他的作用就是给便利出来的dom 起个唯一的名字相当于我们的身份证号通过添加了这个key属性可以增加我们在便利展示的时候生成dom元素的效率 （key里面是唯一的不建议使用我们便利出来的下标因为如果一个页面有两次便利的话key的值就有可能相同）

v-bind 这个是初学者最容易忘记的但是很重要

概念: 就是html的属性插入变量

语法：

传统写法： v-bind:html的属性="值"

简写写法: :html的属性="值"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            
            <a v-bind:href="ahref">{
 {text}}</a>
            <a :href="ahref">{
 {text}}</a>

        </div>

        <script>

            new Vue({
                el:"#demodiv",
                data:{
                   text:"点我去百度",
                   ahref:"http://www.baidu.com"
                }
            })

        </script>


</body>
</html>

v-if全家桶

v-if

作用：就是对dom元素进行移除和添加

语法: 写在开标签中 true添加 false移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>v-if</h1>
            <input type="checkbox" v-model="bool"/>{
 {bool}}
            <h1 v-show="bool">我是v-show的标签</h1>


            <h1 v-if="bool">我是v-if的标签</h1>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    bool:true
                },
                methods:{

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

v-if与v-show的区别

1.v-show是使用css的方式对dom元素进行显示和隐藏的在频繁切换的时候效率更高在初始化的时候对性能的损耗比较高

2.v-if是直接把这个dom元素移除或者是添加在频繁切换的时候效率比较低在初始化的时候对性能的损耗比较低

v-else

语法：必须配合v-if使用不能单独使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>v-if</h1>
            <input type="checkbox" v-model="bool"/>{
 {bool}}
            <h1 v-if="bool">请您登录</h1>
            <h1 v-else>欢迎您尊敬的vip</h1>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    bool:true
                },
                methods:{

                }
            })


           
        </script>
</body>
</html>

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>v-else-if</h1>
            <select v-model="text">
                <option value="吃饭">吃饭</option>
                <option value="睡觉">睡觉</option>
                <option value="在吃饭">在吃饭</option>
                <option value="在睡觉">在睡觉</option>
           
            </select>


            <h1 v-if="text=='吃饭'">我是吃饭的dom</h1>
            <p v-else-if="text=='睡觉'">我是睡觉的dom</p>
            <em v-else-if="text=='在吃饭'">我是在吃饭的dom</em>
            <h2 v-else-if="text=='在睡觉'">我是在睡觉的dom</h2>
            <b v-else>我什么都没有干</b>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    text:""
                },
                methods:{

                }
            })


           
        </script>
</body>
</html>

v-if与v-for能同时使用吗

当 v-if 与 v-for 不推荐同时使用，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中,影响速度

如果必须要使用的话变成一个嵌套关系

解决方式

1.使用computed处理数据在便利

2.使用v-show替代v-if

v-html

作用：就是把字符串标签插入到页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>v-html</h1>
            {
 {text}}
            <div v-html="text">

            </div>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                   text:"<h1>我是一个h1</h1>"
                },
                methods:{

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

v-once

作用: 一次性插值数据插入到页面中就不会被改变了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>v-once</h1>
            <input type="text" v-model="text">
            <h1>{
 {text}}</h1>
            <h1 v-once>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
            <h1>{
 {text}}</h1>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    text:"我是默认值"
                },
                methods:{

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

v-text

作用：向dom中插入文本内容和{ {}}作用一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demoDiv">
            <h1>v-text</h1>
            <h1>{
 {num}}</h1>

            <h1 v-text="num"></h1>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    num:"你好么么哒！！！！^_!"
                },
                methods:{

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

屏幕闪烁

当用户的设备和网络比较慢的时候可能就会在页面中吧{ {}}全部展现出来当网络恢复正常之后有突然间显示ok

使用{ {}}模板语法的话就会出现这个问题

解决方式

1.使用v-text （全部在页面中使用v-text指令很麻烦）

2.使用v-cloak指令 等待vue实例渲染完成之后在进行（这个指令是防止页面加载时出现 vuejs 的变量名而设计）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
        <div id="demoDiv" v-cloak>
            <h1>v-text</h1>
            <h1>{
 {num}}</h1>

            <h1 v-text="num"></h1>
        </div>

        <script>
            new Vue({
                el:"#demoDiv",
                data:{
                    num:"你好么么哒！！！！^_!"
                },
                methods:{

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

事件对象

事件对象--$event

谁触发这个事件事件对象就指向谁（事件对象中包含触发这个事件的元素所有信息）类似于拖拽

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <!-- 事件对象 $event -->
        <input type="text" @keydown="fun($event)">
    </div>
    <script>
        let vm = new Vue({
            data: {

            },
            methods: {
                fun(e) {
                    console.log(e)
                    if (e.keyCode == 90) {
                        console.log("z被按下了")
                    }
                }
            }

        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

修饰符

通过vue提供的修饰符可以来处理dom事件的一些细节性的内容

v-on:事件.修饰符="函数()"

按键修饰符

优化我们对于键盘事件的相关处理

.up .down .left .right .ctrl .space .enter .tab .delete .shift .esc

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" @keydown.space="fun()">
    </div>
    <script>
        let vm = new Vue({
            data: {

            },
            methods: {
                fun() {
                    console.log("空格被按下了")
                
                }
            }

        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

事件修饰符

.stop修饰符阻止事件传播
.prevent修饰符阻止事件默认行为
.captrue修饰符设置捕获
.self 修饰符只会触发自己范围内的事件不包含子元素
.once修饰符只触发当前事件一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <style>
        .fu {
            width: 600px;
            height: 600px;
            background-color: pink;
        }

        .zi {
            width: 300px;
            height: 300px;
            background-color: goldenrod;
        }
    </style>
</head>

<body>
    <div id="demoDiv">
        <div class="fu" @click="fufun()">
            <div class="zi" @click.stop="zifun()"></div>
        </div>
    </div>
    <script>
        let vm = new Vue({
            data: {

            },
            methods: {
             
                    fufun() {
                        console.log("fufufuffufufu")
                    },
                    zifun() {
                        console.log("zizizizziizzi")
                    },
                }
            

        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

v-model修饰符

lazy修饰符

用户使用v-model之后，用户每次修改输入内容，都会将数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定。只有当用户的input中失去焦点或者用户点击回车按钮时，才会将的数据进行修改。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" v-model.lazy="inputval">
        <h1>{
 {inputval}}</h1>
    </div>

    <script>
        let vm = new Vue({
            data: {
                inputval:"我是默认值"
            }
        })
        vm.$mount("#demoDiv") 
    </script>
</body>

</html>

number修饰符

当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使用number修饰符来将输入的数字转为number类型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="demoDiv">
        没有使用number
        <input type="text" v-model="inputval">
        <hr>
        使用了number
        <input type="text" v-model.number="inputval">
        <hr>
        <button @click="fun()">点我查看类型</button>
    </div>

    <script>
        let vm = new Vue({
            data: {
                inputval:0
            },
            methods:{
                fun(){
                    console.log(typeof(this.inputval))
                }
            }
        })
        vm.$mount("#demoDiv") 
    </script>
</body>
</html>

trim修饰符

使用trim修饰符来去掉字符串首部或者尾部的所有空格

计算属性--computed

引子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demodiv">
       
    
      <!-- 因为view区域是展示数据的  我们在这个里面处理数据 不合适 会导致页面的可读性比较差 -->
      <h1>基本展示:{
 {text}}</h1>
      <h1>大写：{
 {text.toUpperCase()}}</h1>
      <h1>大写截取：{
 {text.toUpperCase().slice(1,4)}}</h1>
    </div>
    <script>
        let vm=new Vue({
            el:"#demodiv",
            data:{
                text:"abcdefghijk"
            },
         
        })
       
    </script>
</body>
</html>

上面的代码没有问题但是后期可能会导致代码的可读性非常差

所以在我们遇到了一条数据在不同位置展示出不同形态的时候我们可以使用计算属性