vue学习笔记（一）

1.框架和库的区别：
框架：是一套完整的解决方案，对项目的侵入性较大，项目如果要重新更换框架，则需要重构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
2.MVC跟MVVM的区别

3.v-cloak是为了解决闪烁问题/不会覆盖标签内原有的的值,配合样式使用

4.v-text这种赋值方式默认没有闪烁问题/并且会覆盖标签内原有的的值
5.v-html是渲染html标签
6.v-bind是vue中提供的用于绑定属性的指令，v-bind中可以写合法的表达式
vue会把引号里的数据当成js来执行，所以也可以这样写

注：el是要挂载的id
v-bind:可以在vue中简写做：

7.vue不直接操作dom,vue中提供了v-on事件绑定机制


v-on:可简写为@

8.在vue实例中,如果想要获取data里面的数据，或者想要调用methods中的方法，必须使用this.属性数据名或this.方法名来进行访问，这里的this就表示我们new出来的vue
9.vue实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中【优点:程序员只需要关心数据，不需要考虑如何重新把数据渲染到页面上】
注：箭头函数可以解决this指向问题，箭头函数内部的this永远和箭头函数外部的this保持一致。
10.事件修饰符
.stop阻止冒泡机制 (注：冒泡机制由内而外，从子元素到父元素)

.prevent阻止默认事件（例如阻止a 标签的默认跳转事件，或阻止表单的submit事件）

.capture捕获触发事件 （注：捕获事件由外而内，从父元素到子元素）

.self只点击自己才会触发事件，冒泡捕获通通不care

.once只触发一次事件

注：事件修饰符可以串联

总结：



注：stop跟self的区别是：stop可以阻止全部冒泡，self只能阻止自身的冒泡
11.v-modle实现双向数据绑定 注：v-bind只能实现数据的单向绑定，从M自动绑定到V,无法实现数据的双向绑定，v-modle只能应用在表单元素中

12.vue中通过属性绑定为元素设置class样式

注：class要用‘’包裹，要不然vue会直接找data里面定义的数据，找不到会报错

13.vue中通过属性绑定为元素设置style行内样式

注：对象内属性如果中间有-符号的话，必须给属性加单引号‘’

14.v-for循环渲染
循环数组

循环对象（在遍历对象身上的键值对的时候，除了有val,key,在第三个位置还有一个索引，如v-for=""{{(var,key,i) in user}}）

v-for配合组件使用，必须要绑定key，保证数据唯一性

15.v-if跟v-show的区别
v-if每次都会删除或重新创建元素、有较高的切换性能消耗
v-show每次不会重新进行dom的删除很创建操作，只是切换了元素的display:none;样式，有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不用v-if,如果元素可能永远也不会显示出来，则推荐使用v-show.

注：在vue中，使用事件绑定机制，为元素制定处理函数的时候，如果加了小括号，就可以给函数传参数

<---------丢失部分，以后补上----------------->

16.计算属性
17.计算属性跟methods的对比
18.数组那些方法是响应式（高阶函数）
19.v-model修饰符

<---------丢失部分，以后补上----------------->

20.vue组件化（把复杂问题简单化）


全局组件（可以在多个vue的实例中使用）

局部组件（使用comtends函数创建，第一个key是使用组件的标签名，第二个vaule是组件构造器）

21.父组件跟子组件
构造器中也有自己的components函数，父组件中注册子组件，父组件中就可以直接使用子组件，并且子组件的作用于只在父组件中。在vue实例中，单独使用不了这种情况下的子组件，除非在vue实例中在注册子组件，才可以正常使用

22.创建组件语法糖

23.组件分离的写法
方法1:通过script标签，但注意tyle，注意要给标签取id

方法二：template标签,同上，要给标签取id

注：组件内部是不能访问vue实例中的数据的
24.组件中有存放自己数据的函数，注意：这里的data不是对象，而是一个函数，函数返回一个对象，对象内部保存数据（因为组件可以复用，所以说data中的数据对象类型，因为每次复用都要掉data方法，每个组件中需要处理的数据都不能一样，因为不能多个组件处理同一个数据，所以這了的data是方法，每个组件使用相同数据是都有返回自己的对象）
组件中有自己的data跟methods方法

25.父子组件通信（父传子）

props属性，它可以是对象，也可以是数组，注意，在传入组件中，一定要用v-bind.
数组类型

对象类型 （对象类型可以指定传递过来的数据类型），而且可以指定默认值。


注：指定传入对象类型是数组或对象时，默认值必须是一个函数，如果默认值为[]时，会报错。正确写法：


注：v-bind目前是不支持驼峰命名法的，这样子是会报错的

解决方法如下，需要在标签内转化一下：-
注：如果子组件中有很多标签，必须在最外面包含根，就是说在定义子组件的时候，必须要把他包含在一个根div下
父子组件通信（子传父）
子组件发射，通过$emit自定义事件传递

父组件接收，事件中没有（参数），vue默认把item传进去，注意：如果是普通的点击事件，没有写（参数），vue默认把event传过去。

