Vue框架的核心功能介绍

Young诗酒趁年华

已于 2023-12-18 11:25:50 修改

阅读量1k

点赞数 25

文章标签： vue.js 前端 javascript

于 2023-12-18 11:23:05 首次发布

本文链接：https://blog.csdn.net/m0_74387428/article/details/135055286

版权

前言

Vue.js是当今非常流行的一个JavaScript前端框架，是一个轻量级、高性能的JavaScript框架，它可以帮助我们轻松构建用户界面，因此受到了许多开发者的喜爱。在本篇文章中，我们将探讨Vue的一些核心功能，例如指令、props、mixins等。

常用指令

v-model

v-model称为“双向数据绑定指令”，通常用于表单元素，比如输入框、复选框、单选框等，能够在用户输入时实时更新数据，并在数据变化时同步更新视图，这能够帮助我们减少代码量

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>v-model 示例</title>
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <!-- 输入框使用 v-model 实现与 message 数据的双向绑定 -->
  <input v-model="message" placeholder="输入一些文本">
  
  <!-- 显示框反映 message 数据的变化 -->
  <p>你输入的文本是: {{ message }}</p>
</div>

<script>
  new Vue({
  el: '#app',
  data: {
    // 使用 v-model 的数据属性
    message: ''
  }
  });
</script>

</body>
</html>

v-bind

v-bind称为“单向数据绑定指令”，用于动态地绑定HTML元素的属性。它的作用是将数据绑定到HTML元素上，使页面能够响应数据的变化而动态更新，v-bind可以简写为英文冒号“:”。和v-model不同的是，v-bind 用于单向数据绑定，将数据映射到元素属性上，而 v-model 则用于实现双向数据绑定，将表单元素的值和 Vue 实例的数据进行双向关联

代码案例

<template>
  <div>
  <!-- 使用v-bind绑定class属性，根据isBold的值动态设置文字是否加粗 -->
  <p v-bind:class="{ 'bold': isBold }">This text may be bold</p>

  <!-- 使用v-bind绑定style属性，根据fontSize的值动态设置文字大小 -->
  <p v-bind:style="{ 'font-size': fontSize + 'px' }">This text may have a dynamic font size</p>

  <!-- 使用v-bind绑定href属性，动态设置链接的地址 -->
  <a v-bind:href="linkUrl">Dynamic Link</a>
  </div>
</template>

<script>
export default {
  data() {
  return {
    // 控制文字是否加粗
    isBold: true,

    // 控制文字大小
    fontSize: 16,

    // 动态链接地址
    linkUrl: 'https://baidu.com'
  };
  }
};
</script>

`v-for`

v-for 是 Vue.js 中用于循环渲染元素的指令，允许你根据数组或对象的数据源来渲染一个列表或者一组元素。它的灵活性和简洁性能够轻松地迭代数据并生成相应的 DOM 元素

代码案例

<template>
  <ul>
  <!-- 使用 v-for 遍历 items 数组，为每个数组元素生成 li 元素 -->
  <li v-for="(item, index) in items" :key="item.id">
    <!-- 显示数组元素的文本内容和索引值 -->
    {{ index + 1 }}. {{ item.text }}
  </li>
  </ul>
</template>

<script>
export default {
  data() {
  return {
    // 数据源，包含多个对象作为数组元素
    items: [
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' }
    ]
  };
  }
};
</script>

`v-on`

v-on 是 Vue.js 中用于监听 DOM 事件并执行相应逻辑的指令。它可以用于绑定事件处理函数，使得在特定事件发生时触发相应的操作。该指令可以简写为@

代码案例

click 是一个DOM事件，表示鼠标单击操作。在Vue.js中，通过 v-on 指令可以监听到DOM元素上的 click 事件，从而触发相应的处理逻辑。

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

<script>
export default {
  methods: {
  // 定义事件处理函数
  handleClick() {
    alert('v-on绑定的click事件触发！');
  }
  }
};
</script>

`v-if`

v-if 是 Vue.js 中用于条件性地渲染元素的指令。它根据表达式的真假值来决定是否渲染一个元素或组件。

代码案例

<template>
  <div>
  <p v-if="type === 'A'">A 类型</p>
  <p v-else-if="type === 'B'">B 类型</p>
  <p v-else>其他类型</p>
  </div>
</template>

<script>
export default {
  data() {
  return {
    type: 'A' // 根据不同的类型来进行条件渲染
  };
  }
};
</script>

其他

`props`

props 是 Vue.js 中用于父组件向子组件传递数据的一种机制

代码案例

父文件：

<!-- ParentComponent.vue -->
<template>
  <div>
  <h2>Parent Component</h2>
  <!-- 使用 ChildComponent，并通过 props 传递数据 -->
  <ChildComponent message="Hello from Parent" :numberProp="42" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
  ChildComponent
  }
};
</script>

子文件：

<!-- ChildComponent.vue -->
<template>
  <div>
  <h3>Child Component</h3>
  <p>Received message: {{ message }}</p>
  <p>Received number: {{ numberProp }}</p>
  </div>
</template>

<script>
export default {
  props: {
  message: String, // 通过 props 接收字符串类型的数据
  numberProp: Number // 通过 props 接收数字类型的数据
  }
};
</script>

mixins:

在 Vue.js 中，可以通过创建一个普通的 JavaScript 对象来定义一个 mixin。这个对象可以包含任何组件选项，比如 data、methods、computed 等。

代码案例

1, 在myMixin.js

// myMixin.js
export const myMixin = {
data() {
  return {
  mixinData: 'This data is from mixin'
  };
},
methods: {
  mixinMethod() {
  console.log('This method is from mixin');
  }
}
};

2,在组件中使用 mixins

// MyComponent.vue
<template>
<div>
  <p>{{ mixinData }}</p>
  <button @click="mixinMethod">Click me</button>
</div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
mixins: [myMixin],
// 组件的其他选项...
};
</script>