vue
文章平均质量分 83
vue 介绍
武汉小喽啰
我就是我,颜色一样的焰火。。。。。。
展开
-
Vue使用脚手架进行模块化开发
1. 使用vue-cli创建项目模板1.1 说明1)vue-cli是vue官方提供的脚手架工具2)GitHub:https://github.com/vuejs/vue-cli3)作用:从https://github.com/vuejs-templates下载模板项目1.2 创建vue项目命令:1)全局安装脚手架:npm install -g vue-cli安装完成之后,就会有vue命令2)vue init webpack vue_demo注意1:vue init 模原创 2020-12-13 16:20:23 · 200 阅读 · 0 评论 -
vue.js学习笔记三十三—— MUI
1. 简介 MUI 不同于 Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于 Bootstrap; 而 Mint-UI,是真正的组件库,是使用 Vue 技术封装出来的 成套的组件,可以无缝的和 VUE项目进行集成开发;因此,从体验上来说, Mint-UI体验更好,因为这是别人帮我们开发好的现成的Vue组件; ...原创 2019-08-17 23:14:55 · 330 阅读 · 0 评论 -
vue.js学习笔记三十二—— MintUI组件
1. 官方文档基本介绍1.1 mint-ui是一个基于 Vue.js 的移动端组件库1.2 mint-ui组件官方文档:http://mint-ui.github.io/#!/zh-cn1.3 mintUI的安装// 安装# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -S1.4 mintUI...原创 2019-08-17 11:16:06 · 277 阅读 · 0 评论 -
vue.js学习笔记三十一—— 组件中style中写的样式
要使用style需要安装style-loader与css-loader,在webpack.config.js中配置module:{ rules:[ { test: /\.vue$/, use: 'vue-loader' }, // 处理 .vue 文件的 loader { test:/\.css$/,use:['style-lo...原创 2019-08-16 23:03:42 · 2630 阅读 · 0 评论 -
vue.js学习笔记三十——webpack使用vue-router
1. 安装vue-router环境npm i vue-router2. 使用vue-router2.1 导包import Vue from 'vue';import VueRooter from 'vue-router';2.2 调用如果在一个模块化工程中使用它,必须通过Vue.use()明确的安装路由功能:Vue.use(VueRooter );注意:如果使用...原创 2019-08-12 23:21:48 · 448 阅读 · 0 评论 -
vue.js三十六—— 从无到有完整的项目实战3
1. 图片分享功能初步改造1.1 图片分享路由改造将图片分享a标签替换为router-link标签<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"> <router-link to="/home/photolist"> ...原创 2019-08-25 21:12:05 · 426 阅读 · 0 评论 -
vue.js三十五—— 从无到有完整的项目实战2
上一章我们完成了首页界面,今天完成新闻资讯模块1.改造新闻资讯的路由链接打开首页组件homeContainner.vue,找到新闻资讯的li标签,将a标签改为<router-link>标签,href改成to,跳转链接改成/home/newslist<li class="mui-table-view-cell mui-media mui-col-xs-4...原创 2019-08-24 21:05:06 · 352 阅读 · 0 评论 -
vue.js学习笔记二十 九——export default与export的使用方式
1. ES6与Node中导入与暴露成员的方式1.1 使用Node暴露与导入的方式1.1.1 导入在Node中使用 var 名称 = require('模块标识符'); 来导入成员1.1.2 暴露成员moudle.exports={} 和 exports来暴露成员1.2 使用ES6方式暴露成员与导入模块在ES6中,也通过规范的形式,规定了ES6中如何导入和导出模块1....原创 2019-08-11 23:09:56 · 10465 阅读 · 1 评论 -
vue.js学习笔记二十 八——初识Vue开发
1. 在普通网页中使用Vue的步骤1.1 使用script标签,引入Vue的包1.2在index页面中,创建一个id为app的div容器1.3通过new Vue 得到一个vm实例2. 初步使用Vue构建项目2.1 安装Vue把Vue这依赖安装为我们的项目依赖:npm i vue -S2.2 在webpack中使用Vue2.2.1 在main.js中导入Vue并创...原创 2019-08-10 23:18:05 · 376 阅读 · 0 评论 -
vue.js学习笔记二十 七——Vue的render函数渲染组件
1. 在页面中渲染最基本的组件通过字面量的形式定义模板对象,在vm对象中注册模板组件,最后在页面中引用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...原创 2019-08-08 23:42:01 · 812 阅读 · 0 评论 -
vue.js学习笔记二十 六——webpack中的babel
1. classclass是一个关键词,在es6的语法中,用来实现ES6中面向对象编程的方式而提出来的例如:class Person{ static info = {name:'张三',age:20};}var p = new Person();注意: 在class定义之前,我们是怎么表示类的了?之前我们都是通过Function来定义一个类的...原创 2019-08-05 21:57:45 · 271 阅读 · 0 评论 -
vue.js三十四—— 从无到有完整的项目实战1
1. 新建一个空的项目1.1 目录结构distsrc |---------- lib (存放第三方包) |---------- App.vue |---------- index.html |---------- main.js |---------- router.js.babelrcpackag...原创 2019-08-18 13:53:01 · 663 阅读 · 0 评论 -
vue.js三十七—— 从无到有完整的项目实战4
1. 商品购买模块1.1 路由改造1.1.1 新建goodsList.vue组件模板<template> <div> <h3>商品购买</h3> </div></template><script>export default { }<...原创 2019-09-01 11:08:52 · 230 阅读 · 0 评论 -
Vue学习精粹
1. 常用指令1.1v-cloak:用于解决插值表达式在网速比较慢的时候的闪烁问题1.2v-text:默认情况下没有插值表达式闪烁问题1.3v-html可以渲染html标签1.4v-bind绑定属性的指令,简写只需要在属性前面写 : 即可1.5v-on用于绑定事件的指令,简写形式,只需要在事件前面写 @ 即可1.6V-model可以实现表单元素和Model中数...原创 2019-09-22 21:39:23 · 152 阅读 · 0 评论 -
Vue.js学习笔记5——过滤器
1. 过滤器简介Vue.js允许你自定义过滤器,可被用作一些常见的文本格式。过滤器可以用在两个地方:mustache差值和v-bind表达式。过滤器应该被添加在js表达式的尾部,由“管道”符“ | ”指示。2. 全局过滤器所有的VM实例都可以调用2.1 过滤器调用时候的格式{{ name | 过滤器的名称 }}2.2过滤器的定义Vue.filter('过...原创 2019-09-22 20:58:10 · 132 阅读 · 0 评论 -
Vue.js学习笔记2——v-for数据的迭代
1. 使用v-for迭代数组1.1循环普通数组<body> <div id="app"> <p v-for="item in list">{{item}}</p> </div> <script> new Vue({ el:'#app'...原创 2019-09-22 20:38:41 · 466 阅读 · 0 评论 -
vue.js四十—— 项目实战7之购物车页面
1. 购物车页面商品列表1.1 改造shopcar.vue组件1.1.1 新建两个mui的card区域<div class="mui-card"> <div class="mui-card-content"> <div class="mui-card-content-inner"> 这是一个最简单的卡片视图控件;卡片视...原创 2019-09-22 12:50:04 · 356 阅读 · 0 评论 -
vue.js四十—— 项目实战6利用vuex实现购物车
1. 启用vuex1.1 安装vuexnpm i vuex -S1.2 注册vueximport Vuex from 'vuex';Vue.use(Vuex);1.3 创建store仓储对象var store = new Vuex.Store({ state:{ // 类似于vue中的data域 count:0 }, mutations...原创 2019-09-18 22:04:54 · 586 阅读 · 0 评论 -
收集vue.js常见的错误
1. [Vue-warn]:Unknown custom element: <router-link> - did you register the component correctiy?警告原因是vue-router未注册/** * 导入路由模块 * 1. 引入路由 * 2. 安装路由 * 3. 引入自定义路由文件 */import VueRouter fro...原创 2019-09-18 21:32:08 · 214 阅读 · 0 评论 -
vue.js三十九—— 初识vuex
1. 介绍参考链接:https://vuex.vuejs.org/zh/guide/1.1 官方介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说直白点,vuex就是管理vue的状态(数据)的。1.2 作用Vuex 是vue配套的公共数据管理工具,它可以把一些共享的数...原创 2019-09-08 22:35:45 · 296 阅读 · 0 评论 -
vue.js三十九—— 项目实战5商品详情页面改造
1. 首图轮播图1.1 引入子组件1.1.1 导入子组件import swiper from '../subComponents/swiper.vue';1.1.2 新建components节点components:{ swiper }1.1.3 界面引入组件在goodsInfo.vue中轮播图区域,class=mui-card-content-inner的div中...原创 2019-09-03 23:13:21 · 1245 阅读 · 0 评论 -
vue.js三十八—— 抽离轮播图组件
我们发现,在首页和商品详情都会使用到轮播图,但是,我们在首页的轮播图是写在页面中的,为了能够复用,我们可以将轮播图功能抽离成一个单独的组件。1. 新建子组件swiper.vue模板<template> <div> </div></template><script>export defau...原创 2019-09-03 21:14:38 · 335 阅读 · 0 评论 -
在安卓手机中调试vue网站
我们想在手机上,尝试调试我们编写的程序,操作步骤:1. 要保证手机正常运行2. 要保证手机、电脑、处于同一WiFi环境中,也就是说手机可以访问到电脑的IP3. 打开自己的 项目中的 package.json 文件,在Dev脚本中,添加一个 --host 指令,把当前电脑的主机的WiFi地址,设置为--host的指令值3.1 在cmd窗口中输入命令ipconfig复制“无线局域网适配...原创 2019-09-01 21:19:57 · 677 阅读 · 0 评论 -
vue.js学习笔记二十 五——webpack中url-loader的使用之处理字体文件
1. 安装bootstrapnpm i bootstrap -S安装成功之后,在main.js中引入bootstrap/*注意:如果通过路径的形式去引入node-moudles中相关的文件,可以直接省略路径前面的node_moudles这一层目录,直接写包的名称,然后后面跟具体的文件路径,因为默认会去node_moudle目录查找*/import 'bootstrap/dis...原创 2019-08-04 22:11:15 · 882 阅读 · 0 评论 -
vue.js学习笔记二十 四——webpack中url-loader的使用之处理图片
接昨天的内容,在src目录下新建一个目录images,在目录中放入图片123.jpg在index.css文件中引入图片做背景.box { margin: 0; padding: 0; width: 300px; height: 400px; /*background-color: red;*/ background: url('../ima...原创 2019-07-24 23:21:15 · 2031 阅读 · 0 评论 -
Vue.js学习笔记八-Vue中的动画效果介绍与钩子函数实现动画的简单应用
1. 使用过渡类名实现动画1.1 使用v-if控制元素的显示与隐藏<body> <div id="app"> <input type="button" value="点击" @click="flag = !flag" /> <h1 v-show="flag">这是一个h1标签</h1> </div>...原创 2019-06-23 23:00:12 · 409 阅读 · 0 评论 -
vue.js学习笔记十五 —— 路由的基本认识
1.什么是路由1.1 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;1.2 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;前端hash只是适合在页面间跳转例如:http:/...原创 2019-07-01 22:52:05 · 264 阅读 · 0 评论 -
vue.js学习笔记十四 —— 使用ref获取DOM元素和组件引用
1. 产生背景在vue中,其实是不推荐使用js操作DOM对象的,但是在开发中,我们又不可避免的会需要操作DOM去进行某些操作,比方说:我们需要获取到某个标签中的文本内容,如果不操作DOM,我们怎么获取到值。传统的做法是document.getElementById("mh3").innerText,这明显与vue的理念是相冲突的,这时候,vue给我们提供了解决方案。2. $refs获取标签...原创 2019-07-01 18:17:52 · 807 阅读 · 0 评论 -
Vue.js学习笔记七-VUE-resource实现http请求与全局root请求路径配置
1. 写在前面1. 在vue中不推荐使用jq操作DOM元素,所以我们发送ajax请求的时候,最好也是不要使用jq,而是用与vue高度契合的vue-resource来实现。2. jsonp的实现原理 2.1 由于浏览器的安全限制,不允许ajax访问协议不同、域名不同、端口号不同的数据接口,浏览器认为这种访问不安全 2.2 可以通过动态的创建script标签的形式,把scri...原创 2019-06-22 23:37:40 · 1450 阅读 · 0 评论 -
Vue.js学习笔记六——按键修饰符与自定义指令和钩子函数的基础用法
1.按键修饰符关于事件绑定机制需要知道的一点是:在Vue.js中,使用事件绑定机制为元素绑定指定处理函数的时候,如果加了小括号,就可以传递参数了。1.2 为输入框添加按键事件<label>name:<input type="text" class="form-control" v-model="name" @keyup.enter="add"/></l...原创 2019-06-22 22:00:50 · 354 阅读 · 0 评论 -
vue.js学习笔记十三——组件的基本应用之发表评论
1. 案例用到的知识点1.1 在组件与父组件的传值1.2 本地字符串localStorage的用法1.3 vue的双向绑定与基本事件1.4 vue的声明周期钩子函数的应用1.5 组件模板的定义方式2. 完整案例<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-07-01 17:19:21 · 238 阅读 · 0 评论 -
Vue.js学习笔记四——小demo
<!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-Compatib...原创 2019-06-21 22:01:33 · 213 阅读 · 0 评论 -
Vue.js学习笔记三——Vue的条件指令
1. 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"&...原创 2019-06-21 21:54:29 · 166 阅读 · 0 评论 -
vue.js学习笔记十七 —— 监听器
1. 使用keyup事件监听 <body> <div id="app"> <input type="text" v-model="firstname" @keyup="getFullName"/> + <input type="text" v-model="lastname" @keyup="getFullName"/...原创 2019-07-07 18:44:03 · 227 阅读 · 0 评论 -
vue.js学习笔记十八 —— nrm工具
1. nrm的安装使用1.1 作用提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址;什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样;1.2 安装准备在安装nrm之前,必须先安装node....原创 2019-07-07 23:02:48 · 142 阅读 · 0 评论 -
vue.js学习笔记二十 三——webpack中的基本使用
1. 简单的webpack省略了webpack环境的安装(全局安装即可)1.1 创建目录结构webpack_study |-- src |-- index.html |-- main.js |-- dist (目标目录,可有可无,打包的时候,如果没有该目录会自动创建)1.2 在项目目录下运行命令 npm ...原创 2019-07-28 23:18:07 · 176 阅读 · 0 评论 -
vue.js学习笔记二十 二——webpack-plugin与loader-配置
1.使用`html-webpack-plugin`插件配置启动页面由于使用`--contentBase`指令的过程比较繁琐,需要指定启动的目录,同时还需要修改index.html中script标签的src属性,所以推荐使用`html-webpack-plugin`插件配置启动页面.1.1 运行`cnpm i html-webpack-plugin --save-dev`安装到开发依赖 ...原创 2019-07-15 23:23:12 · 383 阅读 · 0 评论 -
vue.js学习笔记二十 一—— webpack-dev-server的常用命令与配置方式
1. 命令配置方式一:直接在webpack-dev-server后面追加参数(推荐方式)1. 编译之后自动打开页面通过 --open 来实现例如:"dev":"webpack-dev-server --open"注意:修改package.json文件之后,需要重启webpack-dev-server2. 修改端口号通过 --port 来实现例如:"dev":"webpa...原创 2019-07-14 23:14:00 · 580 阅读 · 0 评论 -
vue.js学习笔记十二——父子组件
1. 父组件向子组件传值——通过props属性实现默认情况下,子组件不能访问到父组件中的data上的数据和methods方法例如: <body> <div id="app"> <com1 /> </div> <script> // 创建Vue实例,得到viemodel var vm = n...原创 2019-06-29 22:46:09 · 251 阅读 · 0 评论 -
vue.js学习笔记十一——组件的切换
1. 使用v-if与v-else实现组件的切换例如: <body> <div id="app"> <input type="button" value="登录" @click="flag=true" /> <input type="button" value="注册" @click="flag=false" /> &l...原创 2019-06-29 16:55:34 · 423 阅读 · 0 评论