Vue 基础语法

最新推荐文章于 2024-07-05 11:27:33 发布

及时机芯

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量131

点赞数

分类专栏：前端 html 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67401055/article/details/123368036

版权

这篇博客详细介绍了Vue的基础语法，包括v-bind属性绑定、条件渲染、列表渲染、事件绑定、双向数据绑定以及组件的使用。通过实例演示了Vue如何实现数据驱动视图，帮助读者快速上手Vue开发。

摘要由CSDN通过智能技术生成

Vue 基础语法

【狂神说Java】Vue最新快速上手教程通俗易懂笔记：Vue 基本语法、Vue 绑定事件、Vue 双向绑定、Vue 组件讲解。

1.v-bind

v-bind 主要用于属性绑定。示例如下：

<body>
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"页面加载于" + new Date().toLocaleString()
        }
    })
</script>

这里看到的 v-bind 被称为指令，指令带有前缀 v-，以表示他们是 Vue 提供的特殊特性，可能你已经猜到了，它们会在渲染 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 属性和 Vue 实例的 message 保持一致。”

2.条件渲染

v-if 指令用于条件性地渲染一块内容。

<div id="app">
    <div v-if="happy">我非常高兴!</div>
    <div v-else>哦不，我现在很心烦.</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            happy: true,
        }
    })
</script>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div id="app">
    <div v-if="score >= 90">优秀</div>
    <div v-else-if="score >= 80">良好</div>
    <div v-else-if="score >= 70">一般</div>
    <div v-else-if="score >= 60">及格</div>
    <div v-else>不及格</div>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script