【深入学习Vue丨第二篇】构建动态Web应用的基础

前言

Vue模板语法是一种基于HTML的扩展语法，它允许开发者声明式地将数据绑定到DOM。与传统的字符串模板或JSX不同，Vue模板更接近原生HTML，学习曲线平缓，同时提供了强大的数据绑定和逻辑控制能力。

模板语法基础

文本插值

最基本的模板语法是"Mustache"语法（双大括号），用于数据绑定：

<div id="app">
  <p>{{ message }}</p>
  <!-- 一次性插值 -->
  <span v-once>{{ message }}</span>
</div>

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

2. 原始HTML

双大括号会将数据解释为普通文本，如果要输出真正的HTML，需要使用v-html指令：

<div id="app">
  <p>{{ rawHtml }}</p>
  <!-- 输出真正的HTML -->
  <p v-html="rawHtml"></p>
</div>

new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red">红色文字</span>'
  }
})

指令详解

指令是带有v-前缀的特殊属性，其值预期是单个JavaScript表达式

1. 条件渲染

<div id="app">
  <!-- v-if 条件渲染 -->
  <p v-if="isVisible">你可以看到我</p>
  <p v-else>你看不到上面的内容</p>
  
  <!-- v-show 条件显示 -->
  <p v-show="isShow">我总是被渲染，只是可能不显示</p>
  
  <!-- 多个条件判断 -->
  <div>
    <p v-if="type === 'A'">类型A</p>
    <p v-else-if="type === 'B'">类型B</p>
    <p v-else>其他类型</p>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    isVisible: true,
    isShow: false,
    type: 'A'
  }
})

v-if vs v-show：

• v-if是真正的条件渲染，元素会被销毁和重建

• v-show只是切换CSS的display属性

• if有更高的切换开销，v-show有更高的初始渲染开销

2. 列表渲染

使用v-for指令基于数组或对象渲染列表：

<div id="app">
  <!-- 数组渲染 -->
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
  
  <!-- 对象渲染 -->
  <ul>
    <li v-for="(value, key, index) in userInfo">
      {{ index + 1 }}. {{ key }}: {{ value }}
    </li>
  </ul>
  
  <!-- 使用计算属性过滤列表 -->
  <ul>
    <li v-for="item in filteredItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

3.事件处理

使用v-on指令（简写@）监听DOM事件：

<div id="app">
  <!-- 直接执行方法 -->
  <button @click="sayHello">点击我</button>
  
  <!-- 内联JavaScript语句 -->
  <button @click="count++">计数: {{ count }}</button>
  
  <!-- 传递参数 -->
  <button @click="saySomething('Hello!')">打招呼</button>
  
  <!-- 访问原始DOM事件 -->
  <button @click="warn('表单不能提交', $event)">
    提交
  </button>
  
  <!-- 事件修饰符 -->
  <form @submit.prevent="onSubmit">
    <input type="text">
    <button type="submit">提交</button>
  </form>
  
  <!-- 按键修饰符 -->
  <input @keyup.enter="submitForm" placeholder="按回车提交">
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    sayHello() {
      alert('Hello!')
    },
    saySomething(message) {
      alert(message)
    },
    warn(message, event) {
      if (event) {
        event.preventDefault()
      }
      alert(message)
    },
    onSubmit() {
      alert('表单已提交')
    },
    submitForm() {
      alert('表单通过回车提交')
    }
  }
})

4. 表单输入绑定

使用v-model指令在表单元素上创建双向数据绑定：

<div id="app">
  <!-- 文本输入 -->
  <input v-model="message" placeholder="编辑我">
  <p>输入的内容: {{ message }}</p>
  
  <!-- 多行文本 -->
  <textarea v-model="multilineText"></textarea>
  <p style="white-space: pre-line">{{ multilineText }}</p>
  
  <!-- 复选框 -->
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  
  <!-- 多个复选框 -->
  <div>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <p>选中的人: {{ checkedNames }}</p>
  </div>
  
  <!-- 单选按钮 -->
  <div>
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <p>选中的值: {{ picked }}</p>
  </div>
  
  <!-- 选择框 -->
  <div>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    <p>选中的值: {{ selected }}</p>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    message: '',
    multilineText: '',
    checked: false,
    checkedNames: [],
    picked: '',
    selected: ''
  }
})

修饰符：

.lazy - 转为在change事件后同步

.number - 将输入值转为数值类型

.trim - 自动过滤输入的首尾空白字符