Vue基础使用
Vue
Vue与JQuery比较
- VUE与Jquery比较
- jquery在操作数据的时候一般要操作dom,进行标签的crud
- Vue主要是面向数据操作，主要功能是处理数据，对于标签的操作由Vue自动完成
- Vue面向数据编程思想的一种体现，对数据完成操作即对标签完成操作
Vue简介
- Vue是一套构建用户界面的渐进式前端框架
- 自是关注视图层，方便与其他已有库配合或与已有项目整合
- 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
- Vue特点：
- 易用：在有 HTML CSS JavaScript 的基础上，快速上手
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用
- 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
Vue入门
-
Vue组成部分
- 视图：负责页面渲染 ，主要由HTML+CSS组成
- 脚本：负责业务数据模型与数据的处理逻辑
-
Vue核心对象：每个Vue程序都是从一个Vue核心对象开始的
let vm=new Vue({
选项列表；
});
-
选项列表：
- el:用于接收当前页面的元素，一般是用选择器获取想要操作的元素
- data:用于保存当前Vue对象中的数据，给模板中的变量赋值
- methords:定义方法，方法可以通过对象名调用
-
数据绑定：
- 给模板中的数据赋值
- 格式：{{变量}}
<body> <div id="div"> <div>姓名：{{name}}div> <div>班级：{{classRoom}}div> <button onclick="hi()">打招呼button> <button onclick="update()">修改班级button> div> body>
## Vue指令
- 指令：标签中 是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for
- 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式
- 常用指令
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2dlS6IQt-1593508243996)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593396597153.png)]
- 文件插值：解析html标签
~~~html
{{msg}}
// 解析标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L4V0XCe7-1593508243999)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593397440716.png)]
-
绑定属性
- v-bind
- 语法一：v-bind:属性名=变量
- 语法二：：属性名=变量民
- v-bind
<style>
.my{
border: 1px solid red;
}
style>
head>
<body>
<div id="div">
<a v-bind:href="url">百度一下a>
<br>
<a :href="url">百度一下a>
<br>
<div :class="cls">我是divdiv>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{ // 相当于给变量赋值
url:"www.baidu.com",
cls:"my"
}
})
script>
-
条件渲染
-
v-if:对条件进行判断是否渲染
-
v-else:相当于java中的if中的else与另外两个标签配合使用
-
v-else-if:与if和else配合使用
-
v-show :切换display的值 在不满足条件的时候在dom树上有这个元素但是存在属性display
-
v-for:列表渲染
<body> <div id="div"> <div v-if="data>4">data大于4div> <div v-else-if="data>3">data大于3小于4div> <div v-else="data<3">data小于3div> <div v-show="flag">显示div> div> body> <script src="js/vue.js">script> <script> new Vue({ el:"#div", data:{ data:5, flag:false } }); script>列表渲染
<body> <div id="div"> <ul> <li v-for="name in names"> // 循环遍历names数组中的数据生成li标签 {{name}} li> <li v-for="value in student">// 循环遍历对象中的属性信息生成li标签 {{value}} li> ul> div> body> <script src="js/vue.js">script> <script> new Vue({ el:"#div", data:{ names:["零点","王侠","詹蓝","赵樱空","霸王"], student:{ name:"郑吒", age:24, heigh:175 } } }) script>
-
事件绑定
- v-on绑定事件
- 语法：
- 在模板标签中添加 v-on:事件名=“需要触发的函数”
- @事件名=“触发的函数”
<body>
<div id="div">
<div>{{name}}div>
<button v-on:click="change1()">改变div的内容button>
<button @dblclick="change2()">改变div的内容button>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
name:"南兖州"
},
methods:{
change1(){
this.name="北俱芦洲"
},
change2(){
this.name="桐叶洲"
}
}
})
script>
表单绑定
- 表单绑定
- v-model ：在表单元素上创建双向数据绑定
- 双向数据绑定
- 更新data数据表单中的数据也会更新
- 表单中的数据更新data中的数据也会更新
<body>
<div id="div">
<form autocomplete="off">
姓名：<input type="text" name="username" v-model="username"> // 拿到data中的数据并赋值给input标签
<br>
年龄：<input type="number" name="age" v-model="age">
form>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23
}
});
script>
Element的基本使用
-
简介：
- 饿了么公司前端团队开发的一款基于 Vue的网站组价库
- Element 官网：https://element.eleme.cn/#/zh-CN
-
基本使用
-
- 下载 Element 核心库。
- 引入 Element 样式文件。
- 引入 Vue 核心 js 文件。
- 引入 Element 核心 js 文件。
- 编写按钮标签
- 通过 Vue 核心对象加载元素
-
-
表单组件
// rules:校验规则 ref:每个表单的唯一标识 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> // prop 校验具体规则 <el-form-item label="自定义" prop="name"> <el-input v-model="ruleForm.name">el-input> el-form-item> <el-form-item label="下拉选择" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="选择一" value="shanghai">el-option> <el-option label="选择二" value="beijing">el-option> el-select> el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">立即创建el-button> <el-button @click="resetForm('ruleForm')">重置el-button> el-form-item> el-form> <script> new Vue({ el:"#div", data:{ ruleForm: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ], date1: [ { type: 'date', required: true, message: '请选择日期', trigger: 'change' } ], date2: [ { type: 'date', required: true, message: '请选择时间', trigger: 'change' } ], type: [ { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' } ], resource: [ { required: true, message: '请选择活动资源', trigger: 'change' } ], desc: [ { required: true, message: '请填写活动形式', trigger: 'blur' } ] } }, methods:{ submitForm(formName) { // 调用validate函数返回一个布尔值 this.$refs[formName].validate((valid) => { // valid是一个布尔值 if (valid) { // 通过验证要执行的事件 alert('submit!'); } else { // 没有通过验证要执行的事件 console.log('error submit!!'); return false; } }); }, resetForm(formName) { // this.$refs[formName]选中forName表单 this.$refs[formName].resetFields(); } } }); script> -
表格组件
- 当
el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。
<div id="div"> <template> <el-table :data="tableData" style="width: 100%">el-table-column> el-table-column> el-table-column> el-table> template> div> <script> new Vue({ el:"#div", data:{ tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }) script> - 当
Vue自定义组件
-
自定义组件格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xoe4abTT-1593508244001)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593482919895.png)]
<body>
<div id="div">
<my-button>我的按钮my-button>
<wx-botton locaton="地址" gender="male" age="23">wx-botton> // 使用自定义标签
div>
body>
<script>
Vue.component("my-button",{
// 属性
props:["style"],
// 数据函数
data: function(){
return{
msg:"我的按钮"
}
},
//解析标签模板
template:""
});
Vue.component("wx-botton",{
// 自定义属性
props:["location","gender","age"],
// 定义模板
template:"{{location}}{{gender}}{{age}}{{bzr}}",
// 定义标签属性默认值
data:function(){
return {
bzr:"lzll",
age:"23"
}
}
})
new Vue({
el:"#div"
});
script>
-
生命周期
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uXpknsJz-1593508244003)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593484677775.png)]
Vue异步请求
-
axios
-
使用
-
导入axios的js文件
-
在Vue中的methods里面使用
-
axios中的方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UivZCXa4-1593508244004)(C:\Users\11079\AppData\Roaming\Typora\typora-user-images\1593486654446.png)]
-
-
<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方式请求
axios.post("testServlet","name="+this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});
script>
{
// alert(resp.data);
// })
// .catch(error => {
// alert(error);
// })
// POST方式请求
axios.post("testServlet","name="+this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});