父组件函数中处理

注：子组件不可以修改父组件的值，会报错，解决方法是可以将props的值传给data中，修改data中的值，然后通过子传父在传到父组件中

26.watch监听数据变化（自组件中可以监听数据变化）

27.父子组件的访问方式
一，父访问子
（1）使用clildren访问（不常用）
使用多个组件打印

（2）使用refs访问（常用），ref是对象类型，默认为空


二.子访问父
（1）parent,访问子组件的父级组件，如果是多重嵌套的组件，只能访问上级组件，而不能访问根组件，因为组件化可能会多出使用，所以parent显然不够灵活。

（2）root子组件访问根组件 （较少用）

28.插槽（对原有东西进行扩充，注：2.6后被废弃）插槽的目的是为了让组件有更强的扩展性。抽取共性，保留不同，组件要预留插槽空间

也可以给插槽一个默认值，插槽可以写入多个标签，会全部替换

具名插槽。如果有需要多个插槽，那么就需要给插槽加name属性

29.插槽作用域
父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子级作用域内编译


30.浅谈模块化
实际开发中，多个开发人员在写自己的js时，可能会导致全局变量重名产生的各种问题，解决方法是闭包或匿名函数，但是就会导致代码复用性降低，这时就需要模块化，最常见的模块化规范有CommonJs,AMD,CMD,也有ES6的Modles
CommonJs核心是导入.导出。

导入

ES6的Modles
（一）加类型

（二）导出



default导出，可以允许导入者自己命名名字，没必要一直用address（导出时可以不加函数名），注意：exprot defalut在同一模块中不允许使用多个

（三）导入



使用defalut导入，可以省略{}

全部导入（使用通配符）

30.webpack（前段模块化打包工具）
1.安装node作为底层,npm
2.安装webpack,
3.构建webpack文件

4.写好依赖关系

5.打开cmd输入命令webpack ./src/main.js ./dist/bundle.js

webpack会自动构建bundle.js文件，在到index页面引入bundle.js文件

新建webpack.config.js包，内容如下

在node中安装path包，执行npm init命令

执行命令后会生成package.json文件

执行命令npm install,会打包依赖，然后在package.json文件中，加入代码，用npm run build代替webpack命令。优点是在终端是执行命令时，如果是webpack命令，用的肯定是webpack全局的，但是如果在文件中替换成npm run build后，在终端执行该命令式，会优先在本地查找，然后执行

在执行npm run build命令后，会重新打包bundle.js文件。
在执行npm install webpack@3.6.0 --save-dev命令，会在本地安装webpack3.6.0版本，成功后，然后在打开package.json文件，会出现新的代码,–save-dev的意思是开发时依赖。

30.1 安装lorder
因为main中，只导入了js文件，那么产生的bundle.js只会对js依赖打包，当有css或者其他时，不会对其他文件产生依赖，所以其他文件没有打包，
只有在main中也导入其他文件，因为mainz中不使用其他文件，所以不用接收，只需要导入，但是这样直接执行会报错，因为没有安装loader

执行npm install --save-dev css-loader命令

在webpack.config.js中配置

注：这里的css-loader只负责css加载，不负责解析，所以还要在安装解析css的loader,执行命令 npm install style-loader --save-dev
(style-loader负责将样式添加到dom中生效)

安装完后，样式就生效啦
但是如果样式文件中引用了图片，在执行时还是会报错，执行npm install --save-dev url-loader命令

安装成功后在webpack.config.js中配置，在加上jpeg(也是jpg的一种后缀名格式)

当加载的图片小于limit时，会将图片编译成base64字符串形式
当加载的图片大于limit时，会报错（在未安装file-loader的情况下）
接下来我们需要安装file-loader
执行命令npm install file-loader --save-dev
如果加载的图片大于limit时，会执行file-loader模块进行加载，会将图片打包到dist目录下
limit默认大小是8196，就是8kb

不过尽管是这样，在页面显示的时候图片还是加载不出来，因为图片路径不对，需要在配置文件里进行拼接

因为打包后的文件都会命名都会自动被命名为哈希值，但是我们又希望每个文件有自己的命名，这里就需要在webpack.config.js中配置了，如图：
带中括号[]表示这是一个变量，哈希值为8为，ext是后缀名变量

30.2 ES6转ES5语法 使用Bable
执行命令npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置webpack.config.js

配置完后再执行命令npm run build 后，可以看到打包文件bundle.js中已经没有es6中的东西了，比如说const等。

31.在webpack中配置vue
执行npm install vue --save命令安装vue (-save表示运行时依赖)

安装完成后，在mainr入口中导入vue就可以使用了


但是这样执行的话会报错，因为我们使用的是runtime-only,他不支持template

这里我们需要在webpack.config.js中配置vue,让他使用runtiome-compiler

然后npm run build重新打包
因为在正式开发中，index不能频繁修改东西，所以代码块可以以卸载template, template中的代码块会覆盖el挂载的app.