前端学习：Vue知识点盘点

<script type='text/javascript'>
    let number = 18;
    let person = {
        name: "张三",
        sex: "男"
    }

    Object.defineProperty(person, "age", {
        // value: 18,
        // enumerable: true,  // 控制属性是否可以枚举，默认值是false
        // writable: true,  // 控制属性是否可以被修改，默认值是false
        // configurable: true,  // 控制属性是否被删除

        // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get: function () {
            console.log("age被读取了");
            return number;
        },

        // 当有人修改person的age属性时，set函数(setter就会被调用，且会收到修改的具体值)
        set(value) {
            console.log("age被修改了");
            number = value;
        }
    })

    console.log(person);
</script>

2.数据代理

定义：通过对一个对象代理对另一个对象中属性的操作（读/写）

好处：更加方便的操作data中的数据

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

<script type='text/javascript'>
    let obj = { x: 100 }
    let obj2 = { y: 200 }

    Object.defineProperty(obj2, 'x', {

        get() {
            return obj.x
        },

        set(value) {
            obj.x = value
        }
    })
</script>

事件的基本使用

1.使用v-on：xxx或@xxx绑定事件，其中xxx是事件名；

2.事件的回调需要配置在methods对象中，最终会在vm上；

3.methods中的配置函数，不要用箭头函数！否则this就不是vm

4.methods中配置的函数，都是被Vue管理的函数，this的执行是vm或者组件实例对象

5.@click=”demo“和@click=”demo($event)“效果一致，但后者可以传参；

事件修饰符

1.prevent：阻止默认事件（常用）

2.stop：阻止事件冒泡（常用）

3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素时才触发

6.passive：事件的默认行为立即执行。无需等待事件回调执行完毕

键盘事件

1. Vue 中常用的按键别名
回车：enter
删除：delete，捕获“删除”和“退格”键
退出：esc
空格：space
换行：tab，特殊,必须配合keydown 去使用
上：up
下：down
左：left
右：right

2.Vue 未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case (多单词小写短横线写法)

3.系统修饰键(用法特殊)：ctr1、alt、shift、meta( meta就是win键)
1）配合keyup 使用:按下修饰键的同时，再按下其他键，随后释放其他键,事件才被触发指定ctr+y使用@keyup.ctr.y
2）配合keydown 使用:正常触发事件

4.也可以使用keyCode 去指定具体的按键(不推荐)

5. Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名

计算属性（computed）

在Vue中，data中写的什么最终在vm身上就显示什么，methods中写什么vm身上也就显示什么。但是computed（计算属性）不是写什么就在vm身上显示什么。

1.定义：要用的属性不存在，要通过已有的属性计算得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

1）初次读取时会执行一次

2）当依赖的数据发生改变时会被再次调用

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便

5.备注：

1）计算属性最终会出现在vm上，直接读取使用即可

2）如果计算属性要被修改。那必须写set函数去响应修改，且set中要引起计算式以来的数据发生改变

监视属性(watch)（也可叫侦听属性）

1.当监视属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法

1）new Vue时传入watch配置

2）通过vm.$watch监视

4.深度监视

1）Vue中的watch默认不检测对象内部值得改变（一层）

2）配置deep：true可以监测对象内部值改变（多层）

注：1）Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以！

2）使用watch时根据数据的具体结构，决定是否采用深度监视器

computed与watch之间的区别

1.computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

注：两个重要原则

1）所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象

2）所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件的实例对象

绑定样式

1.class样式

写法：class=”xxx“ xxx可以是字符串，对象，数组

字符串写法适用于：类名不确定，要动态获取

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

数组写法适用于：要绑定对各样式，个数确定，名字也确定，但不确定是否使用

2.style样式

：style=”{fontSize：xxx}“其中xxx是动态值

：style="[a,b]"其中a,b是样式对象

<style>
  .basic {width: 300px;height: 50px;border: 1px solid black;}
  .happy {border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg, yellow, pink, orange, yellow);}
  .sad {border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}
  .normal {background-color: #bfa;}
  .atguigu1 {background-color: yellowgreen;}
  .atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}
  .atguigu3 {border-radius: 20px;}
</style>

