Vue 基础学习1

Vue 基础学习1

简述:

Jquery框架 完全是用来驱动dom的。

而vue完全将视图与model分离出来,实现mvvm模型。

初步使用:

1. 像引入一般的js一样,引入js包(大的工程是通过npm进行安装的)

2. new出对应的Vue:el为操作的节点,data为可以使用的数据

  1. 这里为要操作的节点

  1. 节点里面的数据我们就可以直接使用2中data包裹的数据

可放入的数据类型:

除了基本类型之外,这里要注意5的对象和6的对象数组。

在节点中显示多个的时候可用:

这里用的表达式就是:

{{属性}}

Vue常用指令

(用于扩展html的标签):

在Vue中自定义属性,必须要用到”v-”

v-model:

实现数据双向绑定:mvvm

在input中使用了v-model属性代替了input的value属性,实现了input与data中的msg的属性绑定

v-for:

遍历数据并显示

遍历普通数组1

对于传统的ul和li,为了用li展示全部数据,就不停地建li标签,有了v-for就可以按照arr数据类型,动态生成li。

遍历普通数组2

这样就连着索引一起显示出来了。

遍历对象:

而对于obj对象,则显示的是key-value,这里用的是data中的obj

遍历数组对象1:

而这里如果针对的是对象数组的话为:

遍历数组对象2

注意这里的使用方法和显示方法。

v-on:

设置对应的事件

在Vue的结构中的分块

1为所要操作的元素,2为可以操作的数据,3为允许使用的方法。这个结构还是很棒的,功能结构很清晰,对于开发者很友善。

所以这里v-on的方法就写在methon中。

多个事件的响应:

在v-on中设置不同出发条件的时间响应

v-on的简写:可以通过@来简写v-on:从而写成@click

v-show/v-if :

显示和判断

v-show:

通过v-show判断节点是否展示

v-if:

这里的v-if可以和v-else连用来进行显示判断

猜你喜欢

转载自blog.csdn.net/u011486491/article/details/80910865