Vuejs
关注
分享
扫一扫
Mr.ZKH
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue-cli可视化创建项目
命令: vue ui可视化创建视图创建项目出错：解决方法创建完成如下原创 2020-01-08 13:20:52 · 217 阅读 · 0 评论 -
父子组件的通信
父传子父用子的时候通过属性传递子要声明props:[‘属性名’] 来接收收到就是自己的了，随便你用在template中 直接用在js中 this.属性名 用子传父子组件里通过$emit(‘自定义事件名’,变量1，变量2)触发父组件@自定义事件名=‘事件名’监听子组件方法里 this.$emit('sendfather',val1,val2)触发自定...原创 2019-08-02 00:01:53 · 110 阅读 · 0 评论 -
嵌套路由
代码思想1:router-view的细分router-view第一层中，包含一个router-view2:每一个坑挖好了，要对应单独的组件路由配置 routes: [ { path:'/nav', name:'nav', component:...原创 2019-08-05 23:33:20 · 118 阅读 · 0 评论 -
Vue 之CLI创建一个项目
随意创建一个文件夹：vue create demo 创建一个项目名称demo敲击Enter之后:写入Y 按Enter之后：首次创建按下键选择 Manually select features按空格键选所需要的按Enter之后：写入Y , 按Enter之后选In package.json 按Enter之后按Enter之后这时候查看你所建的文件夹会有一个dem...原创 2019-07-27 23:28:27 · 129 阅读 · 0 评论 -
Vue之CLI 环境搭建
安装nodejs:https://nodejs.org/en/download/查看是否安装成功：node -v引入淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org安装Vue CLIcnpm install -g @vue/cli 安装淘宝镜像之后的命令加个c...原创 2019-07-27 21:28:40 · 100 阅读 · 0 评论 -
Vue之v-extend
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-extend</title> <script src="js/vue.min.js"></script></head><body&g...原创 2019-07-23 14:33:38 · 243 阅读 · 0 评论 -
Vue之slot
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot</title> <script src="js/vue.min.js"></script></head><body> ...原创 2019-07-26 21:34:54 · 96 阅读 · 0 评论 -
slot插槽和ref、$parent
slot插槽slot就是子组件里给DOM留下的坑位<子组件>DOM</子组件>slot是动态的DOMref获取子组件实例识别：在子组件或元素上使用属性ref=“xxxx”获取：this.$refs.xxxx 获取元素$el 是拿其DOMparent获取父组件实例（可在子组件直接使用this.parent获取父组件实...原创 2019-07-31 21:26:57 · 405 阅读 · 0 评论 -
路由的传参和取参
查询参配置（传参） :to="{name:‘login’,query:{id:loginid}}"获取（取参） this.$route.query.id路由参数配置（传参） :to="{name:‘register’,params:{id:registerid} }"配置路由的规则 { name:‘detail’,path:’/detail/:id’}...原创 2019-08-04 18:20:39 · 859 阅读 · 0 评论 -
路由守卫
const router = new VueRouter({ ... }//前置的钩子函数 最后要执行next（）才会跳转router.beforeEach((to, from, next) => { // ...})//后置的钩子函数 已经跳转了不需要nextrouter.afterEach((to, from) => { // ...})主要是简单介绍一下，...原创 2019-08-06 16:07:28 · 207 阅读 · 0 评论 -
Vue购物车实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车实例</title> <script type="text/javascript" src="js/vue.min.js"></script><...原创 2019-08-08 17:02:18 · 186 阅读 · 0 评论 -
Vue学习经历的一些错误，解决问题的经验
错误：解决方法：看一下你表单配置是否写错了，很容易写错的一个点是modelKey的k是大写原创 2019-08-12 22:19:30 · 131 阅读 · 0 评论 -
cube-ui注册页的实现
<template> <div> <cube-form :model="model" :schema="schema" @submit="submitHandler"> </cube-form> </div></...原创 2019-08-10 23:40:26 · 634 阅读 · 0 评论 -
实战系列之安装使用ui框架-----cube-ui
vuecli3.x版本安装：vue add cube-uicube-ui:https://didi.github.io/cube-ui/#/zh-CN/docs/quick-start安装cube-ui的配置选择：https://github.com/cube-ui/cube-template/wiki原创 2019-08-10 20:35:59 · 695 阅读 · 0 评论 -
核心技能之ui库选择
vue是一套渐进式的框架，设计的时候就是自底层向上组层应用的。PC端的ui库基本不用做选型了，ElementUI的霸主地位无人能撼动移动端的选型看好几点即可能否自定义皮肤是否使用rem控制尺寸，完美适应不同分辨率移动设备组件类型风格是否与自己的项目相同或类似单元测试覆盖率更新频率的快慢移动端的框架有哪些：mint-ui vux vant cube-ui有赞：https...原创 2019-08-10 17:00:26 · 179 阅读 · 0 评论 -
Vue配置vue.config.js
vscode编辑器下：module.exports = { configureWebpack:{ devServer:{ port:8089, //端口号 open:true, //执行终端命令npm run serve 浏览器直接打开 } }}...原创 2019-08-10 16:45:51 · 212 阅读 · 0 评论 -
对比vue-cli2.x和vue-cli3.x的搭建
搭建前提条件：node环境node是傻瓜式安装的，直接去官网下载安装不断下一步命令行输入node -v查询版本号，有版本号即安装成功node自带npm包管理工具（安装好node也可以输入npm -v查看版本号）npm太慢，下载国内淘宝镜像cnpm(npm install -g cnpm --registry=https://registry.npm.taobao.org)安...原创 2019-08-10 15:36:50 · 215 阅读 · 0 评论 -
vue全家桶项目所用到的技术栈
项目构建工具vue-clivue-cli是一个脚手架工具，为我们搭建了开发所需要的环境和生成目录架构路由vue-router创建单页应用，我们的单页应用只做路由切换，组件拼凑成的页面映射成路由路由是我们单页应用的核心插件状态管理vuex状态管理库，可理解为全局数据集中地推荐小项目尽量别用vuex，会显得有点繁琐，bus总线机制完全可以处理了http请求工...原创 2019-08-10 12:38:28 · 1615 阅读 · 0 评论 -
Vue实现购物车之组件化和本地持久化
怎么存储到本地的，一脸懵逼…<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物车实例</title> <script type="text/javascript" src="js/vue.min.js"></...原创 2019-08-09 23:28:21 · 441 阅读 · 0 评论 -
Vue之v-bind绑定样式
v-bind:src=“imageSrc” 添加资源文件,如：图片、声音、视频等v-bind:width == :width v-bind 的缩写 ::class="[classA,classB]" 数组写法:class="{classA:classOr}" 判断是否显示 classOr:true/false:class="[classOr?classA:classB]" 三元运算...原创 2019-07-22 22:38:59 · 486 阅读 · 0 评论 -
Vue之v-model
v-model.lazy 失去焦点时触发v-model.number 输入的是整型，不需要parseInt()进行转换v-model.trim 去空格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model双向数据绑定</...原创 2019-07-22 21:26:56 · 441 阅读 · 0 评论 -
Vue常用实例方法和事件
方法：$mount() 挂载$destroy() 卸载$forceUpdate() 更新(迫使Vue实例重新渲染)$nextTick() 回调事件:$on() 监听当前实例的自定义事件$once() 监听一个自定义...原创 2019-07-26 14:42:02 · 402 阅读 · 0 评论 -
Vue之指令v-bind
v-bind=" " 和 {{}} 都可以渲染数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind指令</title> <script src="js/vue.min.js"></script&g...原创 2019-07-20 23:29:03 · 109 阅读 · 0 评论 -
Vue之渲染
01.声明式渲染el:渲染名称id:渲染范围或者起作用的范围<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>声明式渲染</title> <script src="js/vue.min.js"></scrip...原创 2019-07-20 23:18:29 · 101 阅读 · 0 评论 -
filter过滤器
1.过滤器就是可以对我们的数据进行添油加醋然后再显示2.过滤器有全局过滤器和组件内的过滤器全局过滤器Vue.filter(‘过滤器名’,过滤方式fn )组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }{{ msg | 过滤器名}}3.最终都是在过滤方式fn里面return产出最终你需要的数据4.vue中的this是vue封装好给我们使用的，跟平常方法里面的this是...原创 2019-07-30 05:23:16 · 99 阅读 · 0 评论 -
单双向数据流及事件绑定
1.vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)例子：<input v-bind:value="name" v-bind:class="name">单向数据绑定 内存改变影响页面改变v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染2.vue双向数据流 v-model 只作用于有value属性的元素例子：<...原创 2019-07-30 04:24:08 · 129 阅读 · 0 评论 -
熟悉及使用常用指令
什么是指令在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。譬如在HTML页面中这样使用<div v-xxx=''></div> 在vue中v-xxx就是vue的指令指令就是以数据去驱动DOM行为的,简化DOM操作常用的指令有哪些，及怎么使用这些指令 v-text 不可解析html标签v-html 可解析html标签v-if 做元素的插入（...原创 2019-07-29 22:12:41 · 224 阅读 · 0 评论 -
Vue之全局组件和局部组件
全局组件用Vue.component(’ 组件名’,{template: " "})局部组件在构造器中var vm = new Vue({components: { //在局部组件中是components" ":}})<!DOCTYPE html><html lang="en"><head> <...原创 2019-07-24 21:57:32 · 141 阅读 · 0 评论 -
引包、留坑、实例化、插值表达式
引包确认已经下载了node,然后执行命令 npm install vue (如需下载自己要的版本在vue后面加上@版本号)页面引入刚下载的包留坑 即留一个vue模板插入的地方或者是vue代码对其生效的地方实例化 即启动Vue启动： new Vue({el:目的地,template:模板内容});实例化传入的是一个对象optionsoptions目的地 el 对应上面留坑的坑位...原创 2019-07-29 17:23:34 · 163 阅读 · 0 评论 -
Vue之生命周期
beforeCreate 初始化之后 created 创建完成beforeMount 挂载之前 mounted 被创建beforeUpdate 数据更新前 updated 数据更新之后beforeDestroy 销毁之前 destroyed 销毁之后<!DOCT...原创 2019-07-23 22:38:02 · 88 阅读 · 0 评论 -
数据监听watch和计算属性computed
watch监听单个，computed监听多个思考业务场景：类似淘宝，当我输入某个人名字时，我想触发某个效果利用vue做一个简单的计算器当watch监听的是复杂数据类型的时候需要做深度监听（写法如下）watch:{ msg:{ handler(val){ if(val.text=='love'){ ...原创 2019-07-30 14:31:41 · 277 阅读 · 0 评论 -
安装和使用路由
路由是以插件的形式引入到我们的vue项目中来的vue-router是vue的核心插件1:下载 npm i vue-router -S2:安装插件Vue.use(VueRouter);3:创建路由对象 var router = new VueRouter();4:配置路由规则 router.addRoutes([路由对象]);路由对象{path:'锚点值',component:要...原创 2019-08-02 21:46:04 · 249 阅读 · 0 评论 -
组件化开发
创建组件的两种方式：var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明Vue.component('组件名',组件对象);//全局注册 等于注册加声明了组件类型：通用组件（例如表单、弹窗、布局类等)业务组件（抽奖、机器分类）页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能...原创 2019-07-30 23:57:14 · 99 阅读 · 0 评论 -
组件化开发
创建组件的两种方式var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }//局部声明Vue.component('组件名',组件对象);//全局注册 等于注册加声明了组件类型通用组件（例如表单、弹窗、布局类等)业务组件（抽奖、机器分类）页面组件（单页面开发程序的每个页面的都是一个组...原创 2019-07-30 23:56:18 · 100 阅读 · 0 评论 -
路由的跳转
路由的跳转方式有：通过标签：<router-link to='/login'></router-link>通过js控制跳转this.$router.push({path:'/login'})区别：this.$router.push() 跳转到指定的url，会向history插入新记录this.$router.replace() 同样是跳转到指定的ur...原创 2019-08-03 14:49:29 · 218 阅读 · 0 评论 -
Vue之v-on:click=" " 事件
v-on:click=" " 和 @click=" " 效果一样v-model=" " 双向数据绑定@keyup=" " 键盘事件el: ’ # ’ 作用域名称 ， 必须加 #data: { } 初始化数据，可以定义常量、字符串、数组、对象等。。。methods: {方法名：function(){代码…}}所有方法都要写在methods的方法体里，除了原生的JavaScri...原创 2019-07-21 23:44:21 · 747 阅读 · 0 评论 -
Vue之v-text和v-html
v-text 无法过滤标签v-html 可以过滤标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-text和v-html</title> <script src="js/vue.min.js"><...原创 2019-07-21 21:59:15 · 112 阅读 · 0 评论 -
Vue之v-for
循环语句:v-forname in arrNamesort() 排序reverse() 倒序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-for</title> <script src="js/vue.min...原创 2019-07-21 21:50:58 · 160 阅读 · 0 评论 -
Vue之v-if和v-else
条件语句：v-ifv-else<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件与循环</title> <script src="js/vue.min.js"></script></head...原创 2019-07-21 21:34:02 · 107 阅读 · 0 评论 -
Vue之computed、watch在价格变动中的应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项</title> <script src="js/vue.min.js"></script></head><body> &l...原创 2019-07-25 16:51:20 · 226 阅读 · 0 评论