Vue的简单使用及小案例

最新推荐文章于 2025-04-15 11:09:51 发布

DangR-Jisoo

最新推荐文章于 2025-04-15 11:09:51 发布

阅读量222

点赞数

分类专栏： Vue 前端 JavaScript

本文链接：https://blog.youkuaiyun.com/Angela_Connie/article/details/114239310

版权

前端同时被 3 个专栏收录

45 篇文章

订阅专栏

JavaScript

32 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

Vue的简介

Vue的安装
在官网上下载源码Vue.js，直接在代码中引用

<script src="./js/vue.js"></script>

Vue的初体验

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h2>{{name}}</h2>
    </div>
    <!-- 引入Vue.js -->
    <script src="./js/vue.js"></script>
    <script>
        let app = new Vue({
                el: '#app', //用于挂载要管理的数据
                //也可以
                //el: document.querySelector('#app'),
                data: { //定义数据
                    message: '你好',
                    name: 'jisoo'
                }
            })
            /* 相当于 */
            // function Vue(name,age){

        // }
        /* 使用原生JS方式叫做命令式编程，而使用Vue方式叫做声明式编程 */
    </script>
</body>

小案例：遍历数组

<body>
    <div id="app">
        <ul>
            <li v-for="item in message">{{item}}</li>//v-for用来遍历
        </ul>
    </div>
    <script src="./js/vue.js"></script>//引入Vue
    <script>
        let app = new Vue({
            // el: '#app',
            el: document.querySelector('#app'),
            data: {
                message: ['whistle', 'really', 'boombaya']
            }
        })
    </script>
</body>

小案例：计数器

<body>
    <div id="app">
        <h2>当前计数:{{counter}}</h2>
        <button v-on:click="add">+</button>//v-on:click定义点击事件，add为定义的加函数
        <button v-on:click="sub">-</button>//sub为定义的加函数
    </div>
    <script src="./js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                counter: 1
            },
            methods: {
                add: function() {
                    this.counter++;//在这里counter不能直接使用，因为在当前作用域(add)下找不到this
                },
                sub: function() {
                    this.counter--;
                }
            },
        })
    </script>
</body>