vue2总结

一.Vue介绍

1.vue是一套用于构建用户界面的渐进式的JavaScript框架

2.vue的特点:

　　a.采用组件化模式,提高代码复用率,且让代码更好维护

　　b.声明式编码,让编码人员无需直接操作DOM,提高开发效率

　　c.使用虚拟DOM + 优秀的Diff算法,尽量复用DOM节点

3.学习Vue前,最好掌握这些基础知识:

　　ES6语法规范,ES6模块化,包管理工具,原型,原型链,数组常用方法,axios,promise

二.插值语法

功能：用于解析标签体内容。写法：{{xxx}}，xxx是js表达式(一个表达式会产生一个值，可以放在任何一个需要值的地方)，且可以直接读取到data中的所有属性。

三.指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。备注：Vue中有很多的指令，且形式都是：v-????

a.v-text 和 v-html

v-text : 　　1.作用：向其所在的节点中渲染文本内容。　　2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。 v-html : 　　1.作用：向指定节点中渲染包含html结构的内容。　　2.与插值语法的区别：　　　　(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。　　　　(2).v-html可以识别html结构。　　3.严重注意：v-html有安全性问题！！！！ 　　　　(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。　　　　(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

b.v-cloak

　　1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性. 　　2.使用css配合v-cloak可以解决网速慢时页面展示出{{ xxx }}的问题

        <style>
            [v-cloak]{
                display:none;
            }
        style>
    head>
    <body>
        <div id="root">
            <h2 v-cloak>{{name}}h2>
        div>
    body>

c.v-once

　　1.v-once所在节点在初次动态渲染后,就视为静态内容了.

　　2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能

<body>
    <div id="root">
        <h2 v-once>初始化的n值是:{{n}}h2>
        <h2>当前的n值是:{{n}}h2>
        <button @click="n++">点我n+1button>
    div>
body>

<script type="text/javascript">        
    new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
script>

d.v-pre

　　1.跳过其所在节点的编译过程. 　　2.可利用它跳过:没有使用指令语法,没有使用插值语法的节点,会加快编译

e.v-bind

　　v-bind:href="xxx" 　　简写为 :href="xxx" 　　xxx同样要写js表达式，且可以直接读取到data中的所有属性。

<div id="root">
    正常 :<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1a>
    简写 :<a :href="school.url" x="hello">点我去{{school.name}}学习2a>
div>

v-bind和插值语法的区别 :

　　v-bind : 一般都是写在属性的

　　插值语法 : 一般都是写在标签内容

f.v-model和v-bind [ 数据绑定 ]

Vue中有2种数据绑定的方式 : 　　1.v-model(双向数据绑定) : 数据不仅能从data流向页面,还可以从页面流向data 　　2.v-bind(单向数据绑定) : 数据只能用data流向页面　　　　3.注意 : 　　　　1.双向绑定一般都应用在表单类元素上（如：input、select等）　　　　2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<body>
    <div id="root">
        
        单向数据绑定：<input type="text" v-bind:value="name"><br/>
        双向数据绑定：<input type="text" v-model:value="name"><br/>

        
        单向数据绑定：<input type="text" :value="name"><br/>
        双向数据绑定：<input type="text" v-model="name"><br/>

        
        <h2 v-model:x="name">你好啊h2>
    div>
body>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            name:'海贼王'
        }
    })
script>

g.v-on(点击事件)

一.事件的基本使用

　　1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；　　2.事件的回调需要配置在methods对象中，最终会在vm上；　　3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；　　4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；　　5.@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；$event是第一个参数

<body>
    <div id="root">
        <button v-on:click="showInfo1">不简写 :（不传参）button>
        
        <button @click="showInfo2($event,66)">简写 :（传参）button>
    div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        methods:{
            showInfo1(event){
                alert('同学你好！')
            },
            showInfo2(event,number){
                console.log(event,number)
                alert('同学你好！！')
            }
        }
    })
script>

二.事件修饰符

