当前位置：首页 > news >正文

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

news 2025/9/23 7:11:23

一，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 的核心特性，通过拆分功能提高代码复用性。

创建组件文件 IfDemo.vue：

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

在父组件中使用：

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