前端框架Vue
文章平均质量分 74
Vue系列的内容,主要以Vue 2.x为主,版本之间的差别,自行查阅官方文档。
laufing
944582529@qq.com 邮箱,用于交流学习
展开
-
Vue中使用axios发送异步请求到Django
目录前后端不分离前后端分离前后端不分离使用django搭建后端,模板页面index.html#index.html 普通页面中使用axios<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport原创 2022-02-09 13:30:01 · 2110 阅读 · 0 评论 -
vue----项目案例(类别)
点击每个标签,则加载对应类别下的新闻数据,并展示。原创 2022-11-10 09:20:42 · 131 阅读 · 0 评论 -
vue2-移动端创建
安装依赖配置babel.config.js:移动端适配其他:yarn add postcss postcss-pxtorem@5.1.1根目录下创建postcss.config.js文件module.exports = {plugins: {autoprefixer: {browsers: [‘Android >= 4.0’, ‘iOS >= 8’]},‘postcss-pxtorem’: {rootValue: 37.5,propList: [‘*’]}}启动即可原创 2022-11-05 20:55:30 · 1145 阅读 · 0 评论 -
Vue中使用ElementUI
element-ui在vue项目中的使用原创 2022-07-06 11:58:01 · 697 阅读 · 0 评论 -
axios----异步请求的库
axios异步发送请求的库原创 2022-06-20 22:31:22 · 188 阅读 · 0 评论 -
Vue项目问题汇总
目录This dependency was not found: * axiosCan't resolve 'sass-loader' in 'C:\Users\lenovo\Desktop\vueFront\lauf'This dependency was not found: * axiosnpm install -g axiosnpm install --save axiosCan’t resolve ‘sass-loader’ in ‘C:\Users\lenovo\Desktop\vue原创 2022-02-04 13:05:24 · 750 阅读 · 0 评论 -
前端框架Vue----路由
目录路由定义路由定义一组key-value的集合,由路由器统一管理。便于实现单页面应用SPA,局部刷新(ajax)前端:路由<----->组件后端:路由<------>视图函数原创 2021-12-30 15:53:35 · 503 阅读 · 0 评论 -
前端框架Vue----Vuex案例
加和案例需求代码需求代码定义一个calc.vue组件<template> <div> 显示数据:<span>{{ this.$store.state.sum }}</span><br> <button @click="add">增加1</button> <br> <button @click="sub">减少1</原创 2021-12-29 12:20:23 · 427 阅读 · 0 评论 -
前端框架Vue----vuex集中式状态管理
vuex集中式状态管理全局事件总线全局事件总线案例Vuex全局事件总线用于任意组件间的通信。定义一个变量让所有组件均可见===>放Vue原型(Vue.prototype.x = {xxx} )上const A = Vue.extend({}) //VueComponent构造函数const b= new A()Vue.prototype.x = b可调用$on $off $emit$on,绑定事件$off,解绑事件$emit,触发事件三者均在Vue的原型上绑定全原创 2021-12-29 10:20:25 · 669 阅读 · 0 评论 -
前端框架Vue----脚手架
目录脚手架脚手架Vue官方提供的标准化开发工具,即Vue CLI(command line interface)。脚手架官网原创 2021-12-17 08:51:35 · 2315 阅读 · 0 评论 -
前端框架Vue----组件化编程
目录组件化编程非单文件组件组件的命名方式组件的嵌套app管理组件VueComponent构造函数构造函数单文件组件组件化编程组件: 实现局部功能的代码、资源的集合提高代码复用率、运行效率将应用按照功能划分为各个组件,即组件化将一个大的js文件按照功能模块划分,即模块化非单文件组件一个文件中有多个组件创建组件://创建第一个组件const c1 = Vue.extend( {//没有el属性 //template组件的模板,只能一个根节点且<template>不能为原创 2021-12-16 23:27:53 · 1188 阅读 · 0 评论 -
前端框架Vue----生命周期
目录什么是生命周期生命周期函数什么是生命周期Vue的生命周期是在特定时期执行的一些回调函数,具有固定的名字,内容由自己编写。this指向Vue实例或者组件实例生命周期函数beforeCreate;在创建数据监测、数据代理之前执行。created; 刚完成数据监测、数据代理。beforeMount;在创建真实DOMmounted; 创建真实DOM,并挂载页面完成,通常在这设置定时器,发送网络请求,绑定事件,订阅消息等;常用beforeUpdate;更新之前,数据是新的,但页面是旧的upd原创 2021-12-16 19:51:29 · 400 阅读 · 0 评论 -
前端框架Vue----内置指令&自定义指令
目录内置指令获取浏览器Cookie内置指令v-text = “attr”;使用attr的内容替换标签的内容,相当于原生js的innerText属性<body> <div id="container"> <span>你好,{{ username }}</span><br> <span v-text="age">你好,{{ username }}</span> </di原创 2021-12-16 10:48:42 · 1146 阅读 · 0 评论 -
前端框架Vue----获取表单数据
获取表单数据需求获取数据并提交需求使用Vue收集如下用户数据:获取数据并提交代码实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w原创 2021-12-15 21:58:31 · 2764 阅读 · 1 评论 -
前端框架Vue----数据改变的原理
目录Vue中改变数据的原理监测对象监测数组Vue中改变数据的原理使用Object.defineProperty,将data对象中的每个属性重新定义给另一个对象obj,然后将obj赋给Vue实例的_data属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg原创 2021-12-15 20:12:34 · 600 阅读 · 1 评论 -
前端框架Vue----数组的过滤与排序
目录列表过滤列表的排序列表过滤通过输入关键字,实现一个搜索的功能。原始页面: 搜索页面:实现思路:计算属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte原创 2021-12-14 22:31:47 · 652 阅读 · 0 评论 -
前端框架Vue----设置样式
目录设置class样式设置class样式class样式动态切换<div class='s1' v-bind:class="s2">样式2</div><div class="s1" :class='s3'>样式3</div>只需动态改变s2属性、s3属性的值即可。原创 2021-12-13 20:56:27 · 2469 阅读 · 2 评论 -
前端框架Vue----监视属性
目录定义深度监视定义通过watch去监视一个已存在属性的变化,其值变化会触发handler回调函数的执行。<script type="text/javascript"> Vue.config.productionTip = false new Vue({ el: '#container', data: { sex: false, lauf: '依赖原创 2021-12-13 17:15:25 · 587 阅读 · 1 评论 -
前端框架Vue----计算属性
目录需求方式一方式二需求如图,要求输入框输入的内容在下面 动态地显示思路:数据驱动页面模板的渲染data变化,则页面重新渲染方式一插值方式,实现动态显示<div id="container"> <input type="text" name='username' placeholder="输入用户名" v-model="username"><br> <input type="text" name='age' plac原创 2021-12-12 21:43:46 · 1257 阅读 · 0 评论 -
前端框架Vue----事件处理
目录点击事件事件修饰符键盘事件点击事件v-on:click = ‘func1’@click = ‘func2’<div id='test'> <button v-on:click='func1'>点击{{ name1 }}</button> <button @click='func2'>点击{{ name2 }}</button> <input type='text' @focus="focus($event, '测试传参')"原创 2021-12-11 14:58:08 · 446 阅读 · 0 评论 -
前端框架Vue----数据代理
目录数据代理定义Vue实例的数据代理数据代理定义通过一个对象代理,去操作另一个对象的属性(读、写)。使用Object.defineProperty:<script type="text/javascript"> let a = {name: 'jack', age: 29} let b = {name: 'tom'} //b中没有age属性,定义代理a的age属性 Object.defineProperty(b, 'age', { get(){ return a.ag原创 2021-12-11 13:08:54 · 126 阅读 · 0 评论 -
前端框架vue中el 与data的其他用法
目录Vue实例最后挂载el容器data给一个函数Vue实例最后挂载el容器<script type="text/javascript"> //global config Vue.config.productionTip = false const v = new Vue({ // el: '#test', data: { name: 'jack', } }) // 最后挂载到容原创 2021-12-11 01:44:54 · 8319 阅读 · 1 评论 -
前端框架vue基础
目录安装vue安装vue的开发工具安装vue直接使用script引入vue.js下载地址<script src='/static/js/vue.jg'> //开发测试版(有警告提示等)<script src='/static/js/vue.min.js'> //生产版#cdn方式<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>导入后可以全局使用 Vuenp原创 2021-12-10 21:27:35 · 708 阅读 · 0 评论 -
前端框架vue系列
目录vue基础vue-cli脚手架vue-router路由vuexelement-uivue3vue基础vue是用于构建用户界面的渐进式javascript框架,目前使用比较多的仍是vue2。vue特点:组件化编程,提高代码复用率 、可维护性。声明式编码,无需直接操作DOM,提高开发效率采用虚拟DOM+differ算法,提高页面渲染性能。前置基础:ES6语法、模块化、原型、原型链、axios、promisevue官网开始学习基础vue-cli脚手架vue-router路由原创 2021-12-10 20:43:32 · 267 阅读 · 0 评论