Vue2知识汇总

SuHongSuger

于 2023-12-27 14:55:39 发布

阅读量1.9k

点赞数 49

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/baiyixiangxiaoho/article/details/135215155

版权

vue2

1.vue简介

1.什么是vue

Vue.js（通常简称为Vue）是一种流行的JavaScript框架，用于构建Web用户界面。Vue由尤雨溪于2014年创建，其目标是通过简单易学、灵活和高效的API来提供响应式和可复用的组件化构建方式。Vue基于MVVM模式（Model-View-ViewModel），通过将视图层和数据层分开，为开发人员提供了一种更好的方式来管理复杂的应用程序。

Vue拥有许多特性，包括响应式数据绑定、模板语法、组件化、路由、状态管理等。它还具有非常好的可扩展性和与其他库和工具的兼容性。Vue在Web开发领域中得到了广泛的应用，并且拥有一个庞大的社区，提供了大量的插件和库来扩展其功能。

2.vue2框架的特点

响应式数据绑定：Vue 2通过使用Object.defineProperty()函数实现响应式数据绑定。这意味着当数据发生变化时，相关的视图会自动更新。
组件化：Vue 2支持组件化，使得我们可以将UI组件拆分为更小、更简单的部分。这样做不仅提高了代码的可复用性，还有助于提高项目的可维护性。
虚拟DOM：Vue 2使用虚拟DOM来更新视图，这使其具有更好的性能。通过将DOM操作缓存到虚拟DOM中，Vue只需要在必要的时候才会更新真实的DOM元素。
模板语法：Vue 2使用简单且易于理解的模板语法，使得编写和维护模板变得非常容易。
过滤器：Vue 2支持过滤器，可以很方便地处理文本格式化、数据筛选等任务

2.vue的前置知识

1.es6的基础语法

了解es6新特性：最全的—— ES6有哪些新特性？_es6新特性-CSDN博客

2.flex布局

以下是flex布局的知识树：

flex布局学习：弹性盒子（display: flex）布局超全讲解|Flex 布局教程_display flex-CSDN博客

3.vue的开始

1.进入vue

1.vue的官网

官网链接：Vue.js

vue的API文档：介绍 — Vue.js

2.第一个vue项目

2.vue的学习思维图

1.了解MVVM

1.什么事MVVm

MVVM是一种软件架构模式，用于将用户界面（View）和业务逻辑（Model）分离，并通过ViewModel作为中介来实现它们之间的双向数据绑定。

在Vue.js中，View是由HTML模板组成的，ViewModel是Vue实例，而Model则是Vue实例的数据。Vue实例充当ViewModel的角色，它负责处理业务逻辑和状态管理。

Vue实例通过将数据和视图进行绑定来实现双向数据绑定。当数据发生变化时，视图会自动更新；反过来，当用户与视图交互时，数据也会自动更新。

在MVVM模式下，开发者只需要关注业务逻辑和数据处理，而无需直接操作DOM。这样可以大大简化前端开发的复杂性，并提高代码的可维护性和重用性。

Vue.js的核心特性还包括组件化、指令系统、虚拟DOM等，这些特性使得开发者可以更加高效地构建交互性强、功能丰富的前端应用程序。

2.MVVN的工作原理

MVVM（Model-View-ViewModel）的工作原理可以简单概括为以下几个步骤：

数据绑定：ViewModel将Model中的数据与View中的UI元素进行双向绑定。当Model中的数据发生变化时，ViewModel会自动更新，然后通知View更新。
视图更新：ViewModel监听Model数据的变化，当数据发生改变时，ViewModel会通知View进行相应的更新。这种双向绑定机制使得视图与数据保持同步。
用户交互：当用户与View进行交互（比如输入表单、点击按钮等），View会将操作传递给ViewModel，ViewModel再根据业务逻辑更新Model中的数据。
数据更新：ViewModel更新Model中的数据后，Model会触发变化事件，ViewModel监听到数据变化后，再通知View相应地更新视图。

整个过程形成了一个闭环，即数据的变化引起视图的更新，用户交互引起数据的变化，从而实现了数据、视图和用户交互的高度关联和同步。在Vue.js中，这一机制是通过虚拟DOM和响应式系统来实现的。当数据发生变化时，Vue会比较新旧虚拟DOM树的差异，然后只对需要更新的部分进行实际的DOM操作，以提高性能。同时，Vue的响应式系统会监测数据的变化，并通知相关的视图组件进行更新。

