从零开始学VUE之Vuejs初体验(DEMO)

彼岸舞

发布于 2021-06-07 15:08:34

5380

发布于 2021-06-07 15:08:34

文章被收录于专栏：java开发的那点事

体验Vuejs

Hello Vuejs

创建目录和 HelloVuejs.html

编写代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    引入VUE.JS-->
    <script src="../../js/vue.js"></script>
</head>
<body>
<!--    用于挂载Vue的根节点-->
    <div id="app">
<!--        {{数据key}} 使用双大括号获取下面定义的值-->
        <div>{{ message }}</div>
    </div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        // 挂载要管理的数据
        el: '#app',
        // 定义数据
        data: {
            // 定义一个名字为message的数据,值为 hello vue js!
            message: 'hello vue js!'
        }
    })
</script>
</html>

运行

可以在浏览器中访问,也可以直接在IDEA中查看

点击IJ

可以看到展示的是下面定义的数据,IDEA内部展示,不需要切换到浏览器窗口,方便修改代码实时查看效果,非常好用

Vue显示列表

新建ViewList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{ list }}</div>
<!--        采用v-for 展示数组-->
        <ul v-for="item in list">
            <li>{{item}}</li>
        </ul>
    </div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            // 定义数组
            list: ['Spring','SpringMvc','SpringBoot','SpringCloud']
        }
    })
</script>
</html>

运行,通过v-for循环展示数组,如果通过双大括号,那么展示的就是字符串

案例:实现计数器

新建Number.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
      <!-- @click 用于绑定点击事件 -->
        <input type="button" @click="incr" value="+">
        <span>当前数字为:{{num}}</span>
        <input type="button" @click="decr" value="-">
    </div>
</div>
</body>
<script>
    // 创建vue
    const vue = new Vue({
        el: '#app',
        data: {
            num: 1
        },
      // 用于定义方法
        methods: {
            incr(){
                this.num++;
            },
            decr(){
                this.num--;
            }
        }
    })
</script>
</html>

运行