vue的学习（1）

一、什么是vue

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它可以与其他库或现有项目整合，也可以用于开发单页面应用（SPA）。Vue 的核心库关注于视图层，易于学习和上手，适合快速开发。

特点：

• 响应式数据绑定：Vue 的数据绑定系统允许你将数据和 DOM 关联起来，当数据变化时，界面会自动更新。

• 组件化：Vue 鼓励将应用程序拆分为小的、可重用的组件，这样使得开发和维护变得更加简单。

• 虚拟 DOM：Vue 使用虚拟 DOM 来提高渲染性能，只有在需要时才会更新真实 DOM。

• 指令：Vue 提供了一些内置指令（如 v-if, v-for, v-bind 等）来简化模板的编写。

二、Vue 的常用基础语法格式及用法

2.1 Vue 实例

每个 Vue 应用都是通过创建一个 Vue 实例开始的。基本语法如下：

javascriptconst app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

• el: 指定 Vue 实例挂载的 DOM 元素。

• data: 定义数据对象。

2.2 模板语法

Vue 使用一种声明式的方式来将数据渲染到 DOM 中。基本的模板语法包括：

• 插值：使用双花括号 {{ }} 来输出数据。

html<div id="app">
  {{ message }}
</div>

• 指令：以 v- 开头的特殊属性，用于提供响应式的功能。

例如：

• v-if: 条件渲染。

• v-for: 列表渲染。

• v-bind: 动态绑定属性。

  • 在 Vue.js 中，v-bind 可以简写为一个冒号 :。这种简写方式在模板中非常常用，使得代码更加简洁。

完整写法:

html<img v-bind:src="imageSrc" alt="描述">

简写形式:

<img :src="imageSrc" alt="描述">

• v-model: 双向数据绑定。

2.3 条件渲染

使用 v-if 和 v-else：

html<div id="app">
  <p v-if="seen">现在你看到我了</p>
</div>

javascriptdata: {
  seen: true
}

2.3.1 v-if 和v-show的区别

在 Vue.js 中，v-if 和 v-show 是用于控制元素显示与隐藏的指令，它们在功能上相似，但在实现和性能方面有显著的区别。

1. v-if

• 动态渲染: 使用 v-if 时，Vue 会根据条件动态创建或销毁 DOM 元素。当条件为 true 时，元素被插入到 DOM 中；为 false 时，元素被移除。

• 性能: 因为 v-if 需要创建和销毁元素，所以当频繁切换状态时，性能开销较大。

• 适用场景: 适合于那些条件较少变化的情况，或者在页面初始加载时不需要立即渲染的组件。

示例:

html<div v-if="isVisible">内容可见</div>

2. v-show

• 切换显示状态: 使用 v-show 时，Vue 会始终渲染该元素，但通过 CSS 的 display 属性来控制其显示与隐藏。当条件为 true 时，元素的 display 为 block 或其他值；为 false 时，display 为 none。

• 性能: 因为 v-show 仅仅是切换 CSS 属性，所以在频繁变化的场景中性能更优。

• 适用场景: 适合于需要频繁切换显示状态的情况，比如标签页切换等。

2.4 列表渲染

使用 v-for 来渲染数组：

html<ul id="app">
  <li v-for="item in items">{{ item.text }}</li>
</ul>

javascriptdata: {
  items: [
    { text: '苹果' },
    { text: '香蕉' },
    { text: '橙子' }
  ]
}

2.5 事件处理

使用 v-on 来监听事件：

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

methods: {
  sayHello() {
    alert('你好，Vue！');
  }
}