3.第一个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>

    // 第一步：引入vue.js

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

  </head>

  <body>

    // 第二步：创建根节点

    <div id="app">

    </div>

    <script>

       // 第三步：初始化vue实例，绑定根节点

      var app= new Vue({

        el: "#app",

        data: {

          msg: "第一个vue实例!",

        },

      })

    </script>

  </body>

</html>

4.了解vue2的一些基础特性

1.vue事例中常用到的构建选项

1.data

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1、对象（Object）的形式：

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                content: "Mustache表达式通过data为对象获取content的值"

            }

        })

    </script>

2、函数（Function）的形式：

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            // 这是下面function的简写形式

            data(){

                       return {

                            name:'张三',

                            age:18

                    }

              },

             // 另一种写法

            // data:function() {

            //     return {

            //         name: '张三',

            //         age: 18,

            //         sex: '男'

            //     }

            // },

        })

    </script>

2.computed

计算属性（computed）是一种方便的机制，用于基于已有的数据进行复杂的计算，并返回一个新的属性值。计算属性可以根据依赖的数据变化自动更新，类似于一个响应式函数。

<!DOCTYPE html>
<html>
<head>
  <title>Vue Computed Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="number" v-model="a">
    <input type="number" v-model="b">
    <p>Sum: {{ sum }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        a: 0,
        b: 0
      },
      computed: {
        sum: function() {
          return this.a + this.b;
        }
      }
    });
  </script>
</body>
</html>

在这个例子中，我们创建了一个Vue实例，它有两个数据属性：a和b，分别表示两个输入框中的值。然后，我们定义了一个计算属性sum，它的值是a和b的和。

在HTML模板中，我们使用双花括号语法{{ sum }}来引用计算属性sum的值，并将其显示在<p>标签中。

当用户在输入框中输入值时，a和b的值会发生变化，触发计算属性sum的重新计算。由于计算属性是基于依赖的数据来自动更新的，所以sum的值将自动更新，并在页面中显示新的和。

3.methods

`methods`和`computed`的区别

methods:
- methods 选项允许你在Vue实例中定义方法。
- 这些方法可以被用来响应用户输入、DOM事件、定时器等。
- 每当重新渲染时，都会重新运行这些方法。
computed:
- computed 选项允许你定义基于现有数据的计算属性。
- 这些计算属性是基于它们的依赖进行缓存的，只有在相关依赖发生改变时才会重新求值。
- 由于其缓存特性，适合用来处理一些复杂的逻辑计算或需要基于数据动态变化的情况。

实例

<div id="app">
  <p>原始消息: {{ message }}</p>
  <p>翻转消息: {{ reversedMessage }}</p>
  <button @click="reverseMessage">翻转消息</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
});

在这个示例中，我们有一个message属性，以及一个reverseMessage方法和一个reversedMessage计算属性。当点击按钮时，reverseMessage方法会将message进行反转；而reversedMessage计算属性则会返回message的反转结果。需要注意的是，无论点击多少次按钮，reversedMessage都只在message改变时才会重新计算，而不会每次重新渲染时都执行。

4.watch

watch 函数可以用来监听某个属性的变化，并在属性值变化时执行指定的回调函数。watch 函数接收两个参数：要监听的属性名和回调函数。当属性值发生变化时，回调函数会被触发。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue.js Watch Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message">
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      watch: {
        message: function (newVal, oldVal) {
          console.log('message changed from', oldVal, 'to', newVal);
        }
      }
    });
  </script>
</body>
</html>

在上面的示例中，我们创建了一个 Vue 实例，并将其绑定到页面上的一个元素上。该实例包含一个 message 属性和一个 watch 对象。当用户在输入框中修改 message 的值时，watch 对象中的回调函数会被触发，并将新值和旧值作为参数传递给回调函数。在这个例子中，回调函数简单地将新值和旧值打印到控制台上。

