vue-01

vue+webpack 优化

一. 异步加载

1.异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用

路由配置：

@ 指向项目根目录，“home”是路由所对应的组件

2. 按需加载-选择性加载依赖包

二. 使用keep-alive

keep-alive组件，用来缓存组件,避免多次加载相应的组件,减少性能消耗

三 webpack相关

webpack提供了http-proxy-middleware解决跨域问题

webpack提供了css打包去重的一些方法：optimize-css-assets-webpack-plugin

打包 vender 时不打包 vue、vuex、vue-router、axios 等，换用国内的 cdn 直接引入到根目录的 index.html 中

externals包含的不需要打包的库  （webpack.base.conf.js）

四 v-show，v-if 的使用

频繁切换的使用 v-show（display控制），不频繁切换的使用 v-if（移除和添加）

五 循环调用子组件时添加 key

六、 不要在模板里面写过多表达式

    通过methods 或computed 封装方法（好处：可被重复调用 复用性高）

挂载点 模板 实例 实例中数据、方法、事件

el : 挂载点

template: 模板

new Vue ：实例

{{ msg }}：插值表达式 还可以使用 v-text   v-html显示数据

v-on:click   => @click

vue是 面向数据编程

总结：

1. new 一个vue对象的时候可以设置它的属性 最重要的属性包括 data、methods、watch

2. data 代表vue对象的数据  methods表示vue对象的方法 watch设置了对象监听的方法

3. vue对象里的设置通过html指令进行关联

4. 重要的指令：v-text 渲染数据 

    v-if   控制显示

    v-on  绑定事件

    v-for 循环渲染

属性绑定 和双向数据绑定

1. 属性绑定

    v-bind:title  => :title

    <div :title="title"> vue </div>

2. 双向绑定   v-model

input 内容变化 下面div中的值相应变化

计算属性 和 侦听器

v-if  v-show  v-for

v-if  隐藏显示 是清除dom元素

v-show 隐藏显示 是给dom元素添加display:none; 属性实现的

v-for  循环内容的展示  加上：key 属性 增加效率

vue组件 todolist

1. 组件定义

2. 组件拆分

组件使用 组件定义 局部组件声明

3. 组件与实例的关系

每一个组件都是一个vue实例    每个实例也就是一个VUE的组件

如果一个Vue的实例没有模板template，它就会找到它的挂载点，把挂载点里的DOM标签当做Vue的实例模板

任何一个vue项目都是由千千万万的vue实例组成的

组件包括：props,template,method

实例包括：el,data,template,method

4. 组件中删除操作

绑定删除事件 触发父组件方法 定义父组件方法

vue-cli 使用（脚手架工具）

单文件组件编码方式