VUE和ElementUI基础入门
VUE快速入门
-
.下载和引入 vue.js 文件。
-
编写入门程序。
-
视图：负责页面渲染，主要由 HTML+CSS 构成。
-
脚本：负责业务数据模型（Model）以及数据的处理逻辑
-
举个例子
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <div id="div"> {{msg}} div> body> <script src="js/vue.js">script> <script> new Vue({ el:("#div"), data:{ msg:"hello vue" } }) script> html> -
Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的
-
vue中的获取元素:
this.$refs["xxx"] -
选项列表
- el 选项：用于接收获取到页面中的元素。
- data 选项：用于保存当前 Vue 对象中的数据。
- methods 选项：用于定义方法。
-
数据绑定
-
在视图部分获取脚本部分的数据。
{{变量名}}
-
-
相关指令
-
带有v-前缀的特殊属性,不同指令具有不同的意义
-
使用指令时,通常编写在标签的属性上,值可以使用js表达式
-
常用指令
指令 作用 v-html 把文本解析为HTML代码,可以解析标签 v-bind 为html标签绑定属性 v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染 v-else 同上 v-else-if 同上 v-show 根据条件展示某元素，区别在于切换的是display属性的值 v-for 列表渲染,遍历容器的元素或者对象的属性 v-on 为html绑定事件 v-model 在表单元素上创建双向绑定 -
v-model表单绑定
- v-model：在表单元素上创建双向数据绑定。
-
双向数据绑定
- 更新 data 数据，页面中的数据也会更新。
- 更新页面数据，data 数据也会更新
-
MVVM模型(Model View ViewModel)：是 MVC 模式的改进版
- 在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。
- 在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。
-
基本指令例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div">
<!-- 1.文本插值 -->
<div>
<!-- 1.1 {{}} -->
<span>{{name1}}</span>
<hr>
<!-- 1.2 v-html -->
<span v-html="name2"></span>
<hr>
<!-- 绑定属性 -->
<a v-bind:href="url1" v-html="url1"></a><br>
<a :href="url2" v-html="url2"></a><br>
<hr>
<!-- 条件渲染 -->
<ul>
<li v-if="nums > 1">li1</li>
<li v-else-if="nums > 2">li2</li>
<li v-else-if="nums > 4">li4</li>
<li v-else="nums > 3">li3</li>
</ul>
<hr>
<!-- 列表渲染 -->
<ul>
<li v-for="hobby in bobbies">
{{hobby}}
</li>
</ul>
<hr>
<!-- 事件的绑定 -->
<!-- 方式一 -->
<button v-on:click="change()">点我更改文本内容</button>
<!-- 方式二 -->
<button @click="exchange()">点我更改文本内容</button>
<!-- 不知道原理,不使用 -->
<!-- <button :click="exchange()">点我更改文本内容</button> -->
<hr>
<!-- 表单绑定:在表单元素上创建双向数据绑定<br>
双向数据绑定:更新 data 数据，页面中的数据也会更新。
更新页面数据，data 数据也会更新。 -->
<form>
年龄:<input type="text" name="=username" v-model="age">
</form>
</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
name1:"美食家老八",
name2:"东北腰子姐",
url1:"https://www.baidu.com",
url2:"https://www.bilibili.com",
nums:3,
bobbies:[
"吃饭",
"睡觉",
"打豆豆"
],
age:"三十有二"
},
methods:{
//定义方法方式一
change(){
this.name1="嘿嘿,来了"
},
//定义方法方式二
exchange:function(){
this.name2="来了老弟!!!"
}
}
})
</script>
</html>
Element 基本使用
介绍
- Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库.
- 使用 Element 前提必须要有 Vue。
- Element 官网：https://element.eleme.cn/#/zh-CN
使用步骤
- 下载 Element 核心库。
- 引入 Element 样式文件。
- 引入 Vue 核心 js 文件。
- 引入 Element 核心 js 文件。
- 借助常用组件编写网页。
- CV大法
拷贝data时需注意data函数中return语句返回的对象
方法直接拷贝methods
注意prop属性值的来源
表格中
1. 指定表格对象data，他指定一个数组
2. 它里面的prop属性指定每一个行的属性名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<style>
.el-row {
/* 行距为20px */
margin-bottom: 20px;
}
.bg-purple-dark {
background: red;
}
.bg-purple {
background: blue;
}
.bg-purple-light {
background: green;
}
.grid-content {
/* 边框圆润度 */
border-radius: 4px;
/* 行高为36px */
min-height: 36px;
}
</style>
</head>
<body>
<div id="div">
<el-button type="primary" plain>主要按钮</el-button><br>
<el-link type="danger">危险链接</el-link><br>
<div class="demo-input-suffix">
属性方式：
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input1">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input2">
</el-input>
</div>
<div class="demo-input-suffix">
<div class="block">
<span class="demonstration">默认不区分颜色</span>
<el-rate v-model="value1"></el-rate>
</div>
<div class="block">
<span class="demonstration">区分颜色</span>
<el-rate
v-model="value2"
:colors="colors">
</el-rate>
</div>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#div"
})
</script>
</html>
自定义组件
定义格式
Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})
举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义组件</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="div">
<my-button>我的按钮</my-button>
</div>
</body>
<script>
Vue.component("my-button",{
// 属性
props:["style"],
// 数据函数
data: function(){
return{
msg:"我的按钮"
}
},
//解析标签模板
template:""
});
new Vue({
el:"#div"
});
</script>
</html>
VUE生命周期
生命周期：核心八个阶段
beforeCreate：创建前
created：创建后
beforeMount：载入前
mounted：载入后
beforeUpdate：更新前
updated：更新后
beforeDestroy：销毁前
destroyed：销毁后
VUE异步操作
- 在VUE中发送异步请求,本质上还是AJAX,我们可以使用 axios 这个插件来简化操作！
- 使用步骤
- 引入 axios 核心 js 文件。
- 调用 axios 对象的方法来发起异步请求。
- 调用 axios 对象的方法来处理响应的数据。
- 常用方法
get(请求的资源路径与请求的参数) 发起GET方式请求
post(请求的资源路径,请求的参数) 发起POST方式请求
then(response) 请求成功后的回调函数，通过response获取响应的数据
catch(error) 请求失败后的回调函数，通过error获取错误信息
- 举个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步操作</title>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<div id="div">
{{name}}
<button @click="send()">发起请求</button>
</div>
</body>
<script>
new Vue({
el:"#div",
data:{
name:"张三"
},
methods:{
send(){
// GET方式请求
// axios.get("testServlet?name=" + this.name)
// .then(resp => {
// alert(resp.data);
// })
// .catch(error => {
// alert(error);
// })
// POST方式请求,假装有这个servlet处理后,返回响应数据
axios.post("testServlet","name="+this.name)
//请求成功后的回调函数，通过response获取响应的数据
.then(resp => {
alert(resp.data);
})
//请求失败后的回调函数，通过error获取错误信息
.catch(error => {
alert(error);
})
}
}
});
</script>
</html>