码农小小海 - 博客园

vue系列---【路由】

摘要： 1.路由介绍将路径映射到组件 2.路由安装 npm i vue-router --save 3.基本使用 const routes = [ { path:"/login", component:login }, { path:"/index", component:index }, ] 4.路由重阅读全文

posted @ 2021-05-19 23:11 码农小小海阅读(73) 评论(0) 推荐(0)

vue系列---【vue ui创建项目步骤】

摘要：一、打开终端，安装最新vue-cli npm install -g @vue/cli 二、终端运行vue ui vue ui 之后会自动跳转到http://localhost:8000,进入如下页面三、点击创建 1.填写项目名称 2.选择插件配置方式 3.选择手动配置项目将会进入这一步，可以选择插阅读全文

posted @ 2021-05-19 23:00 码农小小海阅读(602) 评论(0) 推荐(0)

vue系列---【组件通信、ref、is、slot插槽、mixin混入、脚手架使用animate】

摘要： 1.组件通信*** 1.1父传子:父组件的数据给了子组件理论： 1.父组件通过自定义属性传值 <v-child :msg="name"></v-child> 2.子组件通过props接收 export default { props:["msg"] } props验证 props: { tel: 阅读全文

posted @ 2021-05-19 22:41 码农小小海阅读(171) 评论(0) 推荐(0)

vue案例系列---【vue脚手架实现表单和列表的添加、修改、删除功能】

摘要： components下创建组件: 父组件index.vue (引入子组件注册调用 app.vue 引入注册调用index.vue) 子组件：form.vue和list.vue index.vue 代码如下： <template> <div>  <button @cli 阅读全文

posted @ 2021-05-16 22:13 码农小小海阅读(1268) 评论(0) 推荐(0)

vue案例系列--【vue+Element ui 实现登录页面】

摘要： <template> <div class="login-container"> <el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0p 阅读全文

posted @ 2021-05-16 16:27 码农小小海阅读(1251) 评论(0) 推荐(0)

vue案例系列---【购物车计算总价】

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-05-16 16:24 码农小小海阅读(504) 评论(0) 推荐(0)

vue系列--【vue-cli2.9.6脚手架创建项目步骤】

摘要：前提条件：默认安装node（推荐nodejs v14.17.0） 1.安装 1.安装webpack npm install webpack -g //安装webpack@5.76.2 安装脚手架 npm install vue-cli -g // 安装脚手架（默认vue-cli@2.9.6）查看版阅读全文

posted @ 2021-05-11 20:21 码农小小海阅读(431) 评论(0) 推荐(0)

vue系列--【animate.css、过滤器、组件基础】

摘要： 1.动画场景： 1. v-if 2. v-show 3.动态组件 4.路由使用：进来之前 enter 进来过程 enter-active 进来完成 enter-to 离开之前 leave 离开过程 leave-active 离开完成 leave-to <transition name="aa" 阅读全文

posted @ 2021-05-11 20:08 码农小小海阅读(88) 评论(0) 推荐(0)

vue系列--【生命周期、侦听器watch、计算属性、jsonp解决跨域】

摘要： 1.生命周期 let vm=new Vue({ // 创建之前:什么都是undefined beforeCreate() { console.group("创建之前"); console.log('el:', this.$el); console.log('data:', this.$data); 阅读全文

posted @ 2021-05-11 19:53 码农小小海阅读(76) 评论(0) 推荐(0)

vue系列--【动态样式、表单数据绑定、表单修饰符、事件处理、$set】

摘要： 1.bootstrap安装官网：http://bootcss.com 下载： npm i bootstrap 2.动态样式动态类名  <div :class="classn">建设社会</div> <div :class="[三元]"> </div> 阅读全文

posted @ 2021-05-11 19:41 码农小小海阅读(254) 评论(0) 推荐(0)