vue之前学习过一遍,但没有记录博客,工作中也只是用vue进行一些页面的渲染,今天开始把Vue复习一下,同时进阶一下
1,起步,简单的vue例子,了解一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue1 简单示例</title> </head> <body> <div id="app"> {{msg}} </div> </body> <!-- <script src="https://unpkg.com/vue"></script> --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'ssss' } }) </script> </html>
2,上个例子,在打开页面加载时候,有时候会出现{{msg}}这样的显示,解决此问题,可以使用v-text进行渲染,再看一个绑定渲染的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 绑定</title> </head> <body> <div id="app"> <span v-bind:title="msg"> 鼠标悬停显示加载时间 </span> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '页面加载时间' + new Date() } }) </script> </html>
3,对于if和for控制语句,vue不仅可以绑定dom到文本数据,同时也能够控制dom结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 条件与循环</title> </head> <body> <div id="app"> <p v-if="seen">看到</p> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data:{ seen: true } }) </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 条件与循环</title> </head> <body> <div id="app"> <table> <tr v-for="message in msg"> <td>{{message.text}}</td> <!-- <td v-for="message in msg">{{message.text}}</td> --> </tr> </table> <li v-for="message in msg">{{message.text}}</li> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data:{ msg: [ {text: 'a'}, {text: 'b'}, {text: 'c'} ] } }) </script> </html>
4,使用v-on 绑定一个时间监听器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定监听</title> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverse">反转</button> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { message: 'Vue' }, methods: { reverse: function() { return this.message = this.message.split('').reverse().join('') } } }) </script> </html>
5,双向绑定,下面示例是一个简单的双向绑定的示例,使用vue给人的感觉就是写很少的代码,做很多的事
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向绑定</title> </head> <body> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { message: 'hello world' } }) </script> </html>
6,组件化开发对于代码的解耦具有非常好的作用,同时也能加快开发速度,这种思想不管是前端还是后端,都是必须具备的,下边是一个简单的小示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 组件</title> </head> <body> <div id="app"> <ol> <todo-item v-for="item in items" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ol> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: "#app", data: { items: [ { id: 1, text: 'a'}, { id: 2, text: 'b'}, { id: 3, text: 'c'} ] } }) </script> </html>