Vue入门1

什么是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能够自动检测到这些变化,并更新相关的视图。

响应式的特点包括:

  1. 数据驱动视图:Vue中的视图是根据数据的状态来动态渲染的,只要数据发生变化,相关的视图就会自动更新,无需手动操作DOM。

  2. 声明式编码:使用Vue,你只需要专注于描述你的目标数据状态,而不需要考虑如何去更新DOM,Vue会根据数据的变化自动更新视图。

  3. 精确追踪:Vue能够精确地追踪每个组件所依赖的数据,从而在数据发生变化时只更新受影响的部分视图,而不是整个页面。

  4. 高效性能:由于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
  }
}

生命周期

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

  1. 创建阶段:

    • beforeCreate:在实例初始化之后,数据观测和事件配置之前调用。
    • created:实例已经创建完成之后调用。在这一步,实例已完成了数据观测、属性和方法的运算,但挂载阶段还未开始,因此$el属性目前不可见。
  2. 挂载阶段:

    • beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用。
    • mounted:el被新创建的vm.$el替换,并挂载到实例上之后调用该钩子。
  3. 更新阶段:

    • beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
    • updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。
  4. 销毁阶段:

    • beforeDestroy:在实例销毁之前调用。实例仍然完全可用。
    • destroyed:在实例销毁之后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例被销毁。
  • 17
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值