一、导入Vue

  1. 引用文件,自行去网上下载
  2. 引用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属性:

  1. el属性:用来指示vue编译器从什么地方开始解析 vue的语法,可以说是一个占位符。相当于一个容器,跟上面的div id = "app"做关联,从此以后上面div id = "app"里面的内容要通过vue来渲染,都要经过vue处理才能看得到上面div里面的内容
  2. data属性:用来组织从view中抽象出来的属性,可以说将视图的数据抽象出来存放在data中。跟微信小程序一样,所有的变量都要写在data里面
  3. 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

一个程序最基本的就是逻辑判断与循环,作为一个后端,Vueelse 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>

vuejs方法统一放到methods属性中,用name:function形式定义,需要监听的时间用v-on指令引用即可
在这里插入图片描述
更多细节部分请移步官网:VUE

最后修改:2020 年 09 月 28 日 09 : 56 AM
如果觉得我的文章对你有用,请随意赞赏