阳光果苏

# 为什么要学习 css 的预编译处理器 CSS 最明显的短板就是它只是一个标记语言，没有变量、语句等编程语言的特点。如果项目过长，写起来有些麻烦，而且会产生较多的重复代码。 虽然只要团队中的成员都有模块化的思想，并有统一的规范，可以完全不在团队中使用与处理器，但是为了能让写 css 变得像写 JS 那样灵活，支持变量、语句、混合（mixin）、函数等等，就产生了预处理器。 比如 bootstrap 的 css 就是有 css 预编译写好再转成普通 css 文件的。后面我们学习 vue.js 或者看别人写的项目，到公司上班都很有可能遇到 css 预编译处理器。所以我们得学会如何使用。 #...

# 前端构建化工具 - webpack https://www.webpackjs.com/ 。前端越来越有工程化、模块化趋势。对前端的要求越来越多。 webpack 产生的必要性 开发环境的需求是代码越详细越好、注释越具体越好，模块化开发、按照需求可以开发复杂的代码 到了生产环境（线上，准备要发布），需求又是相反的。 所以将开发环境的那些代码通过一款自动化工具来完成打包、编译、压缩等工作就称之为构建 # 使用 webpack 安装 webpack 12345678//在任意文件夹下打开命令行中输入以下两个指令cnpm i webpack -g//回车后再次输入以下指令安装：cnpm...

# npm 的概念 node.js 下的一个应用市场。https://www.npmjs.com/。完成前端构建化工作：压缩、打包，需要从 npm 这个应用市场下载对应的工具。npm：nodejs package manage # 常见的使用场景 允许用户从 NPM 服务器下载别人编写的第三方包到本地使用。（买家）（下插件：vue,juqery,boostrap,react） 允许用户从 NPM 服务器下载并安装别人编写的命令行程序到本地使用。(买家)（下工具，压缩、打包叫工具） 允许用户将自己编写的包或命令行程序上传到 NPM 服务器供别人使用。（卖家） # npm...

# vue 的插槽 1. 概念： Vue 实现了一套内容分发的 API，slot 相当于是组件当中的一个占位符，可以用来在组件中显示一块 HTML 代码（HTML 模板）。也是组件通信的一种方式。 注意：插槽的显示位置由子组件说了算。将 slot 写在子组件哪，父组件传过来的模板将来就显示在哪 2. 插槽 VS 自定义属性 插槽： 将数据写在组件标签内 123<my-div> <p>这里是传给子元素的数据</p></my-div> 自定义属性：...

# 在 vue 中使用过渡和动画的步骤 使用条件 该元素是使用了 v-if,v-show 等让元素隐藏或显示的指令 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 使用 6 个特别的 class 来定制动画 类似于 a 链接的 4 个状态 入场：一个元素从隐藏到显示。有 3 个状态 v-enter 准备入场（隐藏）0% v-enter-active 入场的过程 1%-99% v-enter-to 入场完毕（显示）100% 出场：一个元素从显示到隐藏 v-leave 准备出场 v-leave-active 出场的过程 v-leave-to 出场完毕 以上 6 个...

# vue 的组件 组件：一段特定功能的可以复用的代码块。 页面：只是模块（组件）的一个容器。 组件的好处：模块化、把耦合度降低，可以真正实现像搭积木那样写页面。 123456//使用组件的好处：1、提高开发效率2、方便重复使用3、简化调试步骤4、提升项目可维护性5、便于协同开发 vue 的乞丐版的组件分两部分：（今天只要知道怎么写即可） 全局组件 12345678910111213//在JS中定义组件（定义函数）Vue.component("组件名",{...

# 监听属性 计算属性会产生一个新的属性。监听属性只是监听已有的属性。 watch 监听可以用来监听某一个属性的值的变化，当变化时，可以通过该属性下的对应的函数进行监听并执行该函数。其作用与写法类似于计算属性，但两者之间还是有较大的区别，watch 只是监听派发过来的属性，不用产生一个新的属性并返回出去。 可以把 watch 看做是 js 中的 onchange 事件，只要该属性的值发生变化了就会触发该函数。 官网...

# 计算属性的概念 ​ 计算属性也是属性（从 data 中的 A 属性得到一个计算属性 B 属性），角色相当于是 data 中属性，从视图的外观上来说两者一样。 ​ 有时候某个属性是通过某种计算达到的，计算的过程可能很复杂，所以 vue 中可将这种属性放入到计算属性中。如同 methods 那样。 ​ 计算属性也是属性，只不过与 data 里的属性不太一样，它是放在 computed 对象里的，该属性一般由函数执行得到，其函数返回值就是该属性的值。 123456789101112131415161718192021222324252627282930313233343536373839new...

# vue 的事件指令 作用：给标签绑定事件 12345678910<div v-on:事件类型="表达式"></div>因为事件也经常使用，所以可以把v-on简写为@<div @事件类型="表达式"></div>//语法：@事件类型="表达式"比如：<div...

# 数组对象的新方法 以下几个数组的方法：vue 用来处理数据很常见。 forEach map filter 过滤：根据条件来过滤数组 1234567891011121314151617var arr=[12,18,19,20,21];//需求：找出所有大于18的数字//找出所有的偶数var newarr=arr.filter(function(item,index){ //只要表达式成立，则会将该数组元素存放在一个新数组中 return 表达式|条件；});//var...