Vue.js 从入门到实践1：环境搭建、数据绑定与条件渲染

一，Vue 模板语法与数据绑定

1.1文本插值

Vue.js最基本的数据绑定形式是文本插值，使用"Mustache"语法（双大括号）：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  }
};
</script>

双大括号支持JavaScript表达式：

<template>
  <div>
    <p>{{ message.split("").reverse().join("") }}</p>
  </div>
</template>

字符串处理方法说明：

• split("")：将字符串分割为字符数组
• reverse()：反转数组顺序
• join("")：将数组合并为字符串

1.2原始HTML渲染

双大括号会转义HTML标签，使用v-html指令可渲染原始HTML：

<template>
  <div>
    <p>纯文本: {{ rawHtml }}</p>
    <p>属性: <span v-html="rawHtml"></span></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: "<a href='https://itbaizhan.com'>百战程序员</a>"
    };
  }
};
</script>

安全警告：

• 动态渲染HTML存在XSS攻击风险
• 仅对可信内容使用v-html
• 禁止用于用户提交内容

1.3文本插值基础

Vue.js 通过双大括号语法实现文本插值，支持变量和表达式：

<template>
  <p>{{ message.split("").reverse().join("") }}</p>
</template>
<script>
export default {
  data() { return { message: "Hello Vue!" }; }
};
</script>

• split("") 将字符串转为字符数组
• reverse() 反转数组顺序
• join("") 重组为字符串

1.4HTML 渲染指令

使用 v-html 指令渲染原始 HTML：

<template>
  <span v-html="rawHtml"></span>
</template>
<script>
export default {
  data() { return { rawHtml: "<a href='#'>链接</a>" }; }
};
</script>

安全警告：避免对用户提交内容使用此指令，防止 XSS 攻击。

二，属性绑定语法：

v-bind 指令动态绑定属性，支持简写（冒号）：

<template>
  <div :id="dynamicId" :class="msg"></div>
</template>
<script>
export default {
  data() { return { dynamicId: "appoid", msg: "active" }; }
};
</script>

2.1布尔属性处理

布尔属性根据绑定值决定存在性：

<template>
  <button :disabled="isDisabled">按钮</button>
</template>
<script>
export default {
  data() { return { isDisabled: true }; }
};
</script>

2.2多属性绑定

对象语法实现批量绑定：

<template>
  <div v-bind="attributeObject"></div>
</template>
<script>
export default {
  data() {
    return {
      attributeObject: {
        id: "appoid",
        class: "active",
        title: "动态标题"
      }
    };
  }
};
</script>

三，条件渲染

3.1 v-if 指令

v-if 指令根据表达式的布尔值决定是否渲染元素。当条件为假时，元素不会出现在 DOM 中。

<template>
  <div>
    <p v-if="flag">这段文字只有在 flag 为 true 时才会显示</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: true
    };
  }
};
</script>

3.2 v-else 和 v-else-if

v-else 和 v-else-if 用于实现多分支条件逻辑，必须紧跟在 v-if 或 v-else-if 元素之后。

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      score: 75
    };
  }
};
</script>

3.3 v-show 指令

v-show 通过 CSS 的 display 属性控制元素显示/隐藏，元素始终存在于 DOM 中。

<template>
  <div>
    <p v-show="isVisible">这段文字通过 display CSS 属性控制显示/隐藏</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

3.4 v-if 与 v-show 的区别

特性	v-if	v-show
初始渲染	惰性渲染	始终渲染
切换开销	高（销毁/重建组件）	低（仅切换 CSS）
适用场景	条件不频繁变化	需要频繁切换的场景

四， 列表渲染

4.1 基本列表渲染

v-for 指令可以基于数组或对象渲染列表，支持使用 in 或 of 语法。

<template>
  <div>
    <p v-for="(item, index) in names" :key="index">
      {{ index }}: {{ item }}
    </p>
    <p v-for="item of names" :key="item">
      {{ item }}
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      names: ["百战程序员", "尚学堂", "IT"]
    };
  }
};
</script>

4.2 使用 key 的重要性

为每个列表项提供唯一的 key 属性，帮助 Vue 高效更新 DOM。

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>

五，组件化开发

5.1 创建和使用组件

组件化是 Vue 的核心特性，通过拆分功能提高代码复用性。

1. 创建组件文件 IfDemo.vue：

<template>
  <div>
    <p v-if="visible">这是一个条件渲染组件示例</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: true
    };
  }
};
</script>

2. 在父组件中使用：

<template>
  <div id="app">
    <IfDemo />
  </div>
</template>
<script>
import IfDemo from './components/IfDemo.vue';
export default {
  components: {
    IfDemo
  }
};
</script>

总结

• 条件渲染：掌握 v-if、v-else、v-show 的区别及适用场景
• 列表渲染：熟练使用 v-for，理解 key 的作用
• 组件化：学会拆分组件的标准流程
• 渐进式框架：根据需求逐步扩展 Vue 的功能