<div id="app">
  <h1>{{ user.name }}</h1>
  <input v-model="user.name">
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    user: {
      name: 'Tom',
      age: 20
    }
  },
  watch: {
    'user.name': function (newVal, oldVal) {
      console.log('user name changed from', oldVal, 'to', newVal);
    },
    user: {
      handler: function (newVal, oldVal) {
        console.log('user object changed');
      },
      deep: true
    }
  }
});
</script>

在上面的例子中，我们同时监听了 user.name 和 user。当我们修改 user.name 的值时，只有 user.name 的回调函数会被触发；而当我们修改 user 的值时，由于使用了 deep 选项，所以 user 的回调函数也会被触发。

5.props

props 是用于父子组件之间进行数据传递的一种机制。通过使用 props，父组件可以向子组件传递数据，子组件则可以接收并使用这些数据。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue.js Props Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="app">
    <child-component :message="parentMessage"></child-component>
  </div>

  <script>
    Vue.component('child-component', {
      props: ['message'],
      template: '<div>{{ message }}</div>'
    });

    var app = new Vue({
      el: '#app',
      data: {
        parentMessage: 'Hello from parent'
      }
    });
  </script>
</body>
</html>

在上面的示例中，我们创建了一个父组件和一个子组件。父组件通过 v-bind 指令将 parentMessage 传递给了子组件的 message 属性。子组件中的 props 对象声明了一个名为 message 的属性，用于接收来自父组件的数据，并在模板中进行渲染。

需要注意的是，父组件传递给子组件的数据是单向绑定的，因此在子组件中修改 message 并不会影响到父组件中的 parentMessage。

Vue.component('child-component', {
  props: {
    propA: Number,
    propB: {
      type: String,
      required: true
    },
    propC: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    }
  },
  template: '<div>{{ propA }}, {{ propB }}, {{ propC.message }}</div>'
});

6.inject

inject是一种依赖注入的方式，用于在父组件中将数据或方法注入到子组件中。通过使用provide和inject，我们可以在组件层次结构中共享数据，而不需要通过props一层层传递。这对于跨多个层级的组件通信非常有用。

7.provide

provide是一种向其子孙组件提供数据的选项，它能够在组件层次结构中有效地共享数据。子孙组件可以通过inject选项访问所提供的数据，这使得跨多层级的组件通信变得更加简单和灵活。

<!DOCTYPE html>
<html>
<head>
  <title>Vue Inject Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <parent-component></parent-component>
  </div>

  <script>
    // 定义一个父组件
    const ParentComponent = {
      template: `
        <div>
          <child-component></child-component>
        </div>
      `
    };

    // 定义一个子组件，并注入父组件的数据
    const ChildComponent = {
      inject: ['message'],
      template: `
        <div>
          <p>{{ message }}</p>
        </div>
      `
    };

    new Vue({
      el: '#app',
      provide: {
        message: 'Hello from the parent component'
      },
      components: {
        ParentComponent,
        ChildComponent
      }
    });
  </script>
</body>
</html>

在这个例子中，我们定义了一个父组件ParentComponent，它包含一个子组件ChildComponent。父组件通过provide选项提供了一个名为message的数据，值为"Hello from the parent component"。子组件使用inject选项将父组件提供的message注入到自身，并在模板中使用。

在HTML模板中，我们使用自定义的<parent-component>标签来渲染父组件。

运行这个示例后，可以看到子组件成功地接收到了父组件提供的数据，并将其显示在页面上。

8.components

在 Vue.js 2 中，组件是构建用户界面的基本单位。通过组件化，我们可以将页面分解成多个独立的、可复用的模块，从而提高代码的可维护性和可重用性。创建一个组件需要先定义一个 Vue 实例的构造器，然后通过 Vue.component 方法注册组件，最后在模板中使用这个组件。

<!DOCTYPE html>
<html>
<head>
  <title>Vue Component Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <!-- 使用我们定义的 'my-component' 组件 -->
  <my-component></my-component>
</div>

<script>
// 定义一个名为 'my-component' 的新组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

// 创建一个 Vue 实例
new Vue({
  el: '#app'
});
</script>

</body>
</html>

在这个示例中，我们定义了一个名为 'my-component' 的组件，它的模板是一个简单的 <div> 元素。然后我们在 Vue 实例的模板中使用了这个组件，即 <my-component></my-component>。

