vue
关注
分享
扫一扫
你是人间五月天
这个作者很懒，什么都没留下…
展开
-
vue抽离路由模块
一、新建router.jsimport VueRouter from 'vue-router'import accout from './main/Account.vue'import goodsList from './main/GoodsList.vue'import child1 from './children/child1.vue'import child2 from './children/child2.vue'//3、创建路由对象var router = new Vue原创 2020-11-10 21:32:31 · 196 阅读 · 0 评论 -
vue组件中style的lang属性和scoped属性
<template> <div> <h1>这是account组件</h1> <router-link to="/account/child1">子组件1</router-link> <router-link to="/account/child2">子组件2</router-link> <router-view></rou.原创 2020-11-03 22:21:56 · 3048 阅读 · 0 评论 -
Vue结合webpack使用vue-router 显示组件及子组件
一、先安装vue-router模块npm i vue-router -S二、导入vue-router包importVueRouterfrom'vue-router'三、手动安装VueRouterVue.use(VueRouter)四、创建路由对象varrouter=newVueRouter({routes:[{path:'/account',component:accout},{path:'/goodsList'...原创 2020-10-28 21:45:13 · 208 阅读 · 0 评论 -
es6 使用export default 和export 向外暴露成员
一、export default注意事项：export default向外暴露的成员可以使用任意的变量来接收；在一个模块中，export default只允许向外暴露一次；在一个模块中可以同时使用export default 和export向外暴露成员；二、export注意事项：使用export向外暴露的成员，只能使用{ }的形式来接收；export可以向外暴露多个成员，同时，如果某些成员我们在import的时候不需要，则可以不再 { }中定义；使用export向外暴露的原创 2020-10-26 22:32:08 · 2211 阅读 · 0 评论 -
浏览器访问报net::ERR_INCOMPLETE_CHUNKED_ENCODING
定位问题：当直接请求接口时，有些数据被截掉了。当没通过nginx转发时，接口返回数据正常。由次可知问题发生在nginx。查看nginx的错误日志：open() “/usr/local/var/run/nginx/proxy_temp/0/03/0000000030” failed (13: Permission denied) while reading upstream。分析：当代理文件大小超过配置的proxy_temp_file_write_size值时，nginx会将文件写入到临时目录下（默认原创 2020-10-26 18:24:35 · 824 阅读 · 0 评论 -
在webpack使用render渲染vue组件
1、建立login.vue 的组件，如图：2、在main.js中引入login.vue注意：webpack无法打包.vue的文件，需要安装相关的loader npmivue-loadervue-template-compiler-Dimport Vue from 'vue'//webpack无法打包 .vue的文件，需要安装相关的loader// npm i vue-loader vue-template-compiler -Dimport login from '...原创 2020-10-20 22:19:31 · 518 阅读 · 0 评论 -
使用vue的render渲染组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-10-15 22:14:45 · 559 阅读 · 0 评论 -
webpack初步使用
1.webpack能够处理js文件的互相依赖关系；能够处理js的兼容问题，把高级的、浏览器不识别的语法，转为低级的浏览器能正常识别的语法一、新建项目如下包含最基本的css，js等，然后执行命令npm init -y初始化npm环境，如图：项目中会多出package.json文件将main.js用webpack构建到dist目录，使浏览器能识别es6语法...原创 2020-09-02 22:22:43 · 132 阅读 · 0 评论 -
node nrm 的使用
原创 2020-09-02 20:55:30 · 327 阅读 · 0 评论 -
vue computed计算属性的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-08-27 22:19:53 · 234 阅读 · 0 评论 -
vue使用watch监听路由地址的变化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-07-12 16:43:33 · 2965 阅读 · 0 评论 -
vue使用watch监听data的变化
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-07-06 22:26:05 · 9828 阅读 · 0 评论 -
vue使用命名视图实现经典布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-06-22 22:03:42 · 356 阅读 · 0 评论 -
vue路由的嵌套，子路由的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-06-22 21:35:02 · 626 阅读 · 0 评论 -
vue路由传参
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-06-17 21:46:00 · 125 阅读 · 0 评论 -
vue修改路由切换时的class名称，并添加切换动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-06-11 22:06:37 · 1064 阅读 · 0 评论 -
vue路由的基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.原创 2020-06-03 22:43:34 · 178 阅读 · 0 评论 -
Vue子组件调用父组件方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-03-15 15:41:03 · 352 阅读 · 0 评论 -
Vue父组件向子组件传值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-03-15 14:38:27 · 147 阅读 · 0 评论 -
Vue中利用component切换组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-03-10 21:50:37 · 1132 阅读 · 0 评论 -
Vue组件中的data
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-03-09 23:00:44 · 220 阅读 · 0 评论 -
Vue创建私有组件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-29 16:34:08 · 182 阅读 · 0 评论 -
Vue创建组件的方式3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-25 22:38:09 · 148 阅读 · 0 评论 -
Vue创建组件的方式2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-23 21:41:54 · 108 阅读 · 0 评论 -
Vue创建组件的方式1
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-23 21:28:59 · 92 阅读 · 0 评论 -
vue使用animate类库实现动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-12-23 21:42:37 · 250 阅读 · 0 评论 -
vue使用全局自定义指令实现刚进页面使文本框获取焦点
//使用Vue.directive()定义全局指令 v-focus //其中，参数1：指令的名称，注意在定义的时候指令的名称前不用加v-前缀 //但是：在调用额时候必须在指令名称前加上v-前缀来进行调用 //参数2是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作 Vue.directive('focus',{ ...原创 2019-12-23 21:17:45 · 225 阅读 · 0 评论 -
vue-使用过度类名实现动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-10-20 17:02:52 · 152 阅读 · 0 评论 -
vue helloworld小程序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-03-21 22:43:14 · 129 阅读 · 0 评论 -
vue基本指令学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-03-25 22:39:45 · 1277 阅读 · 0 评论 -
v-model指令双向绑定使用案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-03-26 23:18:57 · 488 阅读 · 0 评论 -
vue中class样式的设置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-07 16:53:33 · 1260 阅读 · 0 评论 -
vue使用style内联样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-07 17:11:01 · 2196 阅读 · 0 评论 -
vue v-for使用详解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-07 22:35:31 · 4807 阅读 · 0 评论 -
v-if和v-show的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-04-15 22:36:14 · 138 阅读 · 0 评论 -
vue-resource 发送get,post,jsonp请求
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-05-13 22:23:59 · 258 阅读 · 0 评论 -
vue自定义全局过滤器、全局指令、按键修饰符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-05-06 21:45:22 · 640 阅读 · 0 评论 -
vue实例生命周期解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-05-09 23:49:50 · 140 阅读 · 0 评论 -
ant design change等方法默认传值加上自定义参数传值
<a-select @change="value => handleChange(value, param)" v-model="eqList[index].eqId"> </a-select>如上所示：handleChange的value参数即为默认参数，param为自定义参数...原创 2019-07-09 11:07:01 · 12681 阅读 · 6 评论 -
vue devtools安装详解
一、去github下载vue devtools项目https://github.com/vuejs/vue-devtools二、windows进入cmd窗口，进入到存放devtools的目录，如图：然后安装npm包：npm install三、编译项目文件：npm run build四、添加至chrome浏览器浏览器输入地址“chrome://extensions...原创 2019-03-21 22:00:48 · 545 阅读 · 0 评论