昨日回顾

ajax概念使用
json格式使用方法

今日目标

vue快速入门
vue常用指令
ElementUI入门
ElementUI常见组件

注意: 以后每学习一个新的技术, 希望大家能够对号入座, 这样知道所学的每个大的技术是用来解决哪一层的问题的 .

【第一章】Vue快速入门

1 入门步骤

【需求】：将Vue中定义的值展示到标签的内容体中
【第一步】：复制js文件到module中，并在页面引入vue.js文件
【第二步】：创建Vue对象，传递相关参数

2 快速入门

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title></head><body><!--【需求】：将Vue中定义的值展示到标签的内容体中--><div id="app"><p>姓名：{{name}}</p></div><p>年龄：{{age}}</p></body><script src="js/vue.js"></script><script>//定义vue对象let vue=new Vue( {el:"#app",  //表示Vue对象接管的区域data:{  //data用来封装变量，这里面定义的变量都可以使用vue对象来获取name:"国澳",age:30}});//可以打印vue对象中定义的name和agealert(vue.name+","+vue.age);</script>
</html>

3. 容易出错点:

4 入门案例升级版

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title></head><body><!--【需求】：将Vue中定义的值展示到标签的内容体中--><div id="div"><p>姓名：{{name}}</p><p>年龄：{{age}}</p></div><input type="button" value="修改name的值" onclick="changeName()"><input type="button" value="修改age的值" onclick="changeAge()"></body><script src="js/vue.js"></script><script>//定义vue对象let vue=new Vue({el:"#div",  //表示Vue对象接管的区域data:{  //data用来封装变量，这里面定义的变量都可以使用vue对象来获取name:"国澳",age:30}});//可以打印vue对象中定义的name和age//alert(vue.name+","+vue.age);function changeName() {vue.name="小涛";}function changeAge() {vue.age=20;}</script>
</html>

4 总结

创建Vue对象：new Vue( { } )，注意V需要大写。
el参数：表示vue对象要接管的区域，这一块区域将来可以使用vue提供的方式取值。
data参数：用来在vue中定义变量，这些变量的值将来会被展示到页面上
methods参数：用来在vue中定义方法，将来会被调用

【第二章】Vue常用指令

1 常用指令介绍

2 v-html指令

作用：设置标签的内容体，浏览器会解析内容体中的html代码。

<body><div id="div"><!--需求1：使用插值表达式展示数据,类似于之前的innerText，不解析html标签--><div>{{message}}</div> <!--结果：<h1>黑马程序员</h1>--><!--需求2：使用指令展示数据，类似于innerHTML，浏览器会解析html标签--><div v-html="message"></div><!--结果：黑马程序员,是一个h1标题--></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{//定义变量// message:"黑马程序员"message:"<h1>黑马程序员</h1>"}});
</script>

3 v-bind指令【重点】

作用：{{}}插值表达式只能用来操作内容体，不能用来操作属性，如果需要将vue中定义的变量值复制给标签的属性，那就就需要使用v-bind指令,也可以简写成[:属性名=“变量名”]。

<body><div id="div"><a href="http://www.baidu.com">百度一下</a><br><!--需求1：将vue中定义的heimaHref添加给该a标签--><a v-bind:href="heimaHref">黑马一下</a><!--简写,使用较多--><a :href="heimaHref">黑马一下</a><img :src="url"><br><!--需求2：动态绑定class属性--><div :class="myClass">我是div</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{// heimaHref:"http://www.itheima.com"heimaHref:"http://www.itcast.cn",myClass:"my",url:"http://www.itheima.com/logo.png"}});
</script>

4 v-if、v-else-if、v-else、v-show指令

v-if、v-else-if、v-else作用：起到判断作用，符合条件的标签才展示，否则就没有标签。

v-show作用：是否展示标签，本质是操作display样式，标签是存在的只不过被隐藏了。

<body><div id="div"><!-- 需求1：判断number的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 --><div v-if="number%3==0">div1</div><div v-else-if="number%3==1">div2</div><!--<div v-else-if="number%3==2">div3</div>--><div v-else>div3</div><!--需求2：显示/隐藏div4--><div v-show="flag">div4</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{number:8,flag:false}});
</script>

5 v-for指令[重要]

作用：用来遍历容器或者对象展示到页面上

<body><div id="div"><!--需求1：循环展示vue中定义的数组的内容--><ul><!--参数一：name表示遍历的值，参数二：index表示遍历的索引。()小括号可以省略不写，然后通过插值表达式获取--><li v-for="(name,index) in names">{{name}}-------{{index}}</li></ul><hr><!--需求2：循环展示vue中定义的对象的内容--><ul><!--参数一：value表示对象的属性值，参数二：name表示对象的属性名--><li v-for="(value,name) in user">{{name}}---------{{value}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{names:['胡冰','胡山','胡广'],user:{name:"tom",age:30,gender:"男"}}});
</script>

6 v-on指令【重点】

作用：给标签绑定事件，v-on:click="“或者@click=”"都可以