当浏览器加载这个页面时，Vue 将会渲染出 "A custom component!"，这就是我们刚刚定义的组件的内容。

2.Vue2中的一些常用指令

1.v-model

双向数据绑定，将输入框的值与数据对象的属性绑定在一起。

<input v-model="message" type="text">
<p>{{ message }}</p>

2.v-bind

动态绑定属性或class、style等特殊属性。

<div v-bind:class="{ active: isActive }"></div>
<img v-bind:src="imageSrc">

3.v-if/v-else-if/v-else

根据条件渲染元素。

<div v-if="isTrue">这是true的情况</div>
<div v-else-if="isFalse">这是false的情况</div>
<div v-else>既不是true也不是false的情况</div>

4.v-for

循环渲染元素。

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

5.v-on

绑定事件监听器。

<button v-on:click="handleClick">点击我</button>

6.v-show

根据条件控制元素的显示和隐藏。

<div v-show="isVisible">可见或隐藏的内容</div>

7.v-text

将数据绑定到元素的文本内容上。

<span v-text="message"></span>

8.v-html

将数据解析为HTML并渲染到元素上，用于显示富文本内容。

<div v-html="htmlContent"></div>

3.事件修饰符

Vue 2中的事件修饰符有以下几种：

.stop - 阻止事件冒泡
.prevent - 阻止事件默认行为
.capture - 使用事件捕获模式
.self - 只有当事件是从该元素自身触发时才触发回调
.once - 事件只触发一次
.passive - 指示浏览器不要阻止事件的默认行为

<div id="app">
  <button v-on:click.stop="stopClick">停止冒泡</button>
  <form v-on:submit.prevent="submitForm">阻止默认行为</form>
  <div v-on:click.capture="captureClick">捕获事件</div>
  <button v-on:click.self="selfClick">只在自身触发</button>
  <button v-on:click.once="onceClick">只触发一次</button>
  <a href="#" v-on:click.passive="passiveClick">指示浏览器不要阻止默认行为</a>
</div>

new Vue({
  el: '#app',
  methods: {
    stopClick: function (event) {
      event.stopPropagation();
    },
    submitForm: function (event) {
      event.preventDefault();
    },
    captureClick: function () {
      console.log('捕获事件');
    },
    selfClick: function () {
      console.log('只在自身触发');
    },
    onceClick: function () {
      console.log('只触发一次');
    },
    passiveClick: function () {
      console.log('指示浏览器不要阻止默认行为');
    }
  }
});

4.filter过滤器

在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。

过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数必须接收表达式的值 (之前的操作链的结果) 作为第一个参数。

局部过滤器示例代码：


<!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="../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <p>电脑的价格:{{price|addPriceIcon}}</p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                price:200

            },

            // 通过过滤器的方式在价格前面加上价格的符号

            filters:{

                // value就是传入的200的值

                addPriceIcon(value){

                    return '￥'+value

                }

            }

        })

    </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="../js/vue.js"></script>

</head>



<body>

    <div id="app">

        <p>电脑的价格:{{price|addPriceIcon}}</p>

    </div>

    <script>

        // 通过过滤器的方式在价格前面加上价格的符号

        Vue.filter('addPriceIcon', function (value) {

            return '￥' + value

        })

        new Vue({

            el: '#app',

            data: {

                price: 200

            },

        })

    </script>

</body>



</html>

5.Vue的项目化

参考链接：如何新建一个vue2项目（超详细哦）_创建vue2项目-CSDN博客

SuHongSuger

关注

49
点赞
踩
36

收藏

觉得还不错? 一键收藏
1
评论
Vue2知识汇总

Vue.js（通常简称为Vue）是一种流行的JavaScript框架，用于构建Web用户界面。Vue由尤雨溪于2014年创建，其目标是通过简单易学、灵活和高效的API来提供响应式和可复用的组件化构建方式。Vue基于MVVM模式（Model-View-ViewModel），通过将视图层和数据层分开，为开发人员提供了一种更好的方式来管理复杂的应用程序。Vue拥有许多特性，包括响应式数据绑定、模板语法、组件化、路由、状态管理等。它还具有非常好的可扩展性和与其他库和工具的兼容性。Vue在Web开发领域中得到了广泛的
复制链接

扫一扫