Vue学习

vue官网

• 不推荐新手直接使用vue-cli
• 表示属性的property，在elementUI中为prop

vuex官网

• 包含state的存储框架

v-model的使用

• 配合radio使用时，v-model绑定的值为bool类型
• 配合checkbox使用时，v-model绑定的值为数组类型
• 配合select使用时，v-model绑定的值为字符串，如果想选择多个，需要加上mutiple

v-model的修饰符

• lazy：当希望失去焦点的时候，才改变data中的值时，可以使用v-model.lazy修饰符，当用户输入完成点击回车的时候响应
• number：使用v-model.number将输入的数字（可能是字符串），自动转换为number类型
• trim：如果输入的首位有很多空格，可以使用v-model.trim删除首尾空格

组件化的实现与步骤

• 组件化是vue.js中的重要思想，任何的应用都会被抽象成一个组件树
• 注册组件步骤：创建组件构造器—>注册组件—>使用组件
• Vue.extend()创建的是一个组件构造器，实际上，这种写法在Vue2.x的文档中几乎已经看不到了，它直接使用语法糖。
• 注意，在script中写Vue.component('cpn', cpnC)定义的是全局组件，可以在多个Vue实例中使用；
• 注意，在Vue实例中写的components属性，是局部组件，只能在当前页面中使用；
• Vue算是一个root，根级别的组件；
• 子组件中的data数据，应该写成函数返回的形式，否则可能会出现多个组件共用同一变量的问题。
• 父组件向子组件传输数据通信，采用props的方式；
• 子组件向父组件传输数据通信，采用this.$emit('saveData, item')自定义事件的方式；
• 父传子时，如果是驼峰命名，可能会存在问题。

组件的用法

• 在定义子组件时，最好给
• 在组件中传递数据时，注意驼峰命名，可能会出问题
• 组件中包括template、script、style，在项目编译之后，会去掉template，只剩下script、style。而变成render函数。

父访问子

• 可以使用$children的方式访问子组件（使用下标的方式），每一个children都是一个子组件VueComponent
• 可以使用$refs的方式访问（常用）

子访问父

• 可以使用$parent的方式访问父组件（但是用的很少）

访问根组件（Vue实例）

• 可以使用$root访问

插槽（重点）

• 抽取共性，保留不同；
• 把共同的东西直接写死放组件里，不同的东西使用slot插槽解决；

使用具名插槽（重点）

ES6语法导入导出（可以研究一下闭包）

• export
• import

初始webpack

• 从本质上来讲，webpack是一个现代的JavaScript应用的前端静态模块打包工具
• 打包工具还包含grunt、gulp，但是它们都是针对一些没有模块化概念的，只需要进行简单的合并、压缩需求；
• 但如果整个项目使用了模块化管理，而且相关依赖非常强，我们就可以使用更强大的webpack了；

webpack安装

• webpack为了可以正常运行，必须依赖于node环境，node环境为了可以正常执行很多代码，必须其中包含各种以来的包，所以在我们安装node的时候，会自动帮我们安装npm包管理工具；
• webpack .src/main.js ./dist/bundle.js，将main.js（其中包含各种依赖）打包为bundle.js