标签：.net locale -o doctype vue.js char 构建 ops cli
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue</title> </head> <body> <hr/>声明式渲染1：<br/><br/> <div id="app"> {{message}} </div> <hr/>声明式渲染2：<br/><br/> <div id="app2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div> <hr/>条件与循环1：<br/> <div id="app3"> <p v-if="seen">现在你看到我了！</p> </div> <hr/>条件与循环2：<br/> <div id="app4"> <ol> <li v-for="todo in todos"> {{todo.text}} </li> </ol> </div> <hr/>处理用户输入1：<br/> <div id="app5"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆转消息</button> </div> <hr/>处理用户输入2：<br/> <div id="app6"> <p>{{message}}</p> <input v-model="message"> </div> <hr/>组件化应用构建：<br/> <div id="app7"> <ol> <todo-item v-for="item in language" v-bind:todo="item" v-key:id="item.id" ></todo-item> </ol> </div> </body> <script src="https://unpkg.com/vue"></script> <script type="application/javascript"> Vue.component(‘todo-item‘,{ props:[‘todo‘], template:‘<li>{{todo.text}}</li>‘ }); var app7 = new Vue({ el:‘#app7‘, data:{ language:[ { id:0, text:‘.NET‘ }, { id:1, text:‘PHP‘ }, { id:2, text:‘JAVA‘ } ] } }); var app6 = new Vue({ el:‘#app6‘, data:{ message:"Hello World !" } }); var app5 = new Vue({ el:‘#app5‘, data:{ message:‘Hello World !‘ }, methods:{ reverseMessage:function () { this.message = this.message.split(‘‘).reverse().join(‘‘); } } }); var app4 = new Vue({ el:‘#app4‘, data:{ todos:[ {text:‘Hello‘}, {text:‘World‘}, {text:‘!‘} ] } }); var app3 = new Vue({ el:‘#app3‘, data:{ seen:true } }); var app2 = new Vue({ el:‘#app2‘, data:{ message:‘页面加载于‘ + new Date().toLocaleString() } }); var app = new Vue({ el:‘#app‘, data:{ message:‘Hello World !‘ } }); </script> </html>
标签：.net locale -o doctype vue.js char 构建 ops cli
原文地址：http://www.cnblogs.com/drea/p/7857789.html
