1.声明式渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> </body> <script> var app2 = new Vue({ el:'#app-2', data:{ message:'页面加载于' + new Date().toLocaleString() } }) </script> </html>
2.v-if判断是否显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> </body> <script> var app3 = new Vue({ el:'#app-3', data:{ seen:true } }) // app3.seen=false </script> </html>
3.v-for遍历渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos"> {{todo.text}} </li> </ol> </div> </body> <script> var app4 = new Vue({ el:'#app-4', data:{ todos:[ {text:'学习JavaScript'}, {text:'学习Vue'}, {text:'学习Flask'} ] } }) app4.todos.push({ text: '新项目' }) </script> </html>
4.v-on事件翻转字符串
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app-5"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> </body> <script> var app5 = new Vue({ el:'#app-5', data:{ message:'hello Vue.js' }, methods:{ reverseMessage:function () { //逆转消息 this.message = this.message.split('').reverse().join('') } } }) </script> </html>
5.v-model处理用户输入数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app-6"> <p>{{message}}</p> <input v-model="message"> </div> </body> <script> var app6 = new Vue({ el:'#app-6', data:{ message:'hello Vue!' } }) </script> </html>
6.v-bind处理标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script> </head> <body> <div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:key="item.id" v-bind:todo="item" > </todo-item> </ol> </div> </body> <script> Vue.component('todo-item', { props: ['todo','key'], template: '<li>{{todo.text}}</li> ' }); var app7 = new Vue({ el:'#app-7', data:{ groceryList:[ {id:0,text:'蔬菜'}, {id:1,text:'水果'}, {id:2,text:'肉类'}, ] } }) </script> </html>