Vue入门1

最新推荐文章于 2024-07-17 17:57:11 发布

沼泽里的森林

最新推荐文章于 2024-07-17 17:57:11 发布

阅读量726

点赞数 17

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_79742908/article/details/136239470

版权

什么是Vue

Vue是一款流行的前端JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。Vue具有简单易学的API、双向数据绑定、组件化开发等特点，使得开发者能够更高效地构建交互性强、响应速度快的Web应用程序。Vue已经成为许多开发者喜爱的前端框架之一，并且拥有庞大的社区支持和丰富的生态系统。

插值表达式

在 Vue 模板中，插值表达式使用双大括号 {{ }} 包裹，例如：{{ message }}。这里的 message 是 Vue 实例中的一个数据属性，它会在模板渲染时被动态替换为实际的数据值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">{{msg}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
               msg: 'hello'
            }
                
        })
    </script>
</body>
</html>

响应式

响应式"是指当数据发生变化时，相关的视图会自动更新。Vue通过使用数据劫持和观察的方式来实现响应式，即当 Vue 实例的数据发生变化时，Vue能够自动检测到这些变化，并更新相关的视图。

响应式的特点包括：

数据驱动视图：Vue中的视图是根据数据的状态来动态渲染的，只要数据发生变化，相关的视图就会自动更新，无需手动操作DOM。
声明式编码：使用Vue，你只需要专注于描述你的目标数据状态，而不需要考虑如何去更新DOM，Vue会根据数据的变化自动更新视图。
精确追踪：Vue能够精确地追踪每个组件所依赖的数据，从而在数据发生变化时只更新受影响的部分视图，而不是整个页面。
高效性能：由于Vue的响应式系统可以精确追踪数据的变化，因此在更新视图时能够做到高效、快速，并且避免不必要的DOM操作。

Vue指令

v-html

用于将数据作为原始 HTML 插入到 DOM 中。这意味着该指令会将数据解释为 HTML，并将其插入到指定元素的内部。需要注意的是，由于潜在的安全风险，应谨慎使用v-html，并确保所插入的内容是可信任的。

v-show

用于根据表达式的真假条件来控制元素的显示或隐藏。当表达式的值为真时，元素会显示；当表达式的值为假时，元素会隐藏，但仍然会保留在DOM中。

v-if

当使用v-if指令时，元素的存在与否是动态切换的，即当条件为真时，元素存在于 DOM 中，条件为假时，元素从 DOM 中移除。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>

v-else

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>

v-for

用于循环遍历数组或对象，并生成对应的 HTML 元素列表。

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-on

用于绑定事件处理函数的指令。通过 v-on 指令，你可以在 DOM 事件触发时执行特定的 JavaScript 代码。

基本的用法是，在需要监听的 HTML 元素上使用 v-on 指令，并指定要监听的事件和要执行的方法名。例如：

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

上面的例子中，当按钮被点击时，handleClick 方法将会被调用。

另一种常见的简写形式是使用 @ 符号来表示 v-on：

<button @click="handleClick">点击我</button>

除了 click 事件，你还可以监听其他事件，比如 mouseover, input, submit 等等。

v-bind

用于动态绑定 HTML 特性的指令。通过 v-bind，你可以将 Vue 实例中的数据和表达式与 HTML 元素的特性进行绑定，从而实现动态更新页面内容的效果。

基本的用法是，在需要绑定的 HTML 元素上使用 v-bind 指令，并指定要绑定的特性名和要绑定的数据或表达式。例如：

<img v-bind:src="imageSrc">

上面的例子中，imageSrc 是 Vue 实例中的一个数据，它将动态地绑定到 src 特性上，根据 imageSrc 的值来显示对应的图片。

另一种常见的简写形式是使用 : 符号来表示 v-bind：

<img :src="imageSrc">

除了 src 特性，你还可以通过 v-bind 绑定其他特性，比如 href, class, style 等等。这样可以根据应用的状态动态地修改元素的属性。

v-model

