Vue基本功能
下方有HTML源码示例
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
声明式渲染
<div id="app"> {{ message }} </div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
文本插值，我们还可以像这样来绑定元素 attribute
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！ </span> </div>
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })
条件与循环
<div id="app-3"> <p v-if="seen">现在你看到我了</p> </div>
var app3 = new Vue({ el: '#app-3', data: { seen: true } })
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } })
处理用户输入
<div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转消息</button> </div>
var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div>
var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })
组件化应用构建
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供 todo 对象 todo 对象是变量，即其内容可以是动态的。 我们也需要为每个组件提供一个“key”，稍后再 作详细解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})
下方有完整的练习代码,一个HTML页面
1 <html> 2 <head> 3 <title>Hello World</title> 4 5 <!-- 开发环境版本，包含了有帮助的命令行警告 --> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 </head> 8 9 <body> 10 11 <p> 12 <h3>练习1</h1> 13 <div id="app"> 14 {{ message }} 15 </div> 16 </p> 17 18 <hr/> 19 20 <p> 21 <h3>练习2</h1> 22 <div id="app-2"> 23 <span v-bind:title="message"> 24 鼠标悬停几秒钟查看此处动态绑定的提示信息！ 25 <br> 26 打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息' 再次悬停 27 </span> 28 </div> 29 </p> 30 31 <hr/> 32 33 <p> 34 <h3>练习3</h1> 35 <div id="app-3"> 36 <p v-if="seen">现在你看到我了</p> 37 继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。 38 </div> 39 </p> 40 41 <hr/> 42 43 <p> 44 <h3>练习4</h1> 45 <div id="app-4"> 46 <ol> 47 <li v-for="todo in todos"> 48 {{ todo.text }} 49 </li> 50 </ol> 51 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目 52 </div> 53 </p> 54 55 <hr/> 56 57 <p> 58 <h3>练习5</h1> 59 <div id="app-5"> 60 <p>{{ msg }}</p> 61 <button v-on:click="reverseMessage">反转消息</button> 62 </div> 63 </p> 64 65 <hr/> 66 67 <p> 68 <h3>练习6</h1> 69 <div id="app-6"> 70 <p>{{ msg }}</p> 71 <input v-model="msg"> 72 </div> 73 </p> 74 75 <hr/> 76 77 <p> 78 <h3>练习7</h1> 79 <div id="app-7"> 80 <ol> 81 <!-- 创建一个 todo-item 组件的实例 --> 82 83 <!-- 84 现在我们为每个 todo-item 提供todo对象 85 todo 对象是变量，即其内容可以是动态的 86 我们也需要为每个组件提供一个 "key" ，稍后再作详细解释 87 --> 88 <todo-item 89 v-for="item in groceryList" 90 v-bind:todo="item" 91 v-bind:key="item.id" 92 ></todo-item> 93 </ol> 94 </div> 95 </p> 96 97 <hr/> 98 99 <p> 100 <h3>练习8</h1> 101 <span> (假想的) 例子</span> 102 <div id="app"> 103 <app-nav></app-nav> 104 <app-view> 105 <app-sidebar></app-sidebar> 106 <app-content></app-content> 107 </app-view> 108 </div> 109 </p> 110 111 112 113 114 <script> 115 116 var app = new Vue({ 117 el : "#app", 118 data:{ 119 message: "hello world" 120 } 121 }) 122 123 var app2 = new Vue({ 124 el: "#app-2", 125 data: { 126 message: "页面加载于" + new Date().toLocaleString() 127 } 128 }) 129 130 var app3 = new Vue({ 131 el: '#app-3', 132 data:{ 133 seen: true 134 } 135 }) 136 137 var app4 = new Vue({ 138 el: '#app-4', 139 data: { 140 todos:[ 141 { text: "学习 Java"}, 142 { text: "学习 Vue"}, 143 { text: "测试项目"}, 144 ] 145 } 146 }) 147 148 var app5 = new Vue({ 149 el: '#app-5', 150 data:{ 151 msg: "hello Vue" 152 }, 153 methods:{ 154 reverseMessage: function(){ 155 this.msg = this.msg.split('').reverse().join('') 156 } 157 } 158 }) 159 160 var app6 = new Vue({ 161 el: '#app-6', 162 data: { 163 msg: "hello zcy" 164 } 165 }) 166 167 Vue.component('todo-item',{ 168 // todo-item 组件现在接受一个 169 // "prop"，类似于一个自定义 attribute 170 // 这个 prop 名为 todo 171 props: ['todo'], 172 // template: '<li>这是个代办项</li>' 173 template: '<li> {{ todo.text }} </li>' 174 }) 175 176 var app7 = new Vue({ 177 el: '#app-7', 178 data:{ 179 groceryList: [ 180 { id:0, text: '蔬菜'}, 181 { id:1, text: '奶酪'}, 182 { id:2, text: '肉肉'} 183 ] 184 } 185 }) 186 187 </script> 188 189 </body> 190 191 </html>
