vue笔记。Demo 1

最新推荐文章于 2024-09-04 15:16:43 发布

神百事

最新推荐文章于 2024-09-04 15:16:43 发布

阅读量357

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/bb415453941/article/details/53152710

vue 专栏收录该内容

1 篇文章

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <title>learn vue:1</title>
</head>

<body>
    <!-- 渲染和绑定渲染 -->
    <!-- 直接渲染 -->
    <div id="app">
        {{message}}
    </div>
    <!-- bind渲染 -->
    <div id="app2" v-bind:title="message">
        21321312321
    </div>
    <!-- 条件控制与循环 -->
    <!-- if -->
    <div id="app3" v-if="see">
        see this
    </div>
    <!-- for循环v-for必须写在需被渲染的元素，且不为根容器（app4） -->
    <div id="app4">
        <p v-for="it in res">
            {{ it.name }}
        </p>
    </div>
    <!-- 处理用户输入 -->
    <div id="app5">
        <p>{{message}}</p>
        <button v-on:click="changeMessage">changeMessage</button>
    </div>
    <!-- 双向绑定 -->
    <div id="app6">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    <!-- 组建 -->
    <div id="app7">
        <!-- 使用构建的item标签，v-for循环it.length次 值为item所接受的todo=it -->
        <item v-for="it in res" v-bind:todo="it"></item>
    </div>
    <script src="vue.js"></script>
    <script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    });
    var app2 = new Vue({
        el: "#app2",
        data: {
            message: "Hello Vue!"
        }
    });
    var app3 = new Vue({
        el: "#app3",
        data: {
            see: true
        }
    });
    var app4 = new Vue({
        el: "#app4",
        data: {
            res: [{
                "name": "a"
            }, {
                "name": "b"
            }, {
                "name": "c"
            }]
        }
    });
    var app5 = new Vue({
        el: "#app5",
        data: {
            message: "app5 message"
        },
        methods: {
            changeMessage: function() {
                this.message = "app5 message is change!!!"
            }
        }
    });
    var app6 = new Vue({
        el: "#app6",
        data: {
            message: "init data"
        }
    });
    //app7 组建构造
    // component('模块名')   props设置组建标签能接受1个名为todo的bind元素值
    Vue.component('item', {
        props: ['todo'],
        template: '<p>{{todo.name}}</p>'
    });
    var app7 = new Vue({
        el: '#app7',
        data: {
            res: [{
                "name": "a"
            }, {
                "name": "b"
            }, {
                "name": "c"
            }]
        }
    })
    </script>
</body>

</html>