<body><div id="div"><!--需求1：展示vue中定义的name值--><div>{{name}}</div><!--需求2：传统方式绑定事件修改name的值--><button onclick="changeName()">改变div的内容</button><!--需求3：使用vue的方式绑定事件,要执行的方法需要定义在methods里面--><button v-on:click="change()">改变div的内容</button><!--需求4：绑定事件的简写方式,使用较多--><button @click="change()">改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>let vue=new Vue({el:"#div",data:{name:"胡广"},methods:{change(){this.name="胡⛰️⛰⛰️⛰️"}}});function changeName() {vue.name="胡冰冰";}
</script>

7 v-model指令【重点】

作用：用来给表单中的数据进行双向绑定。

双向绑定：vue中变量的值发生变量了，页面就数据就变化。如果页面数据发生了变量，那么vue的变量值也跟着发生变量，这就是双向数据绑定。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MyDE5vPN-1613231884071)(assets/image-20200926190402610.png)]

<body><div id="div"><!--需求2：展示填写或者选中的内容--><div>输入的姓名是：{{user.username}}</div><div>输入的年龄是：{{user.age}}</div><div>选择的性别是：{{user.gender}}</div><div>选择的爱好是：{{user.hobbies}}</div><form><!--需求1：将表单和vue进行双向数据绑定-->姓名：<input type="text" name="username" v-model="user.username"><br>年龄：<input type="number" name="age" v-model="user.age"><br><!--当radio的value值和绑定的数据值相等，就表示选中-->性别：<input type="radio" name="gender" value="man" v-model="user.gender">男<input type="radio" name="gender" value="woman" v-model="user.gender">女<br>爱好：<input type="checkbox" name="hobbies" value="sing" v-model="user.hobbies">唱<input type="checkbox" name="hobbies" value="dance" v-model="user.hobbies">跳<input type="checkbox" name="hobbies" value="rap" v-model="user.hobbies">rap<input type="checkbox" name="hobbies" value="basketball" v-model="user.hobbies">篮球<br><!--需求3：点击按钮，通过ajax把表单数据发送给服务器--><input type="button" value="提交信息" @click="sendData()"></form></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{user:{username:"jack",age:20,gender:"woman",hobbies:["sing","dance"]}},methods:{sendData(){console.log("提交表单参数到服务器："+this.user);}}});
</script>

【第三章】ElementUI基本使用

1 ElementUI介绍

网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。Element官网：https://element.eleme.cn/#/zh-CN

2 入门案例【掌握】

【第一步】：将ElementUI相关的资源复制到mudule中

【第二步】：在页面引入css和js相关文件

<!--引入ElementUI的css文件-->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!--引入vue和ElementUI的js文件-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>

【第三步】：参考ElementUI官方提供的组件，复制代码即可展示

<body><button>我是按钮</button><br><div id="div"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><br><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><br><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><br><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row></div>
</body>
<script>new Vue({el:"#div"});
</script>

3 基础布局【了解】

Layout 布局：每一行分成24个格子，迅速简便地创建布局。

<style>.el-row {margin-bottom: 20px;}.el-col {border-radius: 4px;}.bg-purple-dark {background: #99a9bf;}.bg-purple {background: #d3dce6;}.bg-purple-light {background: #e5e9f2;}.grid-content {border-radius: 4px;min-height: 36px;}.row-bg {padding: 10px 0;background-color: #f9fafc;}
</style>
<body><div id="div"><!--:gutter="20"每列元素直接的间隙--><el-row :gutter="20"><!--:span="16"表示每列元素占的格子数量--><el-col :span="16"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col></el-row><el-row :gutter="20"><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><!--:offset="3" 表示该元素向有的偏移量--><el-col :span="16" :offset="3"><div class="grid-content bg-purple"></div></el-col></el-row></div>
</body>
<script>new Vue({el:"#div"});
</script>

4 容器布局【了解】

用于布局的容器组件，方便快速搭建页面的基本结构，说白了就是将整个页面分成几部分。

<!--省略了css样式，需要自己复制样式--><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer>
</el-container>

5 表单组件【了解】

<body><div id="div"><el-form :model="ruleForm" :rules="rules" ref="ruleForm2" label-width="100px" class="demo-ruleForm"><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 label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm2')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</body>
<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) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});
</script>

6 表格组件【掌握】

<body><div id="div"><div style="width: 900px"><template><el-table v-bind:data="tableData" style="width: 100%" max-height="250"><!--定义有哪些列--><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="120"><!--操作这一列展示"移出"按钮--><template slot-scope="scope"><el-button@click.native.prevent="deleteRow(scope.$index, tableData)"type="text"size="small">移除</el-button></template></el-table-column></el-table></template></div></div>
</body>
<script>new Vue({el:"#div",data:{tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]},methods: {deleteRow(index, rows) {rows.splice(index, 1);}}});
</script>

7 顶部导航栏组件