　　1.prevent：阻止默认事件（常用）；　　2.stop：阻止事件冒泡（常用）；　　3.once：事件只触发一次（常用）；　　4.capture：使用事件的捕获模式；　　5.self：只有event.target是当前操作的元素时才触发事件；　　6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

    <body>
        <div id="root">

            
            <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息a>

            
            <div class="demo1" @click="showInfo">
                <button @click.stop="showInfo">点我提示信息button>
                
                <a href="http://www.atguigu.com" @click.prevent.stop="showInfo">点我提示信息a>
            div>

            
            <button @click.once="showInfo">点我提示信息button>

            
            <div class="box1" @click.capture="showMsg(1)">
                div1
                <div class="box2" @click="showMsg(2)">
                    div2
                div>
            div>

            
            <div class="demo1" @click.self="showInfo">
                <button @click="showInfo">点我提示信息button>
            div>

            
　　　　　　　　@scroll 是给滚动条加的滚动事件
　　　　　　　　@wheel  是个滚轮加的滚动事件 --  就是你滚到底部了,还是可以继续滚轮的

            <ul @wheel.passive="demo" class="list">
                <li>1li>
                <li>2li>
                <li>3li>
                <li>4li>
            ul>

        div>
    body>

    <script type="text/javascript">
        new Vue({
            el:'#root',
            methods:{
                showInfo(e){
                    alert('同学你好！')
                    // console.log(e.target)
                },
                showMsg(msg){
                    console.log(msg)
                },
                demo(){
                    for (let i = 0; i < 100000; i++) {
                        console.log('#')
                    }
                    console.log('累坏了')
                }
            }
        })
    script>

三.键盘事件

　　@keyup 按下抬起,才触发 --- 一般使用这个

　　@keydown 按下就触发

　　1.Vue中常用的按键别名：　　　　回车 => enter 　　　　删除 => delete (捕获“删除”和“退格”键) 　　　　退出 => esc 　　　　空格 => space 　　　　换行 => tab (特殊，必须配合keydown去使用) 　　　　上 => up 　　　　下 => down 　　　　左 => left 　　　　右 => right
　　2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
　　3.系统修饰键（用法特殊）：ctrl、alt、shift、meta 　　　　(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。　　　　(2).配合keydown使用：正常触发事件。
　　4.也可以使用keyCode去指定具体的按键（不推荐）　　5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

        <div id="root">
            <h2>欢迎来到{{name}}学习h2>
            <input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
        div>
    body>

    <script type="text/javascript">
        Vue.config.keyCodes.huiche = 13 //定义了一个别名按键

        new Vue({
            el:'#root',
            data:{
                name:'尚硅谷'
            },
            methods: {
                showInfo(e){
                    // console.log(e.key,e.keyCode)
                    console.log(e.target.value)
                }
            },
        })
    script>

h.v-if 和v-show [ 条件渲染 ]

1.v-if

　　写法：　　　　(1).v-if="表达式" 　　　　(2).v-else-if="表达式" 　　　　(3).v-else="表达式" 　　　　适用于：切换频率较低的场景。　　　　特点：不展示的DOM元素直接被移除。　　　　注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.v-show

　　写法：v-show="表达式" 　　适用于：切换频率较高的场景。　　特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3.备注：

　　使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。　　template与v-if可以配合使用,与v-show不可以!!

i.v-for

1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）


<div id="root">
    
    <h2>人员列表（遍历数组）h2>
    <ul>
        <li v-for="(p,index) in persons" :key="index">
            {{p.name}}-{{p.age}}
        li>
    ul>

    
    <h2>汽车信息（遍历对象）h2>
    <ul>
        <li v-for="(value,k) in car" :key="k">
            {{k}}-{{value}}
        li>
    ul>

    
    <h2>测试遍历字符串（用得少）h2>
    <ul>
        <li v-for="(char,index) in str" :key="index">
            {{char}}-{{index}}
        li>
    ul>
    
    
    <h2>测试遍历指定次数（用得少）h2>
    <ul>
        <li v-for="(number,index) in 5" :key="index">
            {{index}}-{{number}}
        li>
    ul>
div>

<script type="text/javascript">
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
            ],
            car:{
                name:'奥迪A8',
                price:'70万',
                color:'黑色'
            },
            str:'hello'
        }
    })