<div id="root">
  <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>

  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  <div class="basic" :class="classArr">{{name}}</div><br/><br/>

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{{name}}</div><br/><br/>

  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{{name}}</div><br/><br/>

  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{{name}}</div>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: '尚硅谷',
      mood: 'normal',
      classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
      classObj: {
        atguigu1: false,
        atguigu2: false,
      },
      styleObj: {
        fontSize: '40px',
        color: 'red',
      },
      styleObj2: {
        backgroundColor: 'orange'
      },
      styleArr: [
        {
          fontSize: '40px',
          color: 'blue',
        },
        {
          backgroundColor: 'gray'
        }
      ]
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })
</script>

条件渲染

1.v-if

写法：

1）v-if=”表达式“

2）v-else-if=”表达式“

3）v-else=”表达式“

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除，可以配合template标签使用不会破环原本的DOM结构

注意：v-if可以和：v-else-if、v-else一起使用，但是要求结构不能被打断

2.v-show

写法：v-show=”表达式“

适用于：切换频率较高的场景

特点：不展示的DOM元素违背移除，仅仅是使用演示隐藏掉。不可以配合temple标签使用

3.备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2>当前的n值是:{{ n }}</h2>
  <button @click="n++">点我n+1</button>

  <!-- 使用v-show做条件渲染 -->
  <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
  <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

  <!-- 使用v-if做条件渲染 -->
  <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
  <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

  <!-- v-else和v-else-if -->
  <!-- <div v-show="n === 1">Angular</div> -->
  <!-- <div v-show="n === 2">React</div> -->
  <!-- <div v-show="n === 3">Vue</div> -->

  <!-- <div v-if="n === 1">Angular</div> -->
  <!-- <div v-else-if="n === 2">React</div> -->
  <!-- <div v-else-if="n === 3">Vue</div> -->
  <!-- <div v-else>哈哈</div> -->


  <!-- v-if与template的配合使用 -->
  <template v-if="n === 1">
    <h3>你好</h3>
    <h3>尚硅谷</h3>
    <h3>北京</h3>
  </template>

</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el:'#root',
    data:{
      name:'尚硅谷',
      n:0
    }
  })
</script>

列表渲染

v-for指令

1.用于展示列表数据

2.语法：v-for=“（item，index）in xxx”：key=“yyy”

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

<!DOCTYPE html>
<html lang="zh-CN">

<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 type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <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,key) in car" :key="key">
                <!-- {{value.name }}-{{value.price }}-{{value.color}} -->
                {{key}}-----{{value}}
            </li>
        </ul>
        <!-- 遍历字符串 -->
        <h2>hello</h2>
        <ul>
            <li v-for="(char,index ) in str" :key="index">
                {{index}}---{{char }}
            </li>
        </ul>
        <!-- 遍历指定次数 -->
        <h2>遍历指定次数</h2>
        <ul>
            <li v-for="(number,index ) in 6" ::key="index">
                {{index}}---{{number}}
            </li>
        </ul>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    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>

</html>

key的作用与原理

以数组为例，如果用数组的index作为key，那么这里将有可能出现错误。当我们页面有自己输入，同时是由上往下插入的话，将会发生错误。如下例所示

上图为网页原始显示图片，当点击添加老王的按钮时则在张三的上方添加老刘的信息。

上图为未点击按钮的时候在网页已有的输入框中输入文字。之后再点击按钮的结果图。由此我们可以清晰的看出，本该对应张三的地方对应到了老刘，等等。出现这个错误的原因是因为虚拟DOM对比算法。以下为完整的代码。

<!DOCTYPE html>
<html lang="zh-CN">

<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 type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name }}-{{p.age}}
                <input type="text">
            </li>
        </ul>
        <button @click="add">点击添加老刘</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            persons: [
                { id: 001, name: "张三", age: 18 },
                { id: 002, name: "李四", age: 19 },
                { id: 003, name: "王五", age: 20 }
            ]
        },
        methods: {
            add() {
                const x = { id: 004, name: "老刘", age: 40 }
                this.persons.unshift(x)
            }
        },
    })
</script>

</html>

虚拟DOM算法原理

面试题：react、vue中的key有什么作用？（key的内部原理）

1.虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异标胶，比较规则如下：

1）旧虚拟DOM中找到了与新虚拟DOM相同的key:

i)若虚拟DOM中内容没变，直接使用之前的真实DOM！

ii）若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真是DOM

2）旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到网页

2.用index作为key可能会引发的问题

1）若对数据进行：逆序添加、逆序删除等破环顺序操作：

会产生没有必要的真是DOM更新 ===>界面效果没问题，但效率低

2）如果结构中还包含输入类的DOM：

