小白小白从不日别的博客

学习了vue的常用指令后，在这里我们利用所学的来实现一个小demo主要功能：实现增删改查 * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } #app { width:

最终效果图：这里我们将头部区域、列表区域、以及列表里的增加和减少商品数量的区域、以及底部计算区域分别单独封装为一个组件，如下：大致实现步骤如下：1. 安装项目所需的第三方包通过 npm install bootstrap@4.6.0 --save 安装 bootstrap通过 npm install less less-loader@5.0.0 --save 安装 lessmain.js – 引入bootstrap样式：import 'bootstra...

只要将Vue-Router挂载到了vue实例对象上，我们就可以通过vue.$route拿到路由对象，只要能拿到路由对象，就可以通过路由对象拿到传递的参数方式：1.通过URL参数(?key=value&key=value)，通过this.$route.query获取2.通过占位符传递(路由规则中/:key/:key，路径中/value/value)，通过this.$route.params获取 <style> .onepage {

<script src="js/vue.js"></script><!--1.在导入vuex之前必须先导入vue--><script src="js/vuex.js"></script> <div id="app"> <father></father> </div> <template id="father"> <div&.

基本步骤：1.搭建页面的基本结构和利用 v-for 渲染对应的数据<template> <div class="wrap"> <div class="nav_left" id="navLeft"> <div class="nav_content"> <span v-for="(obj, index) in arr" :key="obj.first_id" @click="changeTab(ind...

在学习了vue的基础知识后，尝试着做了一个Tab选项切换并对其进行封装处理，下面我们就来开始逐步实现涉及的知识：$slots:插槽 $parent:边界管理->儿子通过$parent读取父级的属性和方法 props 自定义事件:$emit在开始该案例之前，我们先来看看其视图结构，大致如下：<tabs :currentIndex="index" @onIndex="changeHandle"> <tab index="1" label=".

0.前提条件该案例用到了 bootstrap 因此需要先通过 npm install bootstrap@4.6.0 安装并且在 mian.js 里引入：import 'bootstrap/dist/css/bootstrap.css'格式化时间需要用到 moment ，因此需要先 npm install moment@2.29.1 --save ，再引入：import moment from 'moment'1. 品牌数据增加, 功能实现1.1需求：实现表单数据新增进表格功能.

<style> .onepage { background: pink; } .twopage { background: orange; } /* .router-link-active { background: #f40; } */ .r-active { ...

0. 基本布局和将初始数据渲染到页面1. 小选影响全选小选框 input 里面的 v-model ：对象.c关联 选中 状态<li v-for="(obj, index) in arr" :key="index"> <!-- 让对象的 c 属性，关联 选中 状态 --> <input type="checkbox" v-model="obj.c" /> <span>{{obj.name}}...

大致步骤如下：1.创建新工程 2.在 components 里分别创建 TodoList 的头部组件（TodoHeader.vue）、主体组件（TodoMain.vue）以及底部组件（TodoFooter.vue）3.在三个组件里分别完成其页面结构和样式，并在 App.vue 里分别引入三个组件并注册和使用，再引入需要的样式文件，最后启动项目效果如下：4.把待办任务, 展示到页面TodoMain.vue组件上并关联选中状态, 设置相关样式：App.vue – 准备数组...

主要考察了：for循环 事件绑定（v-on/@） 计算属性（computed） 侦听器（watch） 本地存储（localStorage） json.stringfy()将对象、数组转换成字符串 json.parse()将字符串转成json对象步骤：完成页面布局和数据的渲染<template> <div id="app"> <p>请选择你要购买的书籍</p> <ul> <...

目录1.先搭好页面的基本布局：2.渲染表格里面的内容3.实现全选功能4.实现数量的加减功能5.实现点击删除功能6. 显示总价在这个案例里我们把表格里面的数据也就是 tr进行封装成一个组件，然后通过 v-for 循环进行重复利用大致步骤如下：1.先搭好页面的基本布局：将头部和尾部部分在 App.vue 里进行基本的搭建需要单独封装处理的 tr 封装成 MyTr.vue 组件，然后在 App.vue 里进行注册和引入，这里需要注意的是：DOM模板限...

1.铺设页面, 准备初始的数据并最终完整页面结构设计和渲染到页面上<template> <div id="app"> <div> <span>姓名:</span> <input type="text" /> </div> <div> <span>年龄:</span> <input type="nu...

最终实现的大致效果如下：这里一样采用组件封装的方式，大致如下：组件拆分:MyHeader.vue – 复用之前的（上一个案例 vue--实现购物车 时里面封装的 头部组件） MyTabBar.vue – 底部导航 MyTable.vue – 封装表格三个页面- MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页需要安装的第三方包：npm install less ..

1.什么是嵌套路由?嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件例如: 在one界面中又有两个按钮, 通过这两个按钮进一步切换one中的内容 <style> * { margin: 0; padding: 0; } .onepage, .twopage { width: 500px;

1.什么是命名视图?命名视图和前面讲解的具名插槽很像, 都是让不同的出口显示不同的内容命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default

分析:①: 准备标签和样式, 下载less模块和less-loader@5.0.0模块②: 完成页面结构和样式部分③: 按钮绑定点击事件④: 声明变量isShow来控制下面标签是否显示/隐藏④: 点击时, 改变isShow的值, 来影响页面效果<template> <div id="app"> <div> <h3>折叠面板demo</h3> <div class="tit...

<script src="js/vue.js"></script><!--1.在导入vuex之前必须先导入vue--><script src="js/vuex.js"></script><div id="app"> <father></father> </div> <template id="father"> <div&g.

<script src="https://unpkg.com/vue@next"></script><div id="root"></div><script> //将关于 list 的内容进行封装 const listRelativeEffect = () => { const { reactive } = Vue; const list .

1.什么是Watch属性?Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法2.Watch监听路由变化Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化在企业开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的a.监听数据变化<script src="js/vue.js"></script> <div id="app"> <!--

在学习了vue的相关知识后，便做了一个名为“疫情动态实时播报”的小项目下面是最后做完之后的一些主要的界面：头部，简介，内容，现在让我们从0开始正式进入项目吧！！！涉及知识点：vue基础知识 vue-router axios vant Echarts前期准备：1.创建项目， 首先，在命令行工具中进入到你要创建项目的位置，通过 vue create xxx 创建vue项目然后，选择最后一项...

前期准备：通过 vue create xxx 创建vue项目，这里在创建时我们勾选上 router 选项，自动创建路由在src/assets目录里新建css文件，将css初始化文件放入，并在main.js里通过import引入(import'./assets/css/common.css')在阿里巴巴图标库下载对应的导航图标，然后放入src/assets目录里：再在main.js里引入(import'./assets/font/iconfont.css')项...

基于Vue3+Vite+TS的后台管理项目，从零开始手把手教你如何实现

步骤/思路：定义变量 message:‘HELLO, WORLD’ 插值表达式赋予到dom上, 准备按钮和文字 按钮绑定点击事件和函数 对message值用split拆分, 返回数组 数组元素翻转用reverse方法 再把数组用join拼接成字符串赋予给message 因为Vue是MVVM设计模式, 数据驱动视图, 所以视图自动改变<template> <div id="app"> <p>{{message}}</p>

目录一、 什么是服务器端渲染？1.1 初始化项目1.2 服务端渲染小案例1.3 右键查看源代码二、什么是客户端渲染？2.1 初始化项目2.2 查看源代码三、客户端渲染vs服务端渲染3.1 运行架构对比3.2 开发模式对比四、vue框架中的服务端渲染4.1 初始化项目4.2 vue服务端渲染最小demo4.3 遗留问题五、理解同构理念六、Nuxt.js框架使用6.1. 使用nuxt.js创建一个ssr项目6.2 启动项目6.3 查看源

目录一、button 组件开发1.1 整体目标1.2 确定组件API1.3 编写测试基础Button1.4 完成type配置1.5 完成size配置1.6 完成事件绑定1.7 总结二、Editor编辑器组件开发2.1 确定基础API2.2 编写测试基础Editor2.3 完成v-model双向绑定2.4 总结一、button 组件开发1.1 整体目标了解组件开发的整体流程 掌握组件事件和标签事件的区别 掌握在组件上使用v-...

一、数据响应式1.1 响应式是什么一旦数据发生变化，我们可以立刻知道，并且做一些你想完成的事情，这些事情包括但不限于以下：发送一个网络请求 打印一段文字 操作一个dom ....1.2 如何实现数据响应式在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x 和 vue3.x使用的方式，他们分别是： 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 1.

钩子函数： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated：指令所在组件的 VNode 及其子 V

公共部分：<div id="root"></div><script src="https://unpkg.com/vue@next"></script>1.inheritAttrs属性：<script> //Non-prop属性 const app = Vue.createApp({ template: ` <div> .

一、初识vue3.0现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。element-plus(opens new window) 基于 Vue 3.0 的桌面端组件库 vant(opens new window) vant3.0版本，有赞前端团队开源移动端组件库 ant-design-vue(opens new window) Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发1.1 vue3.0 的优点最火框...

目录一、实现表单基本结构1.1 创建项目1.2 安装Element二、表单校验的先决条件2.1 model属性 (表单数据对象)2.2 绑定model2.3 rules规则2.4 设置prop属性2.5 给input双向绑定字段属性三、表单校验规则3.1 基本使用规则3.2 自定义校验规则3.3 手动校验的实现四、Async 和 Await4.1 回调模式和promise的链式调用4.2 关于Promise你必须知道几件事4.3 异步编程的

公共部分：App.vue<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <AsynchronousBoundary /> </div></template><script>import AsynchronousBoundary from "./components/AsynchronousBou

公共部分：<div id="root"></div><script src="https://unpkg.com/vue@next"></script>a.组件data优先级高于mixindata优先级：<script> //局部 mixin const myMixin = { data() { return { num...

一、插件的基本使用1.1 初识插件Vue.use()做了什么事情?Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用什么时候需要定义插件?当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件例如: 网络加载指示器如何自定义一个插件?自定义插件https://cn.vuejs.org/v2/guide/plugins.html#%E5%BC%80%E5%8F%91%E6%8F%92%E4%BB

Element官网PC端的后台系统适用于ElementUI组件库首先通过 vue create xxx 创建好 vue 项目其次，你可以通过npm i element-ui -S以上方式安装 element再者，也可以通过vue-cli@3 来安装，前提是你需要在全局先安装 @vue-cli ，然后进入到你创建的 vue 项目里，通过 vue add element 命令来安装 element注意： Fully import -- 全引用，即一次性将所有...

官网地址适用于移动端首先，通过 vue create xxx 创建 vue 项目其次，对于 vant 的安装有如下几种方式：一是通过， --本项目用的方式# Vue 2 项目，安装 Vant 2：npm i vant -S# Vue 3 项目，安装 Vant 3：npm i vant@next -S一是通过 优快云，<!-- 引入样式文件 --><link rel="stylesheet" href="https://cdn.js

1.Vue渲染组件的两种方式1.1先定义注册组件, 然后在Vue实例中当做标签来使用1.2先定义注册组件, 然后通过Vue实例的render方法来渲染2.两种渲染方法的区别1.1当做标签来渲染, 不会覆盖Vue实例控制区域1.2通过render方法来渲染, 会覆盖Vue实例控制区域<script src="js/vue.js"></script> <!--这里就是MVVM中的View--> <div id="a

目录一、初识 axios1.1 什么是 axios1.2 使用 axios 发送ajax 请求二、axios方式GET/POST请求2.1 发送GET请求2.2 发送POST三、全局配置及请求响应拦截器3.1 全局配置3.2 拦截器四、封装及跨域配置4.1 跨域解决方案4.2 示例五、创建服务器提供数据实践5.1 前期准备一、初识 axios1.1 什么是 axios一个专门用于发送ajax请求的库通过 npm...

目录一、初识生命周期1.1 生命周期函数图1.2 什么是生命周期方法?二、Vue生命周期方法分类2.1 初始化阶段的生命周期方法2.2 挂载阶段的生命周期方法2.3 更新阶段的生命周期方法2.4 销毁阶段的生命周期方法2.5 补充三、$refs--ref3.1 初识 ref3.2 ref的特点3.3 ref获取组件对象3.4 异步更新DOM四、$nextTick4.1 初识 $nextTick4.2 $nextTick 的其他应用场景五

1.动态路由配置前期准备：通过 vue create xxx 创建vue项目，这里在创建时我们勾选上 router 选项，自动创建路由将前面学习 axios 时封装的跨域配置，utils文件夹以及 vue.config.js文件分别放置在该项目的src目录和根目录下通过 npm install axios --save 安装 axios项目结构：vue.config.jsmodule.exports = { devServer: { prox..