学习Vue框架中必掌握的重点知识

一、什么是vue

vue是一套用于构建用户页面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

二、与原生JS的区别

我们可以通过一个小案例来演示

案例:把输入框中的信息实时显示在span标签中

原生JS


 
 

Vue


 
{{msg}}

区别:其中明显的区别就是省去了对DOM元素的操作

总结:

  1. 创建DOM元素,使其成为Vue实例的挂载点,Vue实例中的所有数据这能在挂载点中使用
  2. 通过new Vue来创建实例对象
  3. el属性指定当前Vue实例的挂载点
  4. data中是模型数据,这些数据依赖于当前Vue的实例,可以通过控制台输入app.msg来查看数据
  5. 可以通过插值表达式使用data中的数据

三、数据绑定

数据绑定就是将Vue实例中的data属性中的数据显示在挂载点中

1、内容绑定

将data中的数据显示成内容

{{msg}}

若想显示html标签只要是标签中用v-html即可

{{msg}}

2、属性绑定

将data中的数据作为某个元素的属性值

使用v-bind即可,属性可以是内置的,也可以自定义的,简写方式:

{{msg}}

3、表单标签的值

可以使用v-model指令在表单标签中使用双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素

1、文本框和文本域