cls:清除终端输出
$refs
$http
$route
使用this.$emit('show')来调用父方法
webpack教程版本安装命令: 
(-D:
 
开发依赖,-g:全局依赖,-S项目依赖)
安装cnpm
npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm i -y
全局安装webpack:
    npm install webpack@3.6.0 -g
安装webpack-dev-server:自动打包,自动刷新浏览器
    npm i webpack-dev-server@2.9.3 -D
安装html-webpack-plugin:在内存生成index.html页面,同时把bundle.js注入进去
    cnpm i html-webpack-plugin -D
安装.css文件加载器:
    cnpm i style-loader css-loader -D
安装.less文件加载器:
    cnpm i less-loader less -D
安装.scss文件加载器:
    cnpm i sass-loader node-sass -D 
安装处理css文件中图片路径的loader:
    cnpm i url-loader file-loader -D
安装bootstrap:
    cnpm i bootstrap -S
安装vue的包:
    cnpm i vue -S
安装处理.vue文件的loader:
    cnpm i vue-loader vue-template-compiler -D
安装vue-router路由:
    cnpm i vue-router -S
安装Mint-UI
    npm i mint-ui -S
安装vue-resource(用this.$http.get('...').then(...))
    npm i vue-resource -S
安装vuex: npm i vuex --save
初始化package.json: npm init -y
安装babel:
    1.cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
    2.cnpm i babel-preset-env babel-preset-stage-0 -D
    3.在webpack的配置文件(webpack.config.js)的module节点下的rules数组中,添加新的匹配规则:
        {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
    4.在项目根目录  新建一个.babelrc文件(json格式),不能写注释,字符串要用双引号
        配置:{
                    "presets":["env","stage_0"],
                    "pligins":["transform_runtime"]
                }
vue-preview:vue集成的缩略图插件
    注:1.vue2.0以上版本
        2.img上的class不能去掉
        3.每个图片对象里有w和h属性
 
去除严格模式:mui.js有用到callee等,
 
 
mint ui 完整引入
webpack-dev-server配置:
html-webpack-plugin配置:
css,less.scss:配置
 
图片路径的loader配置:
图片路径的loader配置带参数使用:
    和url地址一样,用?key1=val1&key2=val2
    limit=xx:如果图片大小小于xx就编码成base64,如果图片大于等于xx,就不转成base64
    name=[hash:8]-[name].[ext]
    图片名字,拼上8位hash,图片原名,图片后缀
配置url-loader处理字体文件:
 
组件:
全局组件:
私有组件:
父子组件传值:
父子组件传方法&子组件给父组件传值
 
路由:
取url的id

npm install -S -D -g 有什么区别


npm install module_name -S    即    npm install module_name --save    写入dependencies
npm install module_name -D    即    npm install module_name --save-dev 写入devDependencies
npm install module_name -g 全局安装(命令行使用)
npm install module_name 本地安装(将安装包放在 ./node_modules 下)
 
dependencies与devDependencies有什么区别呢?
devDependencies 里面的插件只用于开发环境,不用于生产环境
dependencies 是需要发布到生产环境的
有点儿不好理解,别怕,举个例子就好:
你开发一个前端项目,在项目中你需要使用gulp构建你的开发和本地运行环境,这时你就要放到dependencies里。gulp是你用来压缩代码,打包等需要的工具,程序实际运行的时候并不需要,所以放到dev里就ok了。
你写程序要用element-ui,生产环境运行项目时肯定要用到element-ui,这时element-ui就应该安装到dependencies中去。
 
ctrl+d,快速选中  vscode
 
处理组件下的dom元素:
 
再用this.$refs.ball
 
watch 属性监听
git提交代码:
 
    操作dom元素
 

黑马vue学习的总结,vue笔记的更多相关文章

  1. day 82 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  2. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  3. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  4. day 81 Vue学习二之vue结合项目简单使用、this指向问题

    Vue学习二之vue结合项目简单使用.this指向问题   本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...

  5. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  6. vue学习第二天 ------ 临时笔记

    学习链接: vue.js官方文档: https://cn.vuejs.org/v2/guide/index.html vue.js API: https://cn.vuejs.org/v2/api/# ...

  7. vue学习之用 Vue.js + Vue Router 创建单页应用的几个步骤

    通过vue学习一:新建或打开vue项目,创建好项目后,接下来的操作为: src目录重新规划——>新建几个页面——>配置这几个页面的路由——>给根实例注入路由配置 src目录重整 在项 ...

  8. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  9. vue学习第一天 ------ 临时笔记

    学习链接 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 http://blog.csdn.net/fungleo/article/detai ...

随机推荐

  1. Python操作MySQL之查看、增删改、自增ID

    在python中用pymysql模块来对mysql进行操作,该模块本质就是一个套接字客户端软件,使用前需要事先安装,在cmd中输入: pip3 install pymysql 1.查看 import ...

  2. Linux必须会的命令---也是以前记录的,ctrl+z fg 啥的 jobs 比较实用

    fg.bg.jobs.&.ctrl + z都是跟系统任务有关的,虽然现在基本上不怎么需要用到这些命令,但学会了也是很实用的 一.& 最经常被用到 这个用在一个命令的最后,可以把这个命令 ...

  3. 数据库SQL---数据库、基本表、视图、索引的定义、修改、删除

    1.SQL(结构化查询语言)的组成:数据定义语言DDL.数据操纵语言DML.数据控制语言DCL.其他. 2.SQL语言的功能: 1)数据查询:SELECT 2)数据定义:CREATE   DROP  ...

  4. 基于口令的密码(PBE)

    基于口令的密码(PBE) 基于口令的密码(Password Based Encryption,PBE)是一种基于口令生成密钥,并使用该密钥进行加密的方法.其中加密和解密使用的是同一个密钥. 根据用户自 ...

  5. js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  6. Django中修改DATABASES后,执行python manage.py ****报错!UnicodeEncodeError

    Django中修改DATABASES后,执行python manage.py ****报错!UnicodeEncodeError: 'latin-1' codec can't encode chara ...

  7. itchat学习

    itchat是一个开源的微信个人号接口,可以很方便的使用python调用微信. 教程如下:https://itchat.readthedocs.io/zh/latest/ 简单试玩了一下,觉得还挺有趣 ...

  8. python画新冠肺炎国内和世界各国累计确诊数量热图

    新冠肺炎国内疫情基本控制住,很多地方都开始摘下口罩了.但是国外的疫情依然处于爆发期,特别是美国,截止目前其累计确诊数量已突破110w.五一节北京柳絮杨絮满天飞,不适合外出.在家心血来潮,献丑画一下各地 ...

  9. Jmeter 插件图表分析

    1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在 setting 中可以设置时间间隔以及其他的参数,右击可以导出 ...

  10. Spring IOC的核心机制:实例化与注入

    上文我们介绍了IOC和DI,IOC是一种设计模式,DI是它的具体实现,有很多的框架都有这样的实现,本文主要以spring框架的实现,来看具体的注入实现逻辑. spring是如何将对象加入容器的 spr ...