vuejs入门（1）

来源：互联网发布：php全站搜索编辑：程序博客网时间：2024/06/08 16:01
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript" src="../js/vue.js" ></script>    </head>    <body>        <div id="app">            {{message}}        </div>        <div id="app2">            <!--                描述：v-bind 指令  它们会在渲染的 DOM 上应用特殊的响应式行为                    将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致           -->            <span v-bind:title="message">                鼠标悬停            </span>        </div>        <div id="app3">            <!--绑定dom结构到数据-->            <p v-if="seen">看到我啦</p>        </div>        <div id="app4">            <ol>                <!-- v-for 绑定数组的数据来渲染一个项目列表-->                <li v-for="todo in todos">                    {{todo.text}}                </li>            </ol>        </div>        <div id="app5">            <p>{{message}}</p>            <!-- v-on 绑定一个事件监听器-->            <button v-on:click="reverseMessage">逆转消息</button>        </div>        <div id="app6">            <p>{{message}}</p>            <!-- v-model 实现表单输入和应用状态之间的双向绑定 -->            <input v-model="message" />        </div>        <div id="app7">            <ol>                <todo-item                    v-for="item in todos"                    v-bind:todo = "item"                    v-bind:key = "item.id"                    >                </todo-item>            </ol>        </div>        <script>            var app = new Vue({                el:'#app',                data:{                    message:'Hello Vue'                }            });            var app2 = new Vue({                el:'#app2',                data:{                    message:'页面加载于'+new Date()                }            })            var app3 = new Vue({                el:'#app3',                data:{                    seen:true,                }            })            var app4 = new Vue({                el:'#app4',                data:{                    todos:[                        {text:'学习 JavaScript'},                        {text:'学习 Vue'},                        {text:'整个牛项目'},                    ]                }            })            var app5 = new Vue({                el:'#app5',                data:{                    message:'Hello Vue.js'                },                methods:{                    //更新了应用的状态，但没有触碰到dom  所有的dom操作都由vue来处理  编写的代码不需要关注底层逻辑                    reverseMessage:function(){                        this.message = this.message.split('').reverse().join('');                    }                }            })            var app6 = new Vue({                el:'#app6',                data:{                    message:'Hello Vue'                }            })            Vue.component('todo-item',{                props:['todo'],                template:'<li>{{todo.text}}</li>'            })            var app7 = new Vue({                el:'#app7',                data:{                    todos:[                        {id:0,text:'蔬菜1'},                        {id:1,text:'蔬菜2'},                        {id:2,text:'蔬菜3'},                    ]                }            })        </script>    </body></html>
阅读全文
0 0