vue|青训营

72 阅读1分钟

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开始。