Vue.js入门
2017-03-16 16:26
85 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <h3>渲染</h3> <div id="app"> <p v-html="message"></p> {{message}} </div> <h3>绑定</h3> <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> <h3>条件与循环</h3> <div id="app-3"> <p v-if="seen">现在你看到我了</p> </div> <div id="app-4"> <ul> <li v-for="item in items"> {{item.text}} </li> </ul> </div> <h3>处理用户输入 点击事件</h3> <div id="app-5"> <p>{{message}}</p> <button @click="reverse">逆转消息</button> </div> <h3>v-model指令</h3> <div id="app-6"> <p>{{message}}</p> <input v-model="message" /> </div> <h3>组件化应用构建</h3> <div id="app-7"> <ol> <!-- 现在我们为每个todo-item提供待办项对象 --> <!-- 待办项对象是变量,即其内容可以是动态的 --> <todo-item v-for="item in list" v-bind:todo="item"></todo-item> </ol> </div> <h3>事件处理器</h3> <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <h3>方法事件处理器</h3> <div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> <h4>内联处理器方法</h4> <div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> </body> <script> var app=new Vue({ el:'#app', data:{ message:'<h1>hello vue</h1>' } }) var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } }) var app3 = new Vue({ el: '#app-3', data: { seen: true } }) var app4=new Vue({ el:'#app-4', data:{ items:[ {text:'one'}, {text:'two'}, {text:'three'} ] } }) var app5=new Vue({ el:'#app-5', data:{ message:'hello vue' }, methods:{ reverse:function(){ this.message=this.message.split('').reverse().join('') } } }) var app6=new Vue({ el:'#app-6', data:{ message:'hello vue' } }) Vue.component('todo-item',{ props:['todo'], template:'<li>{{todo.text}}</li>' }) var app7=new Vue({ el:'#app-7', data:{ list:[ {text:'蔬菜'}, {text:'水果'}, {text:'奶酪'} ] } }) var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 alert(event.target.tagName) } } }) new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) </script> </html>
相关文章推荐
- Vue.js 2 入门与提高(一)
- 曹可爱之最可爱-Vue.js入门 (一)初识
- Vue.js——快速入门
- Vue.js——60分钟快速入门
- Vue.js快速入门示例
- Vue.js——60分钟快速入门
- Vue.js—60分钟快速入门
- vue.js移动端app实战3:从一个购物车入门vuex
- Vue.js——60分钟webpack项目模板快速入门
- Vue.js——vue-router 60分钟快速入门
- Vue.js——60分钟快速入门
- Vue.js入门-安装
- 曹可爱之最可爱-Vue.js入门(十)组件2
- Vue.js快速入门及示例
- Vue.JS入门教程之处理表单
- Vue.js入门——打造todo应用
- vue.js入门(3)——组件通信
- vue.js入门环境搭建
- Vue.js学习笔记-入门