Javaweb学习笔记第十六弹--Vue、Element

Vue（一套前端框架，MVVM主要用于实现数据的双向绑定）

Vue快速入门

//新建HTML页面，引入Vue.js文件

<script src="js.Vue.js"></script>

//在代码区域，创建Vue核心对象，进行数据绑定

//数据绑定

<div id="app">
<input v-model="username">
//插值表达式
{{username}}
</div>

//创建Vue核心对象
<script>
new Vue({
el:"#app"
data(){
return{
username:""
addrs:{"北京","西安","上海"}
}
}
});
</script>

//编写视图

Vue常用指令

指令1：v-bind-----作用：为HTML标签绑定属性值，
指令2：v-model-----作用：在表单元素上创建双向数据绑定
指令3：v-on-----作用：为HTML标签绑定事件

v-bind是一种动态绑定的链接方法，与v-model在同一模块中使用时，可以通过更改v-model中的链接地址，使得v-bind中的链接地址发生改变，访问不同网页

在使用时，v-on相当于@

指令4：v-if
指令5：v-else-if
指令6：v-else
指令7：v-show（条件满足会执行某条件）
指令8：v-for=

//v-for指令举例------已经在new Vue那里定义了一个数组，用于实现v-for的遍历作用
<div v-for="(addr,i) in addrs">
{{i+1}}--{{addr}}<br>
</div>

Vue生命周期

分为八个阶段：beforeCreate\created\beforeMount\mounted\beforeUpdate\update\beforeDestory\destory

其中，只有mounted被称为“挂载完成”，使用方法如下：(发送异步请求，请求挂载)

//在new Vue里面，继续加上一个mounted(){放置alert代码;}

Element基于Vue的网站组件库，用于快速构建网页

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

Element快速入门

1、引入Element的css、js文件和Vue.js

2、创建Vue核心对象

同上述对Vue创建对核心对象的讲解

3、官网复制Element组件代码

官网网址在上面已经给出

Element布局

Layout布局（横向布局--主要用于分列）

Container布局（带有导航栏）

Element常见组件（学会如何更加顺畅地从官网复制到这部分的代码）

1、表格

2、表单

3、对话框和表单

4、分页工具条