会产生错误DOM更新 ===>界面有问题

3.开发中如何选择key?:

1）最好使用每条数据的唯一表示作为key,比如id、手机号、身份证号、学号等唯一值。

2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

Vue数据监测原理

下面代码为仿照Vue实现的一个数据监测代码，但是不够完善。该代码监测的是对象里面的数据的改变。

<script type='text/javascript'>
    let data = {
        name: "尚硅谷",
        address: "上海"
    }

    // 创建构造函数的实例对象
    const obs = new Observer(data)
    // 创建一个构造函数,此处的obj是形参，代表传入一个对象
    function Observer(obj) {
        // 汇总对象中所有的属性，形成一个数组
        const keys = Object.keys(obj)

        // 遍历每个属性，给每个属性进行定义
        keys.forEach(k => {
            Object.defineProperty(this, k, {
                get() {
                    console.log(`${k}被读取了`);
                    return obj[k]
                },
                set(val) {
                    console.log(`${k}被修改了`);
                    obj[k] = val
                }
            })
        });
    }
</script>

Vue数据监测总结

原理
1. vue 会监视data中所有层次的数据

2.如何监测对象中的数据?
        通过setter 实现监视，且要在new Vue()时就传入要监测的数据
        1）对象创建后追加的属性，Vue 默认不做响应式处理
          2）如需给后添加的属性做响应式，请使用如下API

Vue . set(target , propertyName/ index ,value )

Vm。$set(target , propertyName/ index, value)

3.如何监测数组中的数据?
        通过包裹数组更新元素的方法实现，本质就是做了两件事
                a.调用原生对应的方法对数组进行更新
                b.重新解析模板,进而更新页面

4.在Vue修改数组中的某个元素-定要用如下方法

        push()、pop()、 unshift() 、shift() 、splice() 、sort() 、reverse() 这几个方法被Vue重写了
        Vue.set()或vm. $set()
        特别注意: Vue.set() 和Vm. $set()不能给vm或vm的根数据对象( data等)添加属性

<title>总结数据监视</title>
<style>
    button {
        margin-top: 10px;
    }
</style>
<script type="text/javascript" src="../js/vue.js"></script>
<div id="root">
    <h1>学生信息</h1>
    <button @click="student.age++">年龄+1岁</button> <br />
    <button @click="addSex">添加性别属性，默认值：男</button> <br />
    <button @click="student.sex = '未知' ">修改性别</button> <br />
    <button @click="addFriend">在列表首位添加一个朋友</button> <br />
    <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br />
    <button @click="addHobby">添加一个爱好</button> <br />
    <button @click="updateHobby">修改第一个爱好为：开车</button> <br />
    <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
    <h3>姓名：{{ student.name }}</h3>
    <h3>年龄：{{ student.age }}</h3>
    <h3 v-if="student.sex">性别：{{student.sex}}</h3>
    <h3>爱好：</h3>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index">{{ h }} </li>
    </ul>
    <h3>朋友们：</h3>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">{{ f.name }}--{{ f.age }}</li>
    </ul>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el: '#root',
        data: {
            student: {
                name: 'tom',
                age: 18,
                hobby: ['抽烟', '喝酒', '烫头'],
                friends: [
                    { name: 'jerry', age: 35 },
                    { name: 'tony', age: 36 }
                ]
            }
        },
        methods: {
            addSex() {
                // Vue.set(this.student,'sex','男')
                this.$set(this.student, 'sex', '男')
            },
            addFriend() {
                this.student.friends.unshift({ name: 'jack', age: 70 })
            },
            updateFirstFriendName() {
                this.student.friends[0].name = '张三'
            },
            addHobby() {
                this.student.hobby.push('学习')
            },
            updateHobby() {
                // this.student.hobby.splice(0,1,'开车')
                // Vue.set(this.student.hobby,0,'开车')
                this.$set(this.student.hobby, 0, '开车')
            },
            removeSmoke() {
                this.student.hobby = this.student.hobby.filter((h) => {
                    return h !== '抽烟'
                })
            }
        }
    })
</script>

搜集表单数据

若：<input type="text"/> 则v-model收集的是value值，用户输入的就是value值

若：<input type="radio"/> 则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性：

1）v-model的初始值是非数组，那么收集的是checked（勾选 or 未勾选，是布尔值）

2）v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

1.lazy：失去焦点再收集数据

2.number：输入字符串转为有效的数字

