首页 > 其他 > 详细

Vue 框架学习(二) 基础

时间:2020-06-21 17:56:03      阅读:67      评论:0      收藏:0      [点我收藏+]

组件管理:文字和列表显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
</head>

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

<body>
    <!--  mustache语法有很多,自行学习  -->
    <div id = "text">
        Hello {{message}}
    </div>
    <!--  列表遍历显示  -->
    <div id = "list">
        <ul v-for = "movie in movies">
            <li>{{movie}}</li>
        </ul>
    </div>


    <script>
        let text = new Vue({
            el: ‘#text‘,
            data: {
                message: ‘Vue.js‘
            }
        });

        let list = new Vue({
            el: ‘#list‘,
            data: {
                movies: [‘大话西游‘, ‘赌圣‘, ‘星际穿越‘],
            }
        })
    </script>



</body>
</html>

 

函数:注意是methoda

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_计数器</title>
</head>

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

<body>

    <div id = "jishuqi">
        <h1> 当前计数:{{counter}}</h1>
        <!--    @语法糖 == v-on:     -->
        <button @click = "add_counter">+</button>
        <button @click = "sub_counter">-</button>
    </div>

    <script>
        let jsq = new Vue({
            el: ‘#jishuqi‘,
            data: {
                counter: 0,
            },

            methods: {
                add_counter: function (){
                    console.log(‘add执行‘);

                    this.counter++;

                },
                sub_counter: function (){
                    console.log(‘sub执行‘);

                    this.counter--;
                }
            }
        })
    </script>

</body>
</html>

 

Vue 框架学习(二) 基础

原文:https://www.cnblogs.com/smallstars/p/13172926.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!