Vue2基础概念与指令-EW帮帮网

基本结构

Vue2 应用的基本结构包含四个主要步骤：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Vue2 示例</title>

</head>
<body>
  <!-- 2. 准备容器 -->
  <div id="app">
    {{ message }}
  </div>
  <!-- 1. 引入Vue包 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    // 3. 创建Vue实例
    const app = new Vue({
      // 4. 指定配置
      el: '#app', // 挂载元素
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        // 方法定义
        fn() {
          console.log('方法被调用');
        }
      }
    });
  </script>
</body>
</html>

插值表达式

插值表达式 {{ }} 是 Vue 中最基本的文本绑定方式：

<div id="app">
  <p>{{ message }}</p>
  <p>{{ number + 1 }}</p>
  <p>{{ ok ? 'YES' : 'NO' }}</p>
  <p>{{ message.split('').reverse().join('') }}</p>
</div>

注意事项：

使用的 data 数据必须存在
支持表达式，而非语句
不能在标签属性中使用插值表达式

常用指令

v-html：设置元素的 innerHTML

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

data中的rawHtml内容会以html形式解析到该标签中。

v-show 与 v-if：条件渲染

<div v-show="isVisible">v-show 控制显示</div>
<div v-if="isExist">v-if 控制存在</div>

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

区别：

v-show：通过 CSS display 属性控制显示/隐藏，适合频繁切换的场景
v-if：通过创建/移除 DOM 元素控制存在，适合条件很少改变的场景

v-on：事件处理

<!-- 内联语句 -->
<button v-on:click="count++">增加</button>

<!-- 方法处理器 -->
<button v-on:click="handleClick">点击</button>

<!-- 简写形式 -->
<button @click="handleClick">点击</button>

<!-- 调用传参 -->
<button @click="handleClick('参数', $event)">带参数点击</button>

v-bind：属性绑定

<!-- 绑定属性 -->
<img v-bind:src="imageSrc">
<a v-bind:href="url">链接</a>

<!-- 简写形式 -->
<img :src="imageSrc">
<a :href="url">链接</a>

<!-- 绑定 class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div>

<!-- 绑定 style -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="[baseStyles, overridingStyles]"></div>

v-for：列表渲染

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
</ul>

<!-- 遍历对象 -->
<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

重要：始终为 v-for 列表项提供唯一的 :key 属性，以便 Vue 跟踪节点身份，实现高效更新。

v-model：表单输入绑定

<!-- 文本输入 -->
<input v-model="message" placeholder="编辑我">
<p>输入的消息: {{ message }}</p>

<!-- 多行文本 -->
<textarea v-model="message"></textarea>

<!-- 复选框 -->
<input type="checkbox" v-model="checked">

<!-- 多个复选框 -->
<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">
<input type="checkbox" value="Mike" v-model="checkedNames">

<!-- 单选按钮 -->
<input type="radio" value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked">

<!-- 下拉选择 -->
<select v-model="selected">
  <option disabled value="">请选择</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

计算属性

写在computed内。

作为属性直接使用而不是引用
有缓存，一旦计算出结果就会立刻缓存，下次读取直接读缓存

<div id="app">
  <p>原始消息: "{{ message }}"</p>
  <p>计算后反转消息: "{{ reversedMessage }}"</p>
</div>

<script>
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 简写形式（只读）
    reversedMessage() {
      return this.message.split('').reverse().join('')
    },
    
    // 完整形式（可读可写）
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})
</script>

指令修饰符

Vue 提供了一些特殊的后缀—修饰符，用于指出一个指令应该以特殊方式绑定。

<!-- 按键修饰符 -->
<input @keyup.enter="submit">
<input @keyup.13="submit"> <!--指定键码 -->

<!-- 系统修饰键 -->
<input @keyup.ctrl.enter="onCtrlEnter">

<!-- 事件修饰符 -->
<div @click.stop="doThis">阻止单击事件继续传播</div>
<form @submit.prevent="onSubmit">提交事件不再重载页面</form>
<a @click.stop.prevent="doThat">修饰符可以串联</div>

<!-- v-model 修饰符 -->
<input v-model.trim="msg">   <!-- 自动过滤首尾空白字符 -->
<input v-model.number="age" type="number"> <!-- 将输入转为数值类型 -->
<input v-model.lazy="msg">   <!-- 在 change 事件而非 input 事件中同步 -->

Vue2基础概念与指令