乔晓强的博客_vue

01-学习vue前的准备工作

01-学习vue前的准备工作起步 1.扎实的HTML/CSS/Javascript基本功，这是前置条件。 2.不要用任何的构建项目工具，只用最简单的<script>，把教程里的例子模仿一遍，理解用法。不推荐上来就直接用 vue-cli 构建项目，尤其是如果没有 Node/Webpack 基础。另

ecmascript

块级作用域

代码块

变量提升

作用域

原创 2021-07-30 13:46:16 90 阅读

02-模板字符串

02-模板字符串模板字符串传统的JavaScript语言，输出模板通常是这样的写的。上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字

字符串

反引号

javascript

转义

html

原创 2021-07-30 13:46:14 155 阅读

vue实现登陆单页面

一实现页面的布局 1. 首先在components里建一个login.vue <template> <div class=login_container> 登陆组件 </div> </template> <script> export default { } </script> <style> <

vue

原创 2021-07-30 11:38:48 2121 阅读

vue前端项目初始化的步骤

前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目可以直接 vue create 项目名也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件库 5.配置axios库 6.初始化git远程仓库并托管到github或码云中

vue

原创 2021-07-30 11:38:47 192 阅读

vue作用域插槽实践

引言我在练手的时候发现后端返回的数据可以通过两种方式渲染（自己遇到的可能你都会哈哈哈）后端传过来的数据函数 from django.http import JsonResponse def record_detailed(request): all_record = models.Reco

vue

原创 2021-07-30 11:38:45 197 阅读

vue左侧菜单的实现

后端实现 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

原创 2021-07-30 11:38:44 1916 阅读

vue学习（七）refs的使用

ref的使用只有在特殊的情况下使用 1.如果给标签添加ref，获取的就是真实的DOM节点2. 如果给子组件添加ref，获取的就是当前的子组件对象例子： <div id="app"> <App></App> </div> <script> const Test={ data(){ return{ }

vue

原创 2021-07-30 11:38:43 174 阅读

vue学习（九）对象变更检测注意事项

Vue不能检测对象属性的添加和删除，要是必须这么做的话需要使用 vue.$set() <body> <div id="app"> <h3> {{user.name}} {{user.age}}  </h3> <button @clic

vue

原创 2021-07-30 11:38:43 188 阅读

vue学习（五）生命周期的钩子函数

生命周期的钩子函数主要有以下几种 beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured * 不经常用我们这里

vue

原创 2021-07-30 11:38:42 170 阅读

vue学习（三）组件传值

组件官网(https://cn.vuejs.org/v2/guide/components.html) 组件分为局部组件和全局组件局部组件：是内容中国的一部分只是在当前组件加载的时候全部组件：如：导航栏侧边栏运用到任意地方一局部组件简单版 <div id="app"> <!--3.

vue

原创 2021-07-30 11:38:41 210 阅读

vue小练习--音乐播放器

1 首先建一个文件夹放几首歌曲 2 看代码 1）基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>音乐播放器</title> <meta name="viewport" content="wi

vue

原创 2021-07-30 11:38:40 382 阅读

vue学习（八）nextTick[异步更新队列]的使用和应用

nextTick的使用为了数据变化之后等待vue完成更新DOM，可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM <div id="app"> <h3>{{msg}}</h3> </div> <script> let app = new Vue({ el:

vue

原创 2021-07-30 11:38:39 260 阅读

vue学习（六）异步组件加载

异步组件加载首先准备简单的框架搭出来 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>异步组件加载</title> <meta name="viewport" content="width=devi

vue

原创 2021-07-30 11:38:38 459 阅读

vue学习（四）插槽

一匿名插槽 // 语法 Vue.component('MBtn', { template: ` <button> <slot></slot> </button> `, }); 使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="

vue

原创 2021-07-30 11:38:37 114 阅读

vue学习（二）Vue常用指令

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 绑定样式之前的写法

vue

原创 2021-07-30 11:38:36 155 阅读

vue学习（一）ES6常用语法

1 ES6常用语法 1.1 变量提升例① 例② 例③ 例④ 1.2 模板字符串 html 反引号与一般引号的区别 var ele = document.getElementById('app'); ele.innerHTML = '<ul ' + '<li 1</li ' + '<li 2</li

vue

原创 2021-07-30 11:38:35 84 阅读

vue学习（十二）vue全家桶 Vue-router&Vuex

一 vue-router的安装二 vue-router的基本使用三命名路由四动态路由的匹配和路由组件的复用一 vue-router的安装 NPM npm install vue-router 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能： // 在ro

微信

原创 2021-07-30 11:37:25 159 阅读

vue学习（十）mixin 偷懒

一 mixin混入偷懒技术架子 <div id="app"> {{msg}} </div> <script> let app = new Vue({ el:'#app', data:{ msg:'晓强' }, }) </script> mixin偷懒 <div id="app"> {{msg}}

微信

原创 2021-07-30 11:37:24 63 阅读

vue学习（十一）vue-cli3开发单文件组件

一单文件组件介绍二如何安装Vue-Cli3脚手架三快速原型开发四 vue-cli3生成项目五购物车项目搭建六购物车项目操作七 Mock模拟数据八 Vue中使用第三方组件（element-ui）九 Element的表单组件分析十表单组件设计-Input实现双向数据绑定十

微信

原创 2021-07-30 11:37:23 174 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

流年中渲染了微笑的博客