简述:
Jquery框架 完全是用来驱动dom的。
而vue完全将视图与model分离出来,实现mvvm模型。
初步使用:
1. 像引入一般的js一样,引入js包(大的工程是通过npm进行安装的)
2. new出对应的Vue:el为操作的节点,data为可以使用的数据
这里为要操作的节点
节点里面的数据我们就可以直接使用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连用来进行显示判断