Vue学习 -- 第一个Vue程序-CSDN博客

本文链接：https://blog.csdn.net/snwown/article/details/122446283

安装vue

在这里插入图片描述
官方提供了CDN引用和NPM引用，为了便于学习，我们首先选择用CDN的方式进行引用。

第一个vue程序

首先，我们先来写一个老生常谈的helloworld，来进入vue世界。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}  // 在双大括号中直接渲染简单的变量，还可以在双大括号中做简单的表达式。双大括号中仅仅支持表达式，不支持语句
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello world'
        }
    })
</script>
</html>

运行之后，网页展示
在这里插入图片描述
在控制台改变message，网页可以实时跟着改变，这就是vue的响应式机制

在双大括号中直接渲染简单的变量，还可以在双大括号中做简单的表达式。双大括号中仅仅支持表达式，不支持语句

<div id="app">
        {{message + message}}
    </div>

展示出来的效果为：
在这里插入图片描述
除了使用双大括号来解析动态的值之外，vue还提供了另外一种方式，v-bind的指令方式，可以将指令当做为一个标志。

 <div id="app">
        {{message }} {{message + message}}
        <div id="message"></div>
    </div>

当不加v-bind的时候
在这里插入图片描述

   <div id="app">
        {{message }} {{message + message}}
        <div v-bind:id="message"></div>
    </div>

当加上v-bind的时候：
在这里插入图片描述
指令可以理解为就是一个标记位，被标记了什么标志，那么vue底层就根据相应的标志进行相应的逻辑处理。

除了v-bind之外，还有一些常用的指令，比如：
v-if ；v-else ；v-for
这些能够再模板中使用语句，因为在双大括号中没有办法写语句。

v-if；v-else的用法
v-if就是如果说条件符合，那么就执行这一条语句，如果条件不符合，那么这一条语句就不渲染。
在这里插入图片描述

<ul>
            <li>
                <span v-if = "!item.del">
                    {{item.title}}
                </span>
                <span v-else style="text-decoration: red line-through;">
                    {{item.title}}
                </span>
            </li>
        </ul>

在这里插入图片描述

v-show
在页面上看到的依旧是不渲染，但是实际上已经加载了，只是不显示而已。在vue底层是根据TRUE或者FALSE，这个v-show绑定的这个值，来去决定这个样式是否显示，但是实际上已经挂载到了DOM节点上了。

<button v-show = "!item.del">删除</button>

在这里插入图片描述
当将状态更改的时候

vm.item.del = true
true

在这里插入图片描述
v-for
就是一个for循环