Vue简单入门
是什么
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。、
为什么
避免了页面的DOM操作(document.getElementById())
提供了响应式的数据绑定(数据的双向绑定)
与组件化的开发(抽象可重用代码为组件)
怎么做
入门程序,在html页面中测试,大致页面如下
常用标签
v-bind
页面效果:
v-model
v-model实现双向绑定,当input的值改变,data下的content也会随之改变,可以在new Vue({})中定义方法获取到data中的数据。
v-model使用在表单提交做适合不过。
@click
@click定义点击事件
v-if / v-else
简单的if-else判断,为true则显示 h1 元素。v-model实现ok属性的双向绑定,点击时实现true / false的切换。
v-for
for循环展示数据,效果如下