<body><div id="div"><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><!--单级菜单条目--><el-menu-item index="1">处理中心</el-menu-item><!--多级菜单条目--><el-submenu index="2"><!--多级菜单标题--><template slot="title">我的工作台</template><!--多级菜单中的单级条目--><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><!--多级菜单条目--><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.itheima.com" target="_blank">订单管理</a></el-menu-item></el-menu></div>
</body>
<script>new Vue({el:"#div",data:{activeIndex: '1',activeIndex2: '2-4-2'  //默认选中},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}});
</script>

8 侧边导航栏组件

<body><div id="div"><el-row class="tac"><el-col :span="6"><el-menudefault-active="1-1"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i><span>导航一</span></template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item><el-menu-item index="1-3">选项3</el-menu-item><el-menu-item index="1-4">选项4</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title">导航二</span></template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-menu-item index="2-4">选项4</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i><span slot="title">导航三</span></template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item><el-menu-item index="3-3">选项3</el-menu-item><el-menu-item index="3-4">选项4</el-menu-item></el-submenu><el-submenu index="4"><template slot="title"><i class="el-icon-menu"></i><span slot="title">导航四</span></template><el-menu-item index="4-1">选项1</el-menu-item><el-menu-item index="4-2">选项2</el-menu-item><el-menu-item index="4-3">选项3</el-menu-item><el-menu-item index="4-4">选项4</el-menu-item></el-submenu></el-menu></el-col></el-row></div>
</body>
<script>new Vue({el:"#div",methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}});
</script>

【第四章】学生列表案例

1 案例效果

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-blF17WTO-1613231884076)(assets/image-20200927192918314.png)]

分析图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hinzAVLK-1613231884077)(assets/image-20200819163940936.png)]

2 头部区域的实现

<!--头部分-->
<el-header style="background-color:#545c64"><el-row><!--左边图片--><el-col :span="2"><!--放图片--><img src="img/export.png" style="margin-top: 20px"/></el-col><!--右边顶部导航栏--><el-col :span="5" :offset="17"><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3"><a href="https://www.itheima.com" target="_blank">首页</a></el-menu-item></el-menu></el-col></el-row>
</el-header>

3 侧边栏区域的实现

<!--侧边栏部分-->
<el-aside width="200px" style="height: 800px;background-color:#545c64"><el-col :span="24"><el-menudefault-active="2"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i><span>学工部</span></template>
<el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
<el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
<el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span>咨询部</span></template>
<el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
<el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
<el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i><span>教研部</span></template>
<el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
<el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
<el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item></el-submenu></el-menu></el-col>
</el-aside>

4 主区域的实现

<!--主体部分-->
<el-main><!--第一行：学生列表和按钮--><el-row><el-col :span="3"><font color="red" size="5">学生列表</font></el-col><el-col :span="2" :offset="19"><el-button type="primary">添加学生</el-button></el-col></el-row><!--第二行：表格数据--><el-row><el-col :span="24"><template><el-table:data="tableData"style="width: 100%"><el-table-columnlabel="日期"prop="date"></el-table-column><el-table-columnlabel="姓名"prop="name"></el-table-column><el-table-columnlabel="地址"prop="address"></el-table-column><el-table-column align="right"><template slot-scope="scope"><el-buttonsize="mini"@click="handleEdit(scope.$index, scope.row)">修改</el-button><el-buttonsize="mini"type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></template></el-col></el-row>
</el-main>

5.作业:

能够把Vue 快速的用起来, (入门案例)
常用的指令的用法: v-bind , v-if, v-for, v-on , v-model
能够把 ElementUI 入门给弄会 (能跑通)
把课堂上 v-model , v-for 的代码多练习两遍
请谈谈你对 MVVM的理解.
把elementUI 中表单用起来
把elemrntUI 中表格用起来

复习一下之前的, 预习后面的

Vue和Element第一天相关推荐

Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
vue使用element中的el-date-picker实现每月的第几周
vue使用element中的el-date-picker实现每月的第几周最近写的项目里面有一个功能是实现选择周的(如图 1),第一反应是使用element里面的el-date-picker组件,但是 ...
Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
【Vue】 element ui 引入第三方图标
最近一个项目用到 vue 和 element ui开发前端.使用element ui自带的icon太少,所以引入第三方的.截止目前为止国内外网络上的相关教程我搜索到没超过5篇,而且都不详细,即使全部阅 ...
vue取数据第一个数据_我作为数据科学家的第一个月
vue取数据第一个数据 A lot. 很多. I landed my first job as a Data Scientist at the beginning of August, and lik ...
Node mysql mvc vue_net MVC +Vue.js+Element UI 笔记
最近项目需求,要在MVC里用Vue 与 Element UI,故而做个笔记来记录一些遇到的问题和处理思路 (方式比较麻瓜,如果不是临时用的话,建议还是学一下Vue-cli,新项目还是老老实实前后端分离 ...
element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
vue使用element 上传图片，修改图片
vue使用element 上传图片,修改图片文章目录 vue使用element 上传图片,修改图片前言一.应用场景 1.上传图片并进行放大预览 2.图片上传代码二.修改已经上传的图片,并展示到 ...
Vue安装element ui踩坑
在vue安装element ui 的过程中报了许多错误,慢慢踩坑,希望能帮到各位 1. 输入 vue add element 输入 y y zh-CN 如果报错 ERROR comman ...

Vue和Element第一天