Vue基础以及指令（1）

可叹落叶飘零i

已于 2023-08-01 10:56:06 修改

阅读量64

点赞数

分类专栏： Vue相关知识点文章标签：前端 javascript 开发语言 vue.js 前端框架 ecmascript es6

于 2023-07-16 21:31:29 首次发布

本文链接：https://blog.csdn.net/weixin_45785651/article/details/131755383

版权

Vue相关知识点专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue概述：

Web应用开发：

vue是一款优秀的web应用开发框架。什么是web应用？

从用户的角度，web应用是一个可以提供用户交互并呈现信息的软件。即web应用要提供交互能力和信息展示；

从开发者的角度，web应用程序是一种利用网络浏览器和网络技术在互联网上执行任务的计算机程序。即前端开发者开发web应用的时候，就是在获取和控制数据，然后根据用户交互将信息展示到页面上。

前端框架：

使用原生技术（html，js，css）开发web应用，会非常复杂，复杂度来源于：

需要进行大量dom操作。
代码复用，如何能够让通用的代码可以被复用，而不是在每次开发类似的功能时候都需要重新实现一遍。

组件的概念：我们把一段可复用的界面和逻辑的集合称为一个组件。

我们通过给组件传入属性控制它的界面和行为，通过回调、事件等和它进行通信。

组件化还有另一个好处，当我们把一个应用拆分成一个个的组件时候，在开发时候只需要关心一个组件的内部逻辑和与外部的关系，能够让整个应用更易于维护和阅读。

综上，我们可以通过 声明式渲染视图 + 组件化解决这两个问题。

什么是前端框架？：前端框架是规范了开发模式的js库，规范主要包括组件化，如何声明数据和视图的关系。

当开发者使用框架开发，是在写什么？主要是在写组件：通过写组件的视图实现界面，通过写组件的声明周期钩子函数实现业务逻辑。

为什么要用框架？框架简化了工作，能够降低开发大型应用的门槛。

框架做了哪些工作？根据数据和声明视图进行dom操作，进行实际的渲染，当数据更新后更新dom；根据开发者实现的组件构建整个界面。

有框架和无框架的区别（框架的好处）？声明式渲染避免了dom操作，只需要关心视图和数据的关系；框架组件化规范了项目组织方式，让代码更容易管理，而不会让代码纷杂混乱。

Vue基础：

vue的两个主要特性是：（1）数据驱动视图；（2）双向数据绑定

vue指令：vue框架在内部定义了某些规范式的语法来帮助我们更快速，更高效地开发，这就是vue 指令（可以控制模板渲染）

（1）v-bind：属性绑定指令，可以绑定属性，class和style。可以简写为：“ : ”

const MyComponent = {
    data() {
        return {
            text: 'hello, vue',
            id: 'myComponent',
            link: 'https://v3.cn.vuejs.org/',
            className: 'my-comonent'
        };
    },
    template: `
        <div
            v-bind:id="id"
            v-bind:class="className"
            v-bind:style="{color: 'red', fontSize: '22px'}"
        >
            {{ text }}
            <a target="_blank" v-bind:href="link">Vue</a>
        </div>
    `
};

（2）v-on：事件绑定指令，可以为某个dom元素绑定事件，事件的回调写在组件的“methods”属性中。可以简写为“ @ ”

const MyComponent = {
    data() {
        return {
            counter: 1
        };
    },
    template: `
        <div>
            {{ counter }}
            <button v-on:click="increase">加1</button>
        </div>
    `,
    methods: {
        increase() {
            this.counter++;
        }
    }
};
// 点击按钮时候，会调increase方法，让counter数据自增，界面上可以看到计数增加的效果。

（3）v-model：双向绑定指令，可以为诸如输入框，复选框等输入事件绑定数据与视图的关系，即输入框的内容绑定到我们组建的data，我们改变data也能更新input的内容。

<!DOCTYPE html>
<html>
<head>
    <title>vue-demo</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="counter"></div>
    <script>
        const MyComponent = {
            data() {
                return {
                    text: ''
                };
            },
            template: `
                <div>
                    <div>输入的文本：{{text}}</div>
                    <input v-model="text" />
                    <button @click="reset">清空</button>
                </div>
            `,
            methods: {
                reset() {
                    this.text = '';
                }
            },
        }

        const app = Vue.createApp(MyComponent);
        app.mount('#counter');
    </script>
