随笔分类 - vue
摘要：一 实现页面的布局 1. 首先在components里建一个login.vue <template> <div class=login_container> 登陆组件 </div> </template> <script> export default { } </script> <style> <
阅读全文
摘要：前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接 vue create 项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件库 5.配置axios库 6.初始化git远程仓库 并托管到github或码云中
阅读全文
摘要：<el-table-column label="操作"> <template slot-scope="scope"> // 用到了 el-tooltip 鼠标放上去就会有提示 <el-tooltip effect="dark" content="编辑" placement="top" :entera
阅读全文
摘要：引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 （自己遇到的 可能你都会 哈哈哈） 后端传过来的数据函数 from django.http import JsonResponse def record_detailed(request): all_record = models.Reco
阅读全文
摘要：后端实现 django视图def menu(request): menu_list = models.Menu.objects.all().values('id', 'menu_name', 'parent_id') l = [] dic = {} for item in menu_list: if
阅读全文
摘要：一 vue-router的安装 二 vue-router的基本使用 三 命名路由 四 动态路由的匹配和路由组件的复用 一 vue-router的安装 NPM npm install vue-router 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： // 在ro
阅读全文
摘要：一 单文件组件介绍 二 如何安装Vue-Cli3脚手架 三 快速原型开发 四 vue-cli3生成项目 五 购物车项目搭建 六 购物车项目操作 七 Mock模拟数据 八 Vue中使用第三方组件（element-ui） 九 Element的表单组件分析 十 表单组件设计-Input实现双向数据绑定 十
阅读全文
摘要：一 mixin混入偷懒技术 架子 <div id="app"> {{msg}} </div> <script> let app = new Vue({ el:'#app', data:{ msg:'晓强' }, }) </script> mixin偷懒 <div id="app"> {{msg}}
阅读全文
摘要：Vue不能检测对象属性的添加和删除，要是必须这么做的话 需要使用 vue.$set() <body> <div id="app"> <h3> {{user.name}} {{user.age}} <!--this.user.age=20 这个是不会成功的--> </h3> <button @clic
阅读全文
摘要：nextTick的使用 为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM <div id="app"> <h3>{{msg}}</h3> </div> <script> let app = new Vue({ el:
阅读全文
摘要：ref的使用只有在特殊的情况下使用 1.如果给标签添加ref，获取的就是真实的DOM节点2. 如果给子组件添加ref，获取的就是当前的子组件对象例子： <div id="app"> <App></App> </div> <script> const Test={ data(){ return{ }
阅读全文
摘要：异步组件加载 首先准备 简单的框架搭出来 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>异步组件加载</title> <meta name="viewport" content="width=devi
阅读全文
摘要：生命周期的钩子函数 主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured * 不经常用我们这里
阅读全文
摘要：一 匿名插槽 // 语法 Vue.component('MBtn', { template: ` <button> <slot></slot> </button> `, }); 使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="
阅读全文
摘要：组件 官网(https://cn.vuejs.org/v2/guide/components.html) 组件分为局部组件和全局组件 局部组件：是内容中国的一部分 只是在当前组件加载的时候 全部组件：如：导航栏 侧边栏 运用到任意地方 一 局部组件 简单版 <div id="app"> <!--3.
阅读全文
摘要：1 首先建一个文件夹 放几首歌曲 2 看代码 1）基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <meta name="viewport" content="wi
阅读全文
摘要：vue学习（一）ES6常用语法 vue学习（二）Vue常用指令 vue小练习--音乐播放器 vue学习（三）组件传值 vue学习（四）插槽 vue学习（五）生命周期 的钩子函数 vue学习（六）异步组件加载 vue学习（七）refs的使用 vue学习（八）nextTick[异步更新队列]的使用和应用
阅读全文
摘要：2 Vue常用指令 2.1 vue用法 2.2 v html;v text 2.3 v for 2.4 v if,v else if,v else 2.5 v show 2.6 v bind 简写 ： 2.6.1 绑定a标签 我们之前的写法 vue中v bind指令 2.6.2 绑定样式 之前的写法
阅读全文
摘要：1 ES6常用语法 1.1 变量提升 例① 例② 例③ 例④ 1.2 模板字符串 html 反引号与一般引号的区别 var ele = document.getElementById('app'); ele.innerHTML = '<ul ' + '<li 1</li ' + '<li 2</li
阅读全文
摘要：02-模板字符串 模板字符串 传统的JavaScript语言，输出模板通常是这样的写的。 上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。 模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字
阅读全文
