Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data:{ message: 'Hello Vue!' } }); </script> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> <script type="text/javascript"> var app2 = new Vue({ el: '#app-2', data:{ message: '页面加载于' + new Date().toLocaleString() } }); </script> <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> <script type="text/javascript"> var app3 = new Vue({ el: '#app-3', data:{ seen:true } }); </script> <div id="app-4"> <ol> <li v-for="todo in todos">{{ todo.text }}</li> </ol> </div> <script type="text/javascript"> var app4 = new Vue({ el: '#app-4', data:{ todos:[ {text : '学习JavaScript!'}, {text : '学习Vue!'}, {text : '我是初学者!'} ] } }); </script> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div> <script type="text/javascript"> var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods:{ reverseMessage:function(){ this.message = this.message.split('').reverse().join('') } } }); </script> <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <script type="text/javascript"> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } }) </script> <div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key”,稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> <script type="text/javascript"> Vue.component('todo-item', { props: ['todo'], template:'<li>{{todo.text}}</li>' }); var app7 = new Vue({ el: '#app-7', data: { groceryList:[ { id:0, text: '蔬菜!' }, { id:1, text: '水果!' }, { id:2, text: '饮料!' }, { id:3, text: '其他不知道什么人能吃的东西!'} ] } }) </script> </body> </html>
发表评论 取消回复