</body>
</html>
// 在input输入框中输入的内容实时展示在上面，点击清空按钮之后，输入框和上面展示都变为空。
// 实现这个效果的关键就是在input输入框上面加上v-model指令，这样Vue会把input的输入内容绑定到组件的text数据上，并且组件的text数据变化也会直接触发更新input。

考点：v-model的实现原理

实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。获取事件对象，target获取监听的对象dom，value获取最新的值。v-model = v-bind + v-on($event)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- $event获取事件对象，$event.target.value获取input值 -->
<!--  <input type="text" :value="message" @input="changeValue($event.target.value)">{{message}}-->
  <!--事件调用方法传参了，写函数时候省略了小括号，但是函数本身是需要传递一个参数的，这个参数就是原生事件event参数传递进去-->
  <input type="text" :value="message" @input="changeValue">{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "hello world"
    },
    methods: {
      changeValue(event){
        console.log("值改变了");
        this.message = event.target.value
      }
    }
  })
</script>
</body>
</html>

（4）v-if，v-show：条件渲染指令，可以用来控制是否渲染某个节点，达到条件渲染某个节点的效果。

v-if基本用法：

const MyComponent = {
    data() {
        return {
            counter: 1
        };
    },
    template: `
        <div>
            {{ counter }}
            <button v-on:click="increase">加1</button>
            <div v-if="counter % 2 === 0">偶数</div>
            <div v-else>奇数</div>
        </div>
    `,
    methods: {
        increase() {
            this.counter++;
        }
    }
};

v-show基本用法：

const MyComponent = {
    data() {
        return {
            counter: 1
        };
    },
    template: `
        <div>
            {{ counter }}
            <button v-on:click="increase">加1</button>
            <div v-show="counter % 2 === 0">偶数</div>
            <div v-show="counter % 2 !== 0">奇数</div>
        </div>
    `,
    methods: {
        increase() {
            this.counter++;
        }
    }
};
// v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

考点：v-if和v-show的区别

行为不同：v-if指令在满足条件时候才会渲染DOM，v-show一开始就渲染DOM，满足条件时候才设置CSS的display属性让元素显示出来。即v-if会动态创建和删除元素，v-show则是通过css样式控制显隐

应用场景不同：一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

（5）v-for：列表渲染指令，适用于循环渲染某个数组生成列表。

v-for基础用法：

const MyComponent = {
    data() {
        return {
            digitList: [1, 2, 3, 4, 5],
            userList: [
                {name: 'Tom', age: 12},
                {name: 'Joy', age: 11},
                {name: "Ann", age: 10}
            ]
        };
    },
    template: `
        <div>
            <div class="digit-list">
                <div v-for="(digit,index) in digitList" :key="index">{{digit}}</div>
            </div>
            <div class='user-list'>
                <div v-for="user in userList" :key="user.name">
                    {{user.name}}
                    {{user.age}}
                </div>
            </div>
        </div>
    `
};

考点：v-for中，需要动态为列表项绑定唯一的key值的原因

        1.vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件。 key的作用主要是为了高效的更新虚拟DOM。

        2.key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。

        3.没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改变，而是简单复用原来位置的每个元素。如果删除第一个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。

        4.尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的。

        5.标签名一样，key一样这时候就会就地复用，如果标签名不一样，key一样不会复用。

考点：为什么v-if和v-for不应该同时使用

v-if和v-for不要同时使用，因为会在每次渲染时候都要遍历列表并判断是否需要渲染，这个遍历操作其实是有一部分冗余或者完全不必要的。

解决方法：应该用以下方式替换v-if和v-for同时使用的方案：

如果是为了过滤一个列表中的项目（v-for循环，v-if过滤条件），可以将列表作为计算属性，在computed中过滤出需要渲染的列表，再进行渲染。这样避免了每次渲染都计算（只在computed依赖的属性变化时候才计算），同时渲染列表是过滤了的，那么循环的次数也可能减少。

如果是为了控制整个列表的展示和隐藏（v-for循环，v-if判断整个列表是否需要展示），可以将判断条件放到父元素（ul、ol）或者添加一个模板标签template上。这样展示和隐藏的判断只需要执行一次（在列表最开始）。

可叹落叶飘零i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础以及指令（1）

vue是一款优秀的web应用开发框架。什么是web应用？从用户的角度，web应用是一个可以提供用户交互并呈现信息的软件。即web应用要提供交互能力和信息展示；从开发者的角度，web应用程序是一种利用网络浏览器和网络技术在互联网上执行任务的计算机程序。即前端开发者开发web应用的时候，就是在获取和控制数据，然后根据用户交互将信息展示到页面上。
复制链接

扫一扫