script>

4.v-for 中 key 的重要性（面试题）

1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
(2).旧虚拟DOM中未找到与新虚拟DOM相同的key 创建新的真实DOM，随后渲染到到页面。 3. 用index作为key可能会引发的问题： (1). 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
(2). 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。
4. 开发中如何选择key?: (1).最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 (2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

四.自定义指令

五.样式

1. class样式 :

　　写法:class="xxx" xxx可以是字符串、对象、数组。　　　　字符串写法适用于：类名不确定，要动态获取。

{{name}}

mood:'normal', //normal 是写好样式的class名　　　　对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

<div class="basic" :class="classArr">{{name}}div> 

classArr:['atguigu1','atguigu2','atguigu3']

也可以写成，但是局限性就没发通过vue来修改了

{{name}}

　　　　数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<div class="basic" :class="classObj">{{name}}div>

也可以写成，但是局限性就没发通过vue来修改了

">{{name}}

classObj:{ 
　　atguigu1:false, 
　　atguigu2:false, 
},

2.style样式：

　　:style="{fontSize: xxx}"其中xxx是动态值。

<div class="basic" :style="styleObj">{{name}}div> 

styleObj:{
    fontSize: '40px',
    color:'red',
},

　　:style="[a,b]"其中a、b是样式对象。

<div class="basic" :style="styleArr">{{name}}div>

styleArr:[
    {
        fontSize: '40px',
        color:'blue',
    },
    {
        backgroundColor:'gray'
    }
]

六.生命周期

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或组件实例对象。

8个(4对)生命周期：

beforeCreate ：初始化生命周期，事件，但数据代理还没开始；此时：无法通过VM访问到data数据和methods方法 created ：初始化数据监测，数据代理；此时：可以通过VM访问到data数据和methods方法 上下两个之间：生成虚拟DOM，页面不能显示解析好的内容 beforeMount ：页面呈现的是未经vue编译的DOM结构，所有对DOM操作最终都不奏效 上下两个之间：虚拟DOM转化为真实DOM mounted ：页面呈现的是经过vue编译的DOM结构，所有对DOM操作都有效；在此时可以对： 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 beforeUpdate ：此时数据是新的，但页面还是旧的；页面尚未和数据保持同步 上下两个之间：新旧虚拟DOM对比，完成页面更新 updated ：此时数据是新的，但页面也是新的；页面和数据保持同步 beforeDestroy ：在此进行：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】 destroyed

注意：　

常用的生命周期钩子： 1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。
关于销毁Vue实例： 1.销毁后借助Vue开发者工具看不到任何信息。 2.销毁后自定义事件会失效，但原生DOM事件依然有效。 3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

七.conputed

知识点： 只要vue的data数据一发生变化，那么就会重新解析模板。

计算属性： 1.定义：要用的属性不存在，要通过已有属性计算得来。 2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 3.get函数什么时候执行？ (1).初次读取时会执行一次。 (2).当依赖的数据发生改变时会被再次调用。 4.优势：与methods实现相比，conputed内部有缓存机制（复用），效率更高，调试方便。 5.备注： 1.计算属性最终会出现在vm上，直接读取使用即可。 2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<body>
    <div id="root">
        姓：<input type="text" v-model="firstName"> 
        名：<input type="text" v-model="lastName"> 
        全名：<span>{{fullName}}span>
    div>
body>

<script type="text/javascript">
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
            x:'你好'
        },
        computed:{
            //计算属性的fullName挂载到vm上
            fullName:{
                //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用？(有缓存的)
                    //1.初次读取fullName时。2.所依赖的数据【例如 ：firstName和lastName】发生变化时。
                get(){
                    console.log('get被调用了')
                    // console.log(this) //此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                //set什么时候调用? 当fullName被修改时。
                set(value){
                    console.log('set',value)
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
script>

计算属性的简写方法： 简写只能用于get，不能用于set！！！！（直接写成一个函数，而不是对象）

computed:{
    //简写
    fullName(){
        console.log('get被调用了')
        return this.firstName + '-' + this.lastName
    }
}