说明:
现在搞的几个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()