44-VUE-1

说明:

现在搞的几个demo项目，服务都跑起来了，但是苦于前端页面还是用的jsp，所以现在7月份剩下的时间，把vue学会，然后8月把3个demo直接用vue搞出来。甚至8月不到就可以搞出来，搞完了9月直接进入分布式。

1.weex可以让vue也在移动端进行开发。。

2.vue插件一览-->

    ① vue-cli:     脚手架

    ② vue-resource（axios）:     ajax

    ③ vue-router:     路由

    ④ vuex:     状态管理

    ⑤ vue-lazyload:     图片懒加载

    ⑥ vue-scroller:     页面滑动相关

    ⑦ mint-ui:     基于vue的UI组件库（移动端）

    ⑧ element-ui:     基于vue的UI组件库（PC端）

3.在这里，创建vue实例

new Vue对象的时候，会传一个配置对象

el：元素-->选择器，在这里选择了一个叫做app的选择器

const；var；let这三个变量名

let是块级作用域

4.mvvm

在这里，跟传统的mvc不一样

双向数据绑定：v-model，这样的一种vm的设计，就是controller的升级版吧

5.在这里使用了chrome的vue插件以后，在检查里面就有了一个root，这里的root就代表了一个root对象

6.显示数据(渲染)

{{}}双大括号

7.root

在浏览器里面装了vue插件以后打开,如果有root,说明你已经创建了一个vm对象,也就是new Vue()

 

8.viewmodel就是vue的实例

9.v-text

这里的语法类似    { { } }

给标签体添加了一个文本,如果是v-html,相当于添加了一个超链接

如果文本是一个标签,那么v--text理解的就事一个文本,而v-html则是一个标签

10.v-bind:

在<img src="">在这里如果是写你的vue的data里面的值的名字

那么会被理解成一个string字符串,这里应该是一个表达式,所以要加v-bind或者省略的写,加一个冒号:

11.监听

在vue里面的监听:

<button v-on:click>

click是事件名的属性key,应该写成  v-on:click="test",test就事这个监听调用的函数名

然后在vue里面的methods里面把这个function的实现写出来

注意,在这里v-on是不能省略的,不像之前的html那个,这里写@click

在这里监听方法里面传值,直接写

12.computed-->执行条件:初始化的时候,再就是相关的值发生改变的时候

在这里用computed来往里面写代码计算:

13.watch

学了spring以后,再看别的东西,都觉得很简单...

14.get/set

这里有一点要注意一下,这里写的是一个属性,而不是方法

get:get的数据源发生改变的时候,这里调用get(这里注意一下,这里有缓存,多次读取的时候,只会计算一次(cunputed里面的代码))

set:本属性值发生改变的时候调用set

注意一下,这里的v-model,后面写的值,既可以后续写方法,也可以写属性

15.Class与style的绑定

:class="" 动态绑定,声明,然后绑定,就完事了

class里面可以写死,可以写一个动态的值,也可以写一个对象,对象是{ }

:Style,动态style...这里直接不看了

16.条件渲染 

v-if

v-else

v-show,这里也是一个布尔值

v-if&v-else 和v-show的区别就是，前者是标签移除，后者是隐藏  

17.列表渲染

splice，既可以修改，也可以删除

18.列表搜索和排序

设计到解构赋值，意思就是，直接给数组赋值-->let [a,b,c] = [1,2,3]

对象也是可以进行解构赋值的

19.不等

js里面有不等和严格不等

！= 和 ！== 是不一样的

前者不需要判断类型，后者是需要判断类型的

js里面还有== 和 ===，也是类似的，==允许类型转换，===是严格相等

20.vue事件处理

@click可以传一个事件对象$event，这个$event对象，里面就有innerHTML等一些数据

21.click的阻止时间不同，

一个是stop，一个是prevent

stop是防止阻止事件冒泡，prevent是阻止时间的行为

22.event的keycode属性

可以指定一个事件的触发按键

vue的写法-->这里直接写@keyup.13，或者keyup.enter。。。

23.表单数据自动收集

v-model，正如这个表面意思，就是把view<-->model进行双向绑定，model的变化，会让view变化，view检测到的数据变化，也会返回来改变model的值

24.vue生命周期

额外注意，当在一个函数里面，调用另一个函数的时候，这个时候为了能调用外部的vue对象，直接用=>来写，这样写比较好，java8也有语法糖lamda表达式

在这里，生命周期初始化的有一个方法：mounted，在这里设置间隔时间，同样还有一个销毁方法：this.$destroy()

25.随时可以给vue对象加filed

26.vue周期详解

el是指定一个服务对象，如果没有的话，那么就手动指定，一般不这么干

初始化阶段：

    beforeCreate()

    created()

    beforeMout()

    mounted()

更新阶段：

    beforeUpdate()

    updated()

死亡阶段：

    beforeDestroy()

    destroyed()