快速入门VUE（MVVM模式实现者）

最新推荐文章于 2022-11-06 22:19:54 发布

国服冰

最新推荐文章于 2022-11-06 22:19:54 发布

阅读量153

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43442335/article/details/108842711

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、导入Vue

引用文件，自行去网上下载
引用cdn：<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

二、创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

虽然没有完全遵循 MVVM（MV VM）模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

三、Vue常用属性

这里介绍下面需要用到的Vue属性：

el属性：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。相当于一个容器，跟上面的div id = "app"做关联，从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容
data属性：用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。跟微信小程序一样，所有的变量都要写在data里面
methods属性：放置页面中的业务逻辑，js方法一般都放置在methods中，用来写方法，函数的

四、Hello Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello Vue"
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

五、vue指令 v-bind

它是一个 vue 指令，用于绑定 html 属性，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="head">
        <a v-bind:href="msg">
            点击
        </a>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#head",
            data: {
                msg: "https://kexing.site/"
            }
        });
    </script>
</body>
</html>

这里的a标签会渲染成：
在这里插入图片描述

六、if - else if - else for

一个程序最基本的就是逻辑判断与循环，作为一个后端，Vue的else if语法在2.1.0版本才新增是不是很惊讶，这里跟java的逻辑判断一样，只不过Vue需要用v指令来使用。如下：

1、逻辑判断

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="head">
        <h1 v-if="score===100">优秀</h1>
        <h1 v-else-if="score===90">良好</h1>
        <h1 v-else>及格</h1>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#head",
            data: {
                score: 90
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

2、for循环

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。和python的for有点类似

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="head">
        <li v-for="(item,index) in items">
            {{item.msg}} -- {{index}}
        </li>
    </ul>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#head",
            data: {
                items: [
                	{
                        msg: "kexing'blog:"
                    },
                    {
                        msg: "www.kexing.site"
                    }
                ]
            }
        });
    </script>
</body>
</html>

这里我们遍历items对象数组，index为遍历的索引值（从0开始）
在这里插入图片描述

七、事件绑定（监听事件）

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
如例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="head">
        <button v-on:click="sayHai()">click me</button>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#head",
            data: {
                msg: "hello welcome!"
            },
            methods: {
                sayHai: function () {
                    alert(this.msg)
                }
            }
        });
    </script>
</body>
</html>