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组件代码
官网网址在上面已经给出
