vue笔记。Demo 1

来源：互联网发布：淘宝开零食店无法上架编辑：程序博客网时间：2024/06/16 13:12
<!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>
0 0