3.trim：输入首位空格过滤

<!DOCTYPE html>
<html lang="zh-CN">

<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 type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- action属性用于指定表单提交的地址 -->
        <!-- 当表单发生提交时，表单提交后会默认刷新页面为了阻止页面刷新，通过prevent -->
        <form @submit.prevent="demo">
            <label for="accountNumber">账号：</label>
            <input type="text" id="accountNumber" v-model.trim="userInfo.account"><br /><br />
            <label for="password">密码：</label>
            <input type="password" id="password" v-model="userInfo.password"><br /><br />
            <label for="age">年龄：</label>
            <input type="number" id="age" v-model.number="userInfo.age"><br /><br />
            性别：
            <!-- 通过name属性可以控制单选按钮的选择不被重复 -->
            <label for="male">男</label>
            <input type="radio" id="male" name="sex" v-model="userInfo.sex" value="male">
            <label for="female">女</label>
            <input type="radio" id="female" name="sex" v-model="userInfo.sex" value="female"><br /><br />
            爱好：
            <label for="smoke">抽烟</label>
            <input type="checkbox" id="smoke" v-model="userInfo.hobby" value="smoke">
            <label for="drink">喝酒</label>
            <input type="checkbox" id="drink" v-model="userInfo.hobby" value="drink">
            <label for="perm">烫头</label>
            <input type="checkbox" id="perm" v-model="userInfo.hobby" value="perm"><br /><br />
            <label for="school">所属校区</label>
            <select id="school" v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="guangzhou">广州大学城</option>
                <option value="foshan">佛山南海</option>
                <option value="chaoshan">潮汕汕头</option>
                <option value="shipai">石牌</option>
            </select><br /><br />
            <label for="otherInformation">其它信息：</label>
            <textarea id="otherInformation" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br /><br />
            <input type="checkbox" id="readAndAccept" v-model="userInfo.agree">
            <label for="readAndAccept">阅读并接受<a href=":;javascript">《用户协议》</a></label><br /><br />
            <button>提交</button>
        </form>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            userInfo: {
                account: "",
                password: "",
                age: 18,
                sex: "female",
                hobby: [],
                city: "",
                other: "",
                agree: ""
            }
        },
        methods: {
            demo() {
                console.log(JSON.stringify(this.userInfo));
            }
        }
    })
</script>

</html>

过滤器

定义：对要显示的数据进行特定格式化后显示（适用于一些简单的逻辑处理）

语法：

1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{ }}

2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind：属性=”xxx | 过滤器名“

备注：

1.过滤器也可以接受额外参数、多个过滤器也可以串联

2.并没有改变原本的数据，是产生新的对应的数据

v-html指令

1.作用：向指定节点中渲染包含html结构的内容

2.与插值语法的区别：

1）v-html会替换掉节点中所有的内容，{{xx}}则不会

2）v-html可以之别html结构

3.严重注意：v-html有安全性问题！！！！

1）在网站上动态渲染任意HTML是非常危险的，容易导致XXS攻击。

2）一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！

v-clock指令（没有值）

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-clock属性

2.使用css配合v-clock可以解决网速慢时网页展示出{{xxx}}的问题

v-once指令（没有值）

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

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

v-pre指令（没有值）

1.跳过其所在节点的变异过程

2.可以利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

自定义指令总结

一、定义语法

1.局部指令：

new Vue ({
    directives:{指令名：配置对象}
})

new Vue ({
    directives:{指令名：回调函数}
})

2.全局指令

Vue.directive:{指令名：配置对象}

Vue.directive:{指令名：回调函数}

二、配置对象中常用的3个回调：

1.bind:指令与元素成功绑定时调用

2.inserted：指令所在元素被插入页面时调用

3.update：指令所在模板结构被重新解析时调用

三、备注

1.指令定义时不加v-，但使用时要加v-

2.指令如果时多个单词，要使用kebab-case命名方式，不要用camelCase命名

菜菜取名快废了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习：Vue知识点盘点

Vue中有两种数据绑定方式：1.单向绑定（v-bind）：数据只能从data流向页面2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data注：1.双向绑定一般应用在表单类元素上（如：input，select等）2.v-model：value可以简写为v-model，因为v-model默认收集的就是value的值1.el有两种写法1）new Vue时候配置el属性2）先创建Vue实例，随后再通过vm.$mount("#root")指定el的值2.data有两种写法1）对象式2）
复制链接

扫一扫