用于在表单输入元素和 Vue 实例的数据之间创建双向绑定。通过使用 v-model，可以轻松地在表单输入元素（如 input、textarea、select 等）和 Vue 实例的数据之间实现数据的双向绑定。

例如，当你在一个输入框中使用 v-model 指令时，输入框中的值会自动与 Vue 实例中指定的数据进行同步，当你修改输入框中的值时，Vue 实例中的数据也会相应地更新，反之亦然。

示例：

<div id="app"> 
<input v-model="message" placeholder="Edit me"> 
<p>Message is: {{ message }}</p> 
</div> 
<script> 
var app = new Vue({ 
el: '#app',
data: { message: 'Hello Vue!' } 
}) 
</script>

在上面的示例中，输入框中的值和 message 数据会实现双向绑定，它们会始终保持同步。

计算属性

用于根据已有的数据计算并生成新的数据。计算属性的好处在于它们可以根据依赖的数据自动更新，而且能够缓存计算结果，只有在相关数据发生改变时才会重新计算，这样可以提高性能并减少不必要的计算。

计算属性通常用于对已有的数据进行处理、筛选、过滤等操作，从而生成新的衍生数据，而且可以在模板中直接使用，就像普通的数据属性一样。

简写：

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    // 计算属性的 getter
    fullName: function () {
      return this.firstName + ' ' + this.lastName;
    }
  }
})

完整写法：

var app = new Vue({
            el:'#app',
            data: {
                firstName: 'John',
                lastName: 'Doe'
            },
            computed: {
                fullName: {
                    get(){
                        return this.firstName + ' ' + this.lastName;
                    },
                    set(){
                        修改的代码
                    }
                }
            }
        })

watch（监视器）

watch 选项用来监控 Vue 实例上的数据变化，并在数据变化时执行相应的操作。

在 Vue 实例中使用 watch 选项，可以监听指定的数据属性，当这些数据属性发生变化时，可以执行一些自定义的操作，比如发送请求、更新其他数据等。

简单写法：

<div id="app">
  <p>Current count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watch: {
    count: function (newCount, oldCount) {
      console.log('count 发生了变化：' + oldCount + ' => ' + newCount);
      // 在 count 变化时执行其他操作
    }
  },
  methods: {
    increment: function () {
      this.count++;
    }
  }
})
</script>

完整写法：

深度检测：deep

watch: {
  obj: {
    handler: function (val, oldVal) { /* 处理程序 */ },
    deep: true
  }
}

立即执行回调（immediate）

默认情况下，Vue 在创建 watch 时不会立即执行回调函数，而是在被监听的数据发生变化后才执行。如果需要在 watch 创建时立即执行一次回调函数，可以设置 immediate: true。

watch: {
  value: {
    handler: function (val, oldVal) { /* 处理程序 */ },
    immediate: true
  }
}

生命周期

生命周期可以分为四个阶段，分别是创建阶段、挂载阶段、更新阶段和销毁阶段。

创建阶段：
- beforeCreate：在实例初始化之后，数据观测和事件配置之前调用。
- created：实例已经创建完成之后调用。在这一步，实例已完成了数据观测、属性和方法的运算，但挂载阶段还未开始，因此$el属性目前不可见。
挂载阶段：
- beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
- mounted：el被新创建的vm.$el替换，并挂载到实例上之后调用该钩子。
更新阶段：
- beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
- updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
销毁阶段：
- beforeDestroy：在实例销毁之前调用。实例仍然完全可用。
- destroyed：在实例销毁之后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例被销毁。

沼泽里的森林

关注

17
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
Vue入门1

Vue是一款流行的前端JavaScript框架，用于构建用户界面和单页面应用程序（SPA）。Vue具有简单易学的API、双向数据绑定、组件化开发等特点，使得开发者能够更高效地构建交互性强、响应速度快的Web应用程序。Vue已经成为许多开发者喜爱的前端框架之一，并且拥有庞大的社区支持和丰富的生态系统。
复制链接

扫一扫