vue1
Vue.js - Day1课程介绍前5天： 都在学习Vue基本的语法和概念；打包工具 Webpack , Gulp后5天： 以项目驱动教学；
什么是Vue.js
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
为什么要学习流行框架
企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；
企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.j ...
vue4
Vue.js - Day4父组件向子组件传值
组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据123456789101112131415<script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: { son: { template: '<h1>这是子组件 --- {{finfo}}</h1>', props: ['finfo'] } } }); </script>
使用v-bind或简化指 ...
vue5
Vue.js - Day5 - Webpack在网页中会引用哪些常见的静态资源？
JS
.js .jsx .coffee .ts（TypeScript 类 C# 语言）
CSS
.css .less .sass .scss
Images
.jpg .png .gif .bmp .svg
字体文件（Fonts）
.svg .ttf .eot .woff .woff2
模板文件
.ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】
网页中引入的静态资源多了以后有什么问题？？？
网页加载速度慢， 因为 我们要发起很多的二次请求；
要处理错综复杂的依赖关系
如何解决上述两个问题
合并、压缩、精灵图、图片的Base64编码
可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系；
什么是webpack?webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
如何完美实现上述的2种解决方案
使用G ...
vue6
Vue.js - day6注意：有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D
在普通页面中使用render函数渲染组件在webpack中配置.vue组件页面的解析
运行cnpm i vue -S将vue安装为运行依赖；
运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
运行cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式；
在webpack.config.js中，添加如下module规则：
12345678910111213module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.vue$/, use ...
vue2
Vue.js - Day2品牌管理案例添加新品牌删除品牌根据条件筛选品牌
1.x 版本中的filterBy指令，在2.x中已经被废除：
filterBy - 指令
1234567891011121314151617<tr v-for="item in list | filterBy searchName in 'name'"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="#" @click.prevent="del(item.id)">删除</a> </t ...
vue3
Vue.js - Day3定义Vue组件什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同：
模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式
使用 Vue.extend 配合 Vue.component 方法：1234var login = Vue.extend({ template: '<h1>登录</h1>' }); Vue.component('login', login);
直接使用 Vue.component 方法：123Vue.component('register', { template: '<h1>注册</h1& ...
vue export
import引入文件路径import 引入一个依赖包，不需要相对路径。import 引入一个自己写的js文件，是需要相对路径的。
12import app from ‘app’; import app from ‘./app’;
import引入文件变量名
使用export抛出的变量需要用{}进行import1234a.js :export function a(){}; b.js: import {a} from ‘./文件a’;
使用export default抛出的变量，只需要自己起一个名字就行： 123456a.js : var obj = { name: ‘example’ }; export default obj; b.js: import newNname from ‘./a.js’; console.log(newNname .name); // example;
一个js文件中，只能有一个export default； 但是 ...
vue-imooc-mall
flex 和 ellipsis 冲突 在flex 内部添加ellipsis
12345 <h1 class="mine-navbar-title" v-if="title"> <span class="mine-navbar-text" v-text="title"></span> </h1>h1 flex-centerspan ellipsis
npm i vue-awesome-swiper 基于swiper的vue插件 npm i -S jsonp jsonp插件 实现图片正方形
12345678910111213141516<p class="recommend-pic"> <img class="recommend-img" :src="item.basein ...
