Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Vue.js</title> 9 <!--开发环境版本，包含了有帮助的命令行警告--> 10 <script src="./vue.js"></script> 11 </head> 12 13 <body> 14 <h3>Vue</h3> 15 <hr> 16 17 <!--vue文本插值--> 18 <h4>文本插值</h4> 19 <div id="app"> 20 {{ message }} 21 </div> 22 <hr> 23 24 <!--元素特性绑定--> 25 <h4>元素特性绑定</h4> 26 <div id="app-2"> 27 <span v-bind:title="message"> 28 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 29 </span> 30 </div> 31 <hr> 32 33 <!--条件与循环--> 34 <h4>条件与循环</h4> 35 <div id="app-3"> 36 <p v-if="seen">现在你看到我了</p> 37 </div> 38 <hr> 39 40 <!-- v-for 指令--> 41 <h4>v-for指令</h4> 42 <div id="app-4"> 43 <ol> 44 <li v-for="todo in todos"> 45 {{ todo.text }} 46 </li> 47 </ol> 48 </div> 49 <hr> 50 51 <!--处理用户输入--> 52 <h4>处理用户输入</h4> 53 <div id="app-5"> 54 <p>{{ message }}</p> 55 <button v-on:click="reverseMessage">逆转消息</button> 56 </div> 57 <hr> 58 59 <!-- v-mode 指令--> 60 <h4>v-mode指令</h4> 61 <div> 62 <div id="app-6"> 63 <p>{{ message }}</p> 64 <input v-model="message"> 65 </div> 66 </div> 67 <hr> 68 69 <!--组件化应用构建--> 70 <h4>组件化应用构建</h4> 71 <div id="app-7"> 72 <ol> 73 <!-- 74 现在我们为每个 todo-item 提供 todo 对象 75 todo 对象是变量，即其内容可以是动态的。 76 我们也需要为每个组件提供一个“key”，稍后再 77 作详细解释。 78 --> 79 <todo-item v-for="item in groceryList" v-bind:key="item.id" v-bind:todo="item"> 80 </todo-item> 81 </ol> 82 </div> 83 84 <!--定义JavaScript部分--> 85 <script> 86 //文本插值 87 var app = new Vue({ 88 el: '#app', 89 data: { 90 message: 'Hello Vue!' 91 } 92 }) 93 //元素特性绑定 94 var app2 = new Vue({ 95 el: '#app-2', 96 data: { 97 message: '页面加载于 ' + new Date().toLocaleString() 98 } 99 }) 100 //条件与循环 101 var app3 = new Vue({ 102 el: '#app-3', 103 data: { 104 seen: true 105 } 106 }) 107 //v-for 指令 108 var app4 = new Vue({ 109 el: '#app-4', 110 data: { 111 todos: [ 112 { text: '学习 JavaScript' }, 113 { text: '学习 Vue' }, 114 { text: '整个牛项目' } 115 ] 116 } 117 }) 118 //处理用户输入 119 var app5 = new Vue({ 120 el: '#app-5', 121 data: { 122 message: 'Hello Vue.js!' 123 }, 124 methods: { 125 reverseMessage: function () { 126 this.message = this.message.split('').reverse().join('') 127 } 128 } 129 }) 130 //v-mode指令 131 var app6 = new Vue({ 132 el: '#app-6', 133 data: { 134 message: 'Hello Vue!' 135 } 136 }) 137 //组件化应用构建 138 Vue.component('todo-item', { 139 props: ['todo'], 140 template: '<li>{{ todo.text }}</li>' 141 }) 142 143 var app7 = new Vue({ 144 el: '#app-7', 145 data: { 146 groceryList: [ 147 { id: 0, text: '蔬菜' }, 148 { id: 1, text: '奶酪' }, 149 { id: 2, text: '随便其它什么人吃的东西' } 150 ] 151 } 152 }) 153 </script> 154 </body> 155 156 </html>