Vue是一款前端渐进式框架,可以提高前端开发效率。
- Vue通过MVVM模式,能够实现视图与模型的双向绑定。
- 简单来说,就是数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化。
Vue是一个类似于Jquery的一个JS框架,所以,如果想使用Vue,则在当前页面导入Vue.js文件即可。
显示数据(v-text和v-html)
v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题. -v-text:把数据当作纯文本显示。 -v-html:遇到html标签,会正常解析。
数据双向绑定数据(v-model)
Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化。
- 双向绑定, 只能绑定“文本框,单选按钮,复选框,文本域,下拉列表”
- 文本框/单选按钮/textarea, 绑定的数据是字符串类型。
- 单个复选框, 绑定的是boolean类型。
- 多个复选框, 绑定的是数组。
- select单选对应字符串,多选对应也是数组。
事件绑定(v-on)
<button v-on:事件名="函数名/vue表达式">点我</button>
Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on。
循环遍历(v-for)
v-for="item in items" v-for="(item,index) in items"
- items:要迭代的数组
- item:存储数组元素的变量名
- index:迭代到的当前元素索引,从0开始。