JavaWeb学习(十一)---VUE$Element

什么是VUE?

JavaWeb学习(十一)---VUE$Element_第1张图片

VUE快速入门

JavaWeb学习(十一)---VUE$Element_第2张图片

VUE的常用指令

JavaWeb学习(十一)---VUE$Element_第3张图片
JavaWeb学习(十一)---VUE$Element_第4张图片




    
    Title



div1
div2
div3

JavaWeb学习(十一)---VUE$Element_第5张图片

JavaWeb学习(十一)---VUE$Element_第6张图片


div1
div2
div3

vue双向绑定:

当数据发生变化时,视图也发生变化,反之,当视图发生变化时,数据也跟着同步变化。



div1
div2
div3

效果:当输入2显示div2,当输入3显示div3,从而实现双向绑定
在这里插入图片描述
在这里插入图片描述
JavaWeb学习(十一)---VUE$Element_第7张图片

 
{{addr}}

JavaWeb学习(十一)---VUE$Element_第8张图片

VUE生命周期

JavaWeb学习(十一)---VUE$Element_第9张图片
JavaWeb学习(十一)---VUE$Element_第10张图片
JavaWeb学习(十一)---VUE$Element_第11张图片

注意:一般在mounted方法中写ajax异步请求

JavaWeb学习(十一)---VUE$Element_第12张图片

Element

JavaWeb学习(十一)---VUE$Element_第13张图片

网址:https://element.eleme.cn/#/zh-CN

快速入门:

JavaWeb学习(十一)---VUE$Element_第14张图片

布局:

JavaWeb学习(十一)---VUE$Element_第15张图片

Scope

JavaWeb学习(十一)---VUE$Element_第16张图片

element-ui将行对象封装到scope
row表示当前行的数据

你可能感兴趣的:(Java学习,1024程序员节)