Vue简单入门

是什么

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。、

为什么

避免了页面的DOM操作(document.getElementById())

提供了响应式的数据绑定(数据的双向绑定)

与组件化的开发(抽象可重用代码为组件)

怎么做

入门程序,在html页面中测试,大致页面如下

Vue简单入门

常用标签

v-bind

Vue简单入门

页面效果:

Vue简单入门


v-model 

Vue简单入门

v-model实现双向绑定,当input的值改变,data下的content也会随之改变,可以在new Vue({})中定义方法获取到data中的数据。

v-model使用在表单提交做适合不过。


@click

Vue简单入门

@click定义点击事件


v-if / v-else

Vue简单入门

简单的if-else判断,为true则显示 h1 元素。v-model实现ok属性的双向绑定,点击时实现true / false的切换。


v-for

Vue简单入门

for循环展示数据,效果